Radar Chart test

A new design for a radar chart in D3.js. You can read more about in on the blog I wrote "A different look for the D3 radar chart"

An older version of a radar chart that I adjusted two years ago when I was just starting to learn D3.js can be found here

forked from nbremer's block: Radar Chart SCB

<!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>
		
		<style>
			.radarChart {
				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 {
				fill: #333333;
			}
      
      .gridCircle {
        stroke: #CDCDCD;
        fill: none;
      }
      
      .axis .line {
        stroke: #CDCDCD;;
      }
      
   
      .charts {
        display: flex;
      }
      
      .axisLabel {
        display:none;
      }
      
      .legend {
        font-family: arial;
        font-weight: bold;
        color: #222;
      }
		</style>
	
	</head>
	<body>
    <div class="charts">
      <div class="radarChart1"></div>
      <div class="radarChart2"></div>
    </div>

var color1 = d3.scale.ordinal()
				.range(["#EDC951"]);
				
			var radarChartOptions1 = {
			  w: width,
			  h: height,
			  margin: margin,
			  maxValue: 1,
			  levels: 5,
			  roundStrokes: true,
			  color: color1,
        labelFactor: 1.5
			};
      
      var color2 = d3.scale.ordinal()
				.range(["#CC333F"]);
				
			var radarChartOptions2 = {
			  w: width,
			  h: height,
			  margin: margin,
			  maxValue: 1,
			  levels: 4,
			  roundStrokes: true,
			  color: color2,
         labelFactor: 1.5
			};
      
			//Call function to draw the Radar chart
			RadarChart(".radarChart1", [data[0]], radarChartOptions1);
      
      RadarChart(".radarChart2", [data[1]], radarChartOptions2);
		</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js