Radar Chart
A reusable radar chart implementation in D3.js. Styleable, configurable and transition enabled.
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
D3.js reusable chart API
var chart = RadarChart;var svg = d3 ; // draw onesvg; // draw many radarsvar game = svgdata data data data data ;game;game ;
Style with CSS
Configure
// retrieve configchart;// all options with default valueschart;
Example
CSV2Radar
Display a csv file as a radar chart at http://alangrafu.github.io/radar-chart-d3/csv2radar.html.