D3 Components

Radar Chart

<div id="radar-chart-default"></div>
<div id="radar-chart-circular"></div>

<script>
  d3.json('../data/cloud-index-hangzhou.json', function (data) {
    d3.radarChart(data, { id: 'radar-chart-default' });
  });
  d3.json('../data/cloud-index-cities.json', function (data) {
    d3.shuffle(data);
    d3.radarChart(data, {
      id: 'radar-chart-circular',
      title: {
        show: true,
        text: 'Cloud Indexes of China Cities'
      },
      axes: [
        'Computing power',
        'Investments',
        'Big data',
        'Innovations',
        'Demands'
      ],
      series: [
        'Hangzhou',
        'Shenzhen'
      ],
      maxValue: 100,
      levels: 5,
      curve: 'curveCardinalClosed',
      grids: {
        shape: 'circle'
      },
      tooltip: {
        html: function (d) {
          return d.axis + ': ' + d.value + ' (' + d.city + ')';
        }
      },
      legend: {
        autoplay: true
      }
    });
  });
</script>