Old school D3 from simpler times

All examples By author By category About

Catherine-Yu

Full window Github gist

Radar Chart

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="radar-chart.css">
<head>
  <style>
    body {
      padding: 20px;
    }
    .radar-chart .area {
      fill-opacity: 0.7;
    }
    .radar-chart.focus .area {
      fill-opacity: 0.3;
    }
    .radar-chart.focus .area.focused {
      fill-opacity: 0.9;
    }
    .area.germany, .germany .circle {
      fill: #FFD700;
      stroke: none;
    }
    .area.argentina, .argentina .circle {
      fill: #ADD8E6;
      stroke: none;
    }
  </style>

<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
  <script type="text/javascript" src="radar-chart.js"></script>
  </head>
  <body>
   
	<script type="text/javascript">
	  function showRadar(){
		var data = [];
		var chart = RadarChart.chart();
		var c = 'Neighborhood,Potentially Life-Threatening,Alarm,Fire,Non Life-threatening,Other\nTI,85,49,5,38,0';
		var w = 600;
		var h = 700;
		csv = c.split("\n").map(function(i){return i.split(",")})
		headers = []
		csv.forEach(function(item, i){
			if(i==0){
			  headers = item;
			}else{
			  newSeries = {};
			  item.forEach( function(v, j){
				if(j==0){
				  newSeries.className = v;
				  newSeries.axes = [];
				}else{
				  newSeries.axes.push({"axis":[headers[j]], "value": parseFloat(v)});
				}
			  });
			  data.push(newSeries);
			}
		})
		RadarChart.defaultConfig.radius = 3;
		RadarChart.defaultConfig.w = w;
		RadarChart.defaultConfig.h = h;
		RadarChart.draw("#chart-container0", data,450,500,"San Francisco Regions");
		
		
		data = [];
		chart = RadarChart.chart();
		c = 'Neighborhood,Potentially Life-Threatening,Alarm,Fire,Non Life-threatening,Other\nNE,5450,2807,207,2533,4';
		w = 600;
		h = 650;
		csv = c.split("\n").map(function(i){return i.split(",")})
		headers = []
		csv.forEach(function(item, i){
			if(i==0){
			  headers = item;
			}else{
			  newSeries = {};
			  item.forEach( function(v, j){
				if(j==0){
				  newSeries.className = v;
				  newSeries.axes = [];
				}else{
				  newSeries.axes.push({"axis":[headers[j]], "value": parseFloat(v)});
				}
			  });
			  data.push(newSeries);
			}
		})
		RadarChart.defaultConfig.radius = 3;
		RadarChart.defaultConfig.w = w;
		RadarChart.defaultConfig.h = h;
		RadarChart.defaultConfig.color = '#D55967';
		RadarChart.draw("#chart-container", data,450,500,"San Francisco Regions");
		
		
		
		data = [];
		chart = RadarChart.chart();
		c = 'Neighborhood,Potentially Life-Threatening,Alarm,Fire,Non Life-threatening,Other\nSE,4608,1982,206,2266,10';
		w = 600;
		h = 650;
		csv = c.split("\n").map(function(i){return i.split(",")})
		headers = []
		csv.forEach(function(item, i){
			if(i==0){
			  headers = item;
			}else{
			  newSeries = {};
			  item.forEach( function(v, j){
				if(j==0){
				  newSeries.className = v;
				  newSeries.axes = [];
				}else{
				  newSeries.axes.push({"axis":[headers[j]], "value": parseFloat(v)});
				}
			  });
			  data.push(newSeries);
			}
		})
		RadarChart.defaultConfig.radius = 3;
		RadarChart.defaultConfig.w = w;
		RadarChart.defaultConfig.h = h;
		RadarChart.defaultConfig.color = '#589EC9';
		RadarChart.draw("#chart-container1", data,450,500,"San Francisco Regions");
		
		
		data = [];
		chart = RadarChart.chart();
		c = 'Neighborhood,Potentially Life-Threatening,Alarm,Fire,Non Life-threatening,Other\nNW,1540,833,179,755,4';
		w = 600;
		h = 650;
		csv = c.split("\n").map(function(i){return i.split(",")})
		headers = []
		csv.forEach(function(item, i){
			if(i==0){
			  headers = item;
			}else{
			  newSeries = {};
			  item.forEach( function(v, j){
				if(j==0){
				  newSeries.className = v;
				  newSeries.axes = [];
				}else{
				  newSeries.axes.push({"axis":[headers[j]], "value": parseFloat(v)});
				}
			  });
			  data.push(newSeries);
			}
		})
		RadarChart.defaultConfig.radius = 3;
		RadarChart.defaultConfig.w = w;
		RadarChart.defaultConfig.h = h;
		RadarChart.defaultConfig.color = '#F7E08B';
		RadarChart.draw("#chart-container2", data,450,500,"San Francisco Regions");
		
		
		
		
		
		data = [];
		chart = RadarChart.chart();
		c = 'Neighborhood,Potentially Life-Threatening,Alarm,Fire,Non Life-threatening,Other\nSW,1900,1128,160,1021,0';
		w = 600;
		h = 650;
		csv = c.split("\n").map(function(i){return i.split(",")})
		headers = []
		csv.forEach(function(item, i){
			if(i==0){
			  headers = item;
			}else{
			  newSeries = {};
			  item.forEach( function(v, j){
				if(j==0){
				  newSeries.className = v;
				  newSeries.axes = [];
				}else{
				  newSeries.axes.push({"axis":[headers[j]], "value": parseFloat(v)});
				}
			  });
			  data.push(newSeries);
			}
		})
		RadarChart.defaultConfig.radius = 3;
		RadarChart.defaultConfig.w = w;
		RadarChart.defaultConfig.h = h;
		RadarChart.defaultConfig.color = '#99DA94';
		RadarChart.draw("#chart-container3", data,450,500,"San Francisco Regions");
	};

window.onload = showRadar;
	</script>
<div id="chart-container0"></div>
<div id="chart-container"></div>
<div id="chart-container1"></div>
<div id="chart-container2"></div>
<div id="chart-container3"></div>
</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js