Built with blockbuilder.org
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>
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;
}
.tooltip {
fill: #333333;
}
</style>
</head>
<body>
<div class="radarChart"></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 = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
var data = [
[//Spend
{axis:"12+ unit",value:0.0001},
{axis:"1-unit",value:0.4269},
{axis:"2-unit",value:0.2618},
{axis:"3-unit",value:0.1098},
{axis:"4-unit",value:0.0586},
{axis:"5-unit",value:0.0258},
{axis:"6-unit",value:0.0677},
{axis:"7-unit",value:0.0218},
{axis:"8-unit",value:0.0131},
{axis:"9-unit",value:0.0080},
{axis:"10-unit",value:0.0029},
{axis:"11-unit",value:0.0001}
],[//Unit Sales
{axis:"12+ unit",value:0.21},
{axis:"1-unit",value:0.22},
{axis:"2-unit",value:0.28},
{axis:"3-unit",value:0.29},
{axis:"4-unit",value:0.17},
{axis:"5-unit",value:0.22},
{axis:"6-unit",value:0.02},
{axis:"7-unit",value:0.21},
{axis:"8-unit",value:0.21},
{axis:"9-unit",value:0.21},
{axis:"10-unit",value:0.21},
{axis:"11-unit",value:0.21}
],[//HH
{axis:"12+ unit",value:0.21},
{axis:"1-unit",value:0.22},
{axis:"2-unit",value:0.28},
{axis:"3-unit",value:0.29},
{axis:"4-unit",value:0.17},
{axis:"5-unit",value:0.22},
{axis:"6-unit",value:0.02},
{axis:"7-unit",value:0.21},
{axis:"8-unit",value:0.21},
{axis:"9-unit",value:0.21},
{axis:"10-unit",value:0.21},
{axis:"11-unit",value:0.21}
],
[//Visits
{axis:"12+ unit",value:0.21},
{axis:"1-unit",value:0.22},
{axis:"2-unit",value:0.28},
{axis:"3-unit",value:0.29},
{axis:"4-unit",value:0.17},
{axis:"5-unit",value:0.22},
{axis:"6-unit",value:0.02},
{axis:"7-unit",value:0.21},
{axis:"8-unit",value:0.21},
{axis:"9-unit",value:0.21},
{axis:"10-unit",value:0.21},
{axis:"11-unit",value:0.21}
]
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
var color = d3.scale.ordinal()
.range(["#EDC951","#CC333F","#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color
};
//Call function to draw the Radar chart
RadarChart(".radarChart", data, radarChartOptions);
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js