<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>Smoothed D3.js Radar Chart</title>
<!-- Google fonts -->
<link href='http://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 = [
[//iPhone
{axis:"Battery Life",value:0.22},
{axis:"Brand",value:0.28},
{axis:"Contract Cost",value:0.29},
{axis:"Design And Quality",value:0.17},
{axis:"Have Internet Connectivity",value:0.22},
{axis:"Large Screen",value:0.02},
{axis:"Price Of Device",value:0.21},
{axis:"To Be A Smartphone",value:0.50}
],[//Samsung
{axis:"Battery Life",value:0.27},
{axis:"Brand",value:0.16},
{axis:"Contract Cost",value:0.35},
{axis:"Design And Quality",value:0.13},
{axis:"Have Internet Connectivity",value:0.20},
{axis:"Large Screen",value:0.13},
{axis:"Price Of Device",value:0.35},
{axis:"To Be A Smartphone",value:0.38}
],[//Nokia Smartphone
{axis:"Battery Life",value:0.26},
{axis:"Brand",value:0.10},
{axis:"Contract Cost",value:0.30},
{axis:"Design And Quality",value:0.14},
{axis:"Have Internet Connectivity",value:0.22},
{axis:"Large Screen",value:0.04},
{axis:"Price Of Device",value:0.41},
{axis:"To Be A Smartphone",value:0.30}
]
];
//////////////////////////////////////////////////////////////
//////////////////// 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>