radar

by cvalleskey

HTML

<link rel="stylesheet" href="http://chrisvalleskey.com/work/infutor/dist/screen.min.css">
<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js"></script>
<div class="radar">
  <div id="radar-attributes" class="d3-radar-chart"></div>
</div>

CSS

.d3-radar-chart {
 
  color: #FFF;
}

.radar-chart .area {
  fill-opacity: 1;
}
.radar-chart.focus .area {
  fill-opacity: 0.3;
}
.radar-chart.focus .area.focused {
  fill-opacity: 0.9;
}
.area.infutor, .infutor .circle {
  fill: rgba(0, 184, 199, 0.27);
  stroke: rgb(0, 184, 199);
  stroke-width: 2px;
}
.infutor .circle:hover {
  display: block;
}

.radar text {
  color: #FFF;
}

.radar line {
  stroke: #004D60;
  stroke-width: 1px;
}

.radar .title {
  color: #F00;
}

.radar .score {
  font: Bold 32px/1 "Open Sans Condensed", sans-serif;
  color: #00B8C7;
}

.radar .score:after {
  content: "%";
}

JavaScript

var imagePath = "http://chrisvalleskey.com/work/infutor/";


RadarChart.defaultConfig.color = function() {};
RadarChart.defaultConfig.width = 400;
RadarChart.defaultConfig.height = 400;

var data = [
  {
    className: 'infutor',
    axes: [
      {
        axis : "Mortality",
        icon : "images/Icon-mortality.svg",
        value : 100
      },
      {
        axis : "Education",
        icon : "images/Icon-education.svg",
        value : 20
      },
      {
        axis : "Demographics",
        icon : "images/Icon-demographics.svg",
        value : 100
      },
      {
        axis : "Children",
        icon : "images/Icon-children.svg",
        value : 33
      },
      {
        axis : "Housing",
        icon : "images/Icon-housing.svg",
        value : 100
      },
      {
        axis : "Buying Power",
        icon : "images/Icon-buying-power.svg",
        value : 60
      },
      {
        axis : "Automobiles",
        icon : "images/Icon-automobiles.svg",
        value : 18
      }
    ]
  }
];
function mapData() {
  return data.map(function(d) {
    return {
      className: d.className,
      axes: d.axes.map(function(axis) {
        return {axis: axis.axis, value: axis.value + 25};
      })
    };
  });
}

var chart = RadarChart.chart();
var cfg = chart.config({
	circles : false,
  levels : 5,
  factor: 0.7,
  maxValue: 100,
  minValue: 0,
  axisText: false,
  radians: -2 * Math.PI,
});
var svg = d3.select('#radar-attributes').append('svg')
  .attr('width', '600px')
  .attr('height', '600px');
svg.append('g').classed('single', 1).datum(mapData()).call(chart);

d3.selectAll(".axis").reverse().each(function(d,i) { 
	var da = data[0].axes[i];
	var g = d3.select(this)
  	.insert('g')
    .attr('class', 'label label-'+i)
    .attr('height', '28px')
    .attr('width', '28px')
    .attr('fill', '#FFF');
		var line = d3.select(this).select('line');
    var offset = {
    	x : (line.attr('x2') - 0),
      y : (line.attr('y2') - 0)
    };
   ...