Old school D3 from simpler times

All examples By author By category About

tpreusse

Full window Github gist

Radar Chart

<!DOCTYPE html>

<meta charset="utf-8">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css">

<style>
body {
  padding: 20px;
}
</style>

<style>
.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 src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tpreusse/radar-chart-d3/src/radar-chart.js"></script>

<script>
RadarChart.defaultConfig.color = function() {};
RadarChart.defaultConfig.radius = 3;
RadarChart.defaultConfig.w = 400;
RadarChart.defaultConfig.h = 400;
</script>

<span></span>

<script>
var data = [
  {
    className: 'germany', // optional can be used for styling
    axes: [
      {axis: "strength", value: 13}, 
      {axis: "intelligence", value: 6}, 
      {axis: "charisma", value: 5},  
      {axis: "dexterity", value: 9},  
      {axis: "luck", value: 2}
    ]
  },
  {
    className: 'argentina',
    axes: [
      {axis: "strength", value: 6}, 
      {axis: "intelligence", value: 7}, 
      {axis: "charisma", value: 10},  
      {axis: "dexterity", value: 13},  
      {axis: "luck", value: 9}
    ]
  }
];
function randomDataset() {
  return data.map(function(d) {
    return {
      className: d.className,
      axes: d.axes.map(function(axis) {
        return {axis: axis.axis, value: Math.ceil(Math.random() * 10)};
      })
    };
  });
}
</script>

<script>
var chart = RadarChart.chart();
var cfg = chart.config(); // retrieve default config
var svg = d3.select('body').append('svg')
  .attr('width', cfg.w + cfg.w + 50)
  .attr('height', cfg.h + cfg.h / 4);
svg.append('g').classed('single', 1).datum(randomDataset()).call(chart);

// many radars
chart.config({w: cfg.w / 4, h: cfg.h / 4, axisText: false, levels: 0, circles: false});
cfg = chart.config();
function render() {
  var game = svg.selectAll('g.game').data(
    [
      randomDataset(),
      randomDataset(),
      randomDataset(),
      randomDataset()
    ]
  );
  game.enter().append('g').classed('game', 1);
  game
    .attr('transform', function(d, i) { return 'translate('+((cfg.w * 4) + 50 + (i * cfg.w))+','+ (cfg.h * 1.3) +')'; })
    .call(chart);

setTimeout(render, 1000);
}
render();
</script>

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

Updated missing url https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js to https://cdn.jsdelivr.net/gh/tpreusse/radar-chart-d3/src/radar-chart.js

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

https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js