radar-chart-d3

Simple radar chart in D3.js

  • Owner: alangrafu/radar-chart-d3
  • Platform:
  • License:: Apache License 2.0
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

Radar Chart

A reusable radar chart implementation in D3.js. Styleable, configurable and transition-capable.

Radar Example

Usage

Install

bower install git@github.com: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.

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

Main metrics

Overview
Name With Owneralangrafu/radar-chart-d3
Primary LanguageJavaScript
Program languageHTML (Language Count: 3)
Platform
License:Apache License 2.0
所有者活动
Created At2013-02-22 07:35:55
Pushed At2021-11-23 06:03:49
Last Commit At2016-09-19 11:19:26
Release Count1
Last Release Namev1.2.1 (Posted on 2015-09-28 21:51:02)
First Release Namev1.2.1 (Posted on 2015-09-28 21:51:02)
用户参与
Stargazers Count427
Watchers Count16
Fork Count169
Commits Count91
Has Issues Enabled
Issues Count22
Issue Open Count14
Pull Requests Count22
Pull Requests Open Count7
Pull Requests Close Count2
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private