A redesign of the radar chart function that was created by alangrafu, used in my blog on Making the D3 Radar Chart look a bit better
An even newer version created 2 years later can be found here
forked from nbremer's block: D3.js - Radar Chart or Spider Chart - Adjusted from radar-chart-d3
forked from alandunning's block: Radar Chart D3 V4
xxxxxxxxxx
<meta charset="utf-8">
<head>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,500,700" rel="stylesheet">
</head>
<style>
body {
background-color: #F1F3F3
}
.axis {
font: 15px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #D4D8DA;
stroke-width: 2px;
shape-rendering: crispEdges;
}
#chart {
position: absolute;
top: 50px;
left: 100px;
}
.toolTip {
pointer-events: none;
position: absolute;
display: none;
min-width: 50px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
padding: 9px 14px 6px 14px;
border-radius: 2px;
text-align: center;
line-height: 1.3;
color: #5B6770;
box-shadow: 0px 3px 9px rgba(0, 0, 0, .15);
}
.toolTip:after {
content: "";
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid white;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -12px;
}
.toolTip span {
font-weight: 500;
color: #081F2C;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="RadarChart.js"></script>
<div id="chart"></div>
<script>
var width = 300,
height = 300;
// Config for the Radar chart
var config = {
w: width,
h: height,
maxValue: 100,
levels: 5,
ExtraWidthX: 300
}
//Call function to draw the Radar chart
d3.json("data.json", function(error, data) {
if (error) throw error;
RadarChart.draw("#chart", data, config);
});
var svg = d3.select('body')
.selectAll('svg')
.append('svg')
.attr("width", width)
.attr("height", height);
</script>
https://d3js.org/d3.v4.min.js