D3 Examples - Bellingham.design Radar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
</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;
}
#chart1 {
  position: absolute;
  top: 50px;
  left: 50px;
}
#chart2 {
  position: absolute;
  top: 50px;
  left: 400px;
}
#label1 {
  font: 15px sans-serif;
  position: absolute;
  top: 400px;
  left: 250px;
}
#label2 {
  font: 15px sans-serif;
  position: absolute;
  top: 400px;
  left: 600px;
}
.toolTip {
  font: 15px sans-serif;
  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 span {
  font-weight: 500;
  color: #081F2C;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script src="RadarChart.js"></script>
​
<div id="chart1"></div>
<div id="chart2"></div>
<div id="label1">Skill level</div>
<div id="label2">Skill interest</div>
​
<script>
var width = 300,
    height = 300;
​
// Config for the Radar chart
var config = {
    w: width,
    h: height,
    radius: 5,
    dotOpacityArea: 0.001,
    dotOpacityStroke: 0,
    opacityArea: 0.1,
    opacityStroke: 0.2,
    maxValue: 10,
    levels: 5,
    ExtraWidthX: 300
}
​
d3.queue()
  .defer(d3.csv,"survey_results_skill_level.csv")
  .defer(d3.csv,"survey_results_skill_interest.csv")
  .awaitAll(function(error, data) {
//d3.json("data.json", function(error, data) {
    if (error) throw error;
​
    var dataJson1 = [];
    data[0].forEach((row) => {
      console.log(row);
      var record = [];
      d3.keys(row).forEach((key) => {
        if (key != 'id') {
          record.push({
            "axis": key,
            "value": +row[key]
          });
        }
      });
      dataJson1.push(record);
    });
    console.log(dataJson1);
​
    var dataJson2 = [];
    data[1].forEach((row) => {
      console.log(row);
      var record = [];
      d3.keys(row).forEach((key) => {
        if (key != 'id') {
          record.push({
            "axis": key,
            "value": +row[key]
          });
        }
      });
      dataJson2.push(record);
    });
    console.log(dataJson2);
    //Call function to draw the Radar chart
​
    RadarChart.draw("#chart1", dataJson1, config);
    RadarChart.draw("#chart2", dataJson2, config);
});
​
var svg = d3.select('body')
  .selectAll('svg')
  .append('svg')
  .attr("width", width)
  .attr("height", height);
</script>
​
    