d3-spider-chart

D3 Radar Chart

Forked from alangrafu(https://github.com/alangrafu)'s radar-chart-d3(https://github.com/alangrafu/radar-chart-d3).

Usage

Install

bower install [e-mail]:alangrafu/radar-chart-d3.git --save

Data structure

var data = [
  {
    className: 'germany', // optional, can be used for styling
    axes: [
      {axis: "strength", value: 13, yOffset: 10},
      {axis: "intelligence", value: 6},
      {axis: "charisma", value: 5},
      {axis: "dexterity", value: 9},
      {axis: "luck", value: 2, xOffset: -20}
    ]
  },
  {
    className: 'argentina',
    axes: [
      {axis: "strength", value: 6},
      {axis: "intelligence", value: 7},
      {axis: "charisma", value: 10},
      {axis: "dexterity", value: 13},
      {axis: "luck", value: 9}
    ]
  }
];

xOffset and yOffset are optional values that allows a developer to change the position of a specific label. It is important to add them in the first group of axes.

Simple single chart drawing

<div class="chart-container"></div>
<script>
  RadarChart.draw(".chart-container", data);
</script>

D3.js reusable chart API

var chart = RadarChart.chart();
var svg = d3
  .select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 800);

// draw one
svg.append("g").classed("focus", 1).datum(data).call(chart);

// draw many radars
var game = svg.selectAll("g.game").data([data, data, data, data]);
game.enter().append("g").classed("game", 1);
game
  .attr("transform", function (d, i) {
    return "translate(150,600)";
  })
  .call(chart);

Style with CSS

.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;
}

Configure

// retrieve config
chart.config();
// all options with default values
chart.config({
  containerClass: "radar-chart", // target with css, the default stylesheet targets .radar-chart
  w: 600,
  h: 600,
  factor: 0.95,
  factorLegend: 1,
  levels: 3,
  maxValue: 0,
  minValue: 0,
  radians: 2 * Math.PI,
  color: d3.scale.category10(), // pass a noop (function() {}) to decide color via css
  axisLine: true,
  axisText: true,
  circles: true,
  radius: 5,
  open: false, // whether or not the last axis value should connect back to the first axis value
  // if true, consider modifying the chart opacity (see "Style with CSS" section above)
  axisJoin: function (d, i) {
    return d.className || i;
  },
  tooltipFormatValue: function (d) {
    return d;
  },
  tooltipFormatClass: function (d) {
    return d;
  },
  transitionDuration: 300,
});

Example

###CSV2Radar

Display a csv file as a radar chart at http://alangrafu.github.io/radar-chart-d3/csv2radar.html.

http://bl.ocks.org/tpreusse/2bc99d74a461b8c0acb1