Nodes on Radar Chart 3

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

forked from micahstubbs's block: radar chart with smallest area on top

forked from newsummit's block: Nodes on Radar Chart

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
		<title>Smoothed D3.js Radar Chart</title>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<script src="https://d3js.org/d3.v4.min.js"></script>
		
		<style>
			body {
				font-family: 'Open Sans', sans-serif;
				font-size: 11px;
				font-weight: 300;
				fill: #242424;
				text-align: center;
				text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
				cursor: default;
			}
			
			.legend {
				font-family: 'Raleway', sans-serif;
				fill: #333333;
			}
			
			.tooltip {
				fill: #333333;
			}
		</style>
	
	</head>
	<body>

var margin = {top: 50, right: 50, bottom: 50, left: 50},
				width = Math.min(900, window.innerWidth - 10) - margin.left - margin.right,
				height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
					
			////////////////////////////////////////////////////////////// 
			//////////////////// Draw the Chart ////////////////////////// 
			//////////////////////////////////////////////////////////////

/* var color = d3.scale.ordinal()
				.range(["#EDC951","#CC333F","#00A0B0"]); */
      
      var color = d3.scaleBand().range(["#EDC951","#CC333F","#00A0B0"]);
				
			var radarChartOptions = {
			  w: width,
			  h: height,
			  margin: margin,
        sourceNode: '001',
			  maxValue: 1,
			  wrapWidth: 135,
			  levels: 5,
			  roundStrokes: true,
			  color: color,
			  axisName: "statement",
			  value: "percentCorrect"
			};

//Load the data and Call function to draw the Radar chart
			d3.json("data.json", function(error, data){
        RadarChart(".radarChart", data, radarChartOptions);
			});
			
		</script>
	</body>
</html>

https://d3js.org/d3.v4.min.js