block by micahstubbs 465725cdc547c7cc8491

radar chart with smallest area on top

Full Screen

this 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

index.html

data.json

radarChart.js