All geek questions in one place

D3js - Creating Asterplot Diagrams (Example Included)

I am new to d3js but am familiar with javascript and data visualization principles.

I tried to achieve an effect for visualizing 2-dimensional data measurements using an aster chart diagram, but cannot make this work as expected.

In the appendix you will find the diagram I'm trying to recreate, and my sample code. It would be great if you could tell me how to make it work - or how to optimize it! :)

D3JS - Aster Site Preview

This is how I think the data and code should look like .. kinda .. (Incoming pseudocode ..)

Sample data:

var testData = { maxPoints: 10, color: '#bababa', border: { width: 1, color: '#ffffff' }, items: [ { name: 'Looks', color: '#2976dd', weight: 0.37, points: 8 },{ name: 'Charm', color: '#87bd24', weight: 0.03, points: 5 },{ name: 'Honesty', color: '#406900', weight: 0.16, points: 7 },{ name: 'Humour', color: '#ffb200', weight: 0.31, points: 9 },{ name: 'Intelligence', color: '#f78200', weight: 0.12, points: 0 } ] };

Code example:

  var archs = []; // Loop through each item var circleRadius = 400; var innerRadius = 100; var startAngle = 0; var endAngle = 0; for (var i = 0; i < testData.items.length; i++) { // Draw each arch var maxPoints = testData.maxPoints; var archHeight = (circleRadius - innerRadius) / maxPoints; var startRadius = innerRadius; endAngle += testData.items[i].weight; for (var j = 0; j < maxPoints; j++) { var color = testData.color; // draw arch - don't know how to colorize accordingly.. if (testData.items[i].points < j) { // color this arc somehow.. color = testData.items[i].color; } d3.svg.arc() .startAngle(startAngle) .endAngle(endAngle) .innerRadius(startRadius) .outerRadius(startRadius+archHeight); // Increase startRadius startRadius += archHeight; } // Increase startAngle startAngle = endAngle; }

Somehow my code looks a lot more complicated .. Although it is still pseudo-code .. I'm still afraid. If anyone could give me a hint or some working code to get started, I would be very grateful!

Thanks in advance - Chris

+5
source share
1 answer

Here is a brief implementation that replicates your diagram. It essentially builds concentric donut diagrams based on weight, and then colors the slices based on points:

 <!DOCTYPE html> <meta charset="utf-8"> <style> .arc path { stroke: #fff; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var testData = { maxPoints: 10, color: '#bababa', border: { width: 1, color: '#ffffff' }, items: [{ name: 'Looks', color: '#2976dd', weight: 0.37, points: 8 }, { name: 'Charm', color: '#87bd24', weight: 0.03, points: 5 }, { name: 'Honesty', color: '#406900', weight: 0.16, points: 7 }, { name: 'Humour', color: '#ffb200', weight: 0.31, points: 9 }, { name: 'Intelligence', color: '#f78200', weight: 0.12, points: 0 }] }; var width = 500, height = 500; color = d3.scale.category20(); // inner radius var iR = 75, // radius of each concentric arc r = ((Math.min(width, height) / 2) - iR) / testData.maxPoints; var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.weight; }) .padAngle(.01); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var g = svg.selectAll(".arc") .data(pie(testData.items)) .enter().append("g") .attr("class", "arc"); // iterate our number of rings d3.range(testData.maxPoints) .forEach(function(i){ // generate an arc var arc = d3.svg.arc() .outerRadius(r * (i + 1) + iR) .innerRadius(r * i + iR); // fill it, if appropriate g.append("path") .attr("d", arc) .style("fill", function(d) { if (i < d.data.points) return color(d.data.name); else return "#eee" }); }); </script>
+3
source

Source: https://habr.com/ru/post/1243046/

More articles:


All Articles