Bellingham.design Radar Chart

Radar chart visualization of skills in the bellingham.design community.

Based on blocks from nbremer and alandunning.

<!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>

// 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;

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>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-queue.v3.min.js