Radar Chart d3 v5

Radar chart / Spyder graph

Some modifications (adaptating it for d3 v4, adding support for legend) around the code from "A different look for the D3 radar chart".

forked from mthh's block: Radar Chart d3 v4

forked from Coola85's block: Radar Chart d3 v4

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
		<title>Smoothed 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.v5.min.js" charset="utf-8"></script>
		<script src="https://d3js.org/d3-path.v1.min.js" charset="utf-8"></script>
		<script src="radarChart.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;
			}

.legend {
				font-family: 'Raleway', sans-serif;
				fill: #333333;
			}
		</style>
	</head>
	<body>
		<div class="radarChart2" style="display: inline-flex;"></div>
		<script>
			//////////////////////////////////////////////////////////////
			//////////////////////// Set-Up //////////////////////////////
			//////////////////////////////////////////////////////////////

var margin = { top: 50, right: 80, bottom: 50, left: 80 },
				width = Math.min(700, window.innerWidth / 4) - margin.left - margin.right,
				height = Math.min(width, window.innerHeight - margin.top - margin.bottom);

//////////////////////////////////////////////////////////////
			////////////////////////// Data //////////////////////////////
			//////////////////////////////////////////////////////////////

var data = [
				{ name: 'Allocated budget',
					axes: [
						{axis: 'Sales', value: 42},
						{axis: 'Marketing', value: 20},
						{axis: 'Development', value: 60},
						{axis: 'Customer Support', value: 26},
						{axis: 'Information Technology', value: 35},
						{axis: 'Administration', value: 20}
					],
         color: '#26AF32'
				},
				{ name: 'Actual Spending',
					axes: [
						{axis: 'Sales', value: 50},
						{axis: 'Marketing', value: 45},
						{axis: 'Development', value: 20},
						{axis: 'Customer Support', value: 20},
						{axis: 'Information Technology', value: 25},
						{axis: 'Administration', value: 23}
					],
         color: '#762712'
				},
        { name: 'Further Test',
					axes: [
						{axis: 'Sales', value: 32},
						{axis: 'Marketing', value: 62},
						{axis: 'Development', value: 35},
						{axis: 'Customer Support', value: 10},
						{axis: 'Information Technology', value: 20},
						{axis: 'Administration', value: 28}
					],
         color: '#2a2fd4'
				}
			];
      
      console.log(data[0].color);

//////////////////////////////////////////////////////////////
			////// First example /////////////////////////////////////////
      ///// (not so much options) //////////////////////////////////
			//////////////////////////////////////////////////////////////
			var radarChartOptions = {
			  w: 290,
			  h: 350,
			  margin: margin,
			  levels: 5,
			  roundStrokes: true,
				color: d3.scaleOrdinal().range(["#26AF32", "#762712", "#2a2fd4"]),
				format: '.0f'
			};

// Draw the chart, get a reference the created svg element :
			let svg_radar1 = RadarChart(".radarChart", data, radarChartOptions);

//////////////////////////////////////////////////////////////
			///// Second example /////////////////////////////////////////
			///// Chart legend, custom color, custom unit, etc. //////////
			//////////////////////////////////////////////////////////////
			var radarChartOptions2 = {
			  w: 290,
			  h: 350,
			  margin: margin,
			  maxValue: 60,
			  levels: 6,
			  roundStrokes: false,
			  color: d3.scaleOrdinal().range(["#AFC52F", "#ff6600", "#2a2fd4"]),
				format: '.0f',
				legend: { title: 'Organization XYZ', translateX: 100, translateY: 40 },
				unit: '$'
			};

// Draw the chart, get a reference the created svg element :
			let svg_radar2 = RadarChart(".radarChart2", data, radarChartOptions2);
		</script>
	</body>
</html>

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

https://d3js.org/d3-path.v1.min.js