0.0.5 • Published 2 years ago
d3-cobweb-chart v0.0.5
D3 Radar Chart
Forked from alangrafu(https://github.com/alangrafu)'s radar-chart-d3(https://github.com/alangrafu/radar-chart-d3).
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.