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
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>Smoothed D3.js Radar Chart</title>
<!-- Google fonts -->
<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'>
<!-- D3.js -->
<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>
<script src="radarChart.js"></script>
<script>
/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */
//////////////////////////////////////////////////////////////
//////////////////////// Set-Up //////////////////////////////
//////////////////////////////////////////////////////////////
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom - 20;
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
const a = 100;
var data = [
[
{axis:"Visualization design",value:100/a},
{axis:"Storytelling",value:80/a},
{axis:"Tools",value:100/a},
{axis:"Data Analysis",value:60/a},
{axis:"Data Cleaning",value:40/a},
],
[
{axis:"Front-end",value:100/a},
{axis:"User Experience",value:80/a},
{axis:"Architecture",value:80/a},
{axis:"Testing/Debugging",value:80/a},
{axis:"Back-end",value:80/a},
],
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
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