radar chart with an interactive legend

this version adds a legend!

to enable the legend symbol to interact with the areas, when you call RadarChart(), specify the field radarChart.js should use to assign an areaName to each area.

you can also specify the legend position as a parameter, where x and y are pixel coordinates offset from an origin at the top left of the parent svg.

var legendPosition = {x: 25, y: 25}

var radarChartOptions {
  areaName: "device",
  legendPosition: legendPosition
  // ...
};

to get the interaction to work, we add a data-driven class to each area that we can later select in the cellover() function that is called when you mouse over the legend symbol.

blobWrapper
	.append("path")
	.attr("class", function(d) {
		return "radarArea" + " " + d[0][areaName].replace(/\s+/g, '') //Remove spaces from the areaName string to make one valid class name
	})
// ...

the legend is created with the delightful d3-legend component from susielu

an iteration on the bl.ock radar chart with smallest area on top by micahstubbs

a further iteration on the bl.ock Radar Chart Redesign created by nbremer, which is described nicely in this blog post

forked from micahstubbs's block: radar chart with an interactive legend

forked from anonymous's block: radar chart with an interactive legend

forked from wholegrainmultigrain's block: radar chart with an interactive legend

<!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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.3.0/d3-legend.js" charset="utf-8"></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;
			}
			
			.tooltip {
				fill: #333333;
			}
		</style>
	
	</head>
	<body>

var margin = {top: 100, right: 100, bottom: 100, left: 100},
				legendPosition = {x: 25, y: 25},
				width = Math.min(700, 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 radarChartOptions = {
			  w: width,
			  h: height,
			  margin: margin,
			  legendPosition: legendPosition,
			  maxValue: 0.5,
			  wrapWidth: 60,
			  levels: 5,
			  roundStrokes: true,
			  color: color,
			  axisName: "reason",
			  areaName: "device",
			  value: "value"
			};

//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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.3.0/d3-legend.js