-
Notifications
You must be signed in to change notification settings - Fork 85
Radar charts
andreaferretti edited this page Feb 16, 2015
·
1 revision
The radar graph can be used as follows:
var Radar = require('paths/radar');
var data = [
{ hp: 45, attack: 49, defense: 49, sp_attack: 65, sp_defense: 65, speed: 45 },
{ hp: 60, attack: 62, defense: 63, sp_attack: 80, sp_defense: 80, speed: 60 },
{ hp: 80, attack: 82, defense: 83, sp_attack: 100, sp_defense: 100, speed: 80 },
{ hp: 45, attack: 25, defense: 50, sp_attack: 25, sp_defense: 25, speed: 35 }
]
var radar = Radar({
data: data,
accessor: {
attack: function(x) { return x.attack; },
defense: function(x) { return x.defense; },
speed: function(x) { return x.speed; }
},
compute: {
color: function(i) { return somePalette[i]; }
},
max: 100,
center: [20, 15],
r: 30,
rings: 5
});
Parameters:
-
data
: contains an array of data to be plotted. -
accessor
: an object that describes how to extract the various features from the data. The keys of this object correspond to the axes that are shown in the radar chart, and associated to each key is a function that maps a datum to its value along this axis.accessor
is optional in the case where each datum is itself an object with numeric properties. For instance, if in the example aboveaccessor
was left out, we would obtain a radar graph of hexagons. -
max
: represents the ideal maximum of each feature.max
is optional; if it is left out, it is computed as the actual maximum of each feature, but one may want to override the computed value, for instance for constancy of scale during an animation. -
r
andcenter
: the radius and the center of the figure, respectively. So, the whole figure is scaled in such a way that a feature with valuemax
will be sent to a distancer
from thecenter
. -
rings
(optional, default3
): the number of polygonal rings that shall appear in the chart. -
compute
(optional): see the introduction.
The return value from Radar
is an object with the properties curves
and rings
. curves
is an array of objects, each one having the properties polygon
, item
and index
, where polygon
contains the actual path object. rings
is an array of path objects, representing concentric regular polygons of increasing radius.