Smoothed D3.js Radar Chart
This smoothed D3.js radar chart plots ten nodes by their scores across multiple axes, using percentage labels and circular grid levels to show relative magnitudes. The visualization sorts data areas by average value so smaller blobs render on top, and aligns axis lines with labels by adjusting the angle slice. Built with D3 v4, it uses `d3.scaleLinear` for radius scaling, `d3.forceSimulation` for node layout, and SVG rendering with a glow filter. The data comes from JSON objects with node IDs and scores, and the chart includes an interactive tooltip and legend.
AI-generated descriptionthis version tries out radarChart.js with a new dataset and makes some improvements.
+ parameter-ize the axisName and value fields:
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 1,
wrapWidth: 135,
levels: 5,
roundStrokes: true,
color: color,
axisName: "statement",
value: "percentCorrect"
};
+ subtract Math.PI/2 from angleSlice*i when drawing the radial axis lines so that they line up with the axis label text and the points (it seems this is only a problem your dataset has a number of elements that is not divisible by four)
+ sort the data for the areas from largest to smallest by average value (an approximation of actual blob area) so that that the smallest area is drawn last and therefore appears on top
//Calculate the average value for each area
data.forEach(function(d){
d[value + "Average"] = d3.mean(d.values, function(e){ return e[value] });
})
//Sort
data = data.sort(function(a, b){
var a = a[value + "Average"],
b = b[value + "Average"];
return b - a;
})
an iteration on the bl.ock radar chart for nested data by @micahstubbs
and a further iteration on the bl.ock Radar Chart Redesign created by @nbremer
the data is a subset of table 7-8: Correct answers to factual knowledge questions in physical and biological sciences, by country/region: Most recent year from the US National Science Foundation
forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/465725cdc547c7cc8491'>radar chart with smallest area on top</a>
forked from <a href='http://bl.ocks.org/newsummit/'>newsummit</a>'s block: <a href='http://bl.ocks.org/newsummit/6ca4eca7c25fa8041f20150b610af5ad'>Nodes on Radar Chart</a>
forked from <a href='http://bl.ocks.org/newsummit/'>newsummit</a>'s block: <a href='http://bl.ocks.org/newsummit/6b58692fa92fdb4246b1cbcb3108081e'>Nodes on Radar Chart</a>
forked from <a href='http://bl.ocks.org/newsummit/'>newsummit</a>'s block: <a href='http://bl.ocks.org/newsummit/78d701ef0d7b374c385a4fe21fc94309'>Nodes on Radar Chart 3</a>