Skip to content

Instantly share code, notes, and snippets.

@tpreusse

tpreusse/index.html

Last active September 22, 2023 23:42
Show Gist options
  • Save tpreusse/2bc99d74a461b8c0acb1 to your computer and use it in GitHub Desktop.
Save tpreusse/2bc99d74a461b8c0acb1 to your computer and use it in GitHub Desktop.
Download ZIP
Radar Chart
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css">
<style>
body {
padding: 20px;
}
</style>
<style>
.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;
}
</style>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.js"></script>
<script>
RadarChart.defaultConfig.color = function() {};
RadarChart.defaultConfig.radius = 3;
RadarChart.defaultConfig.w = 400;
RadarChart.defaultConfig.h = 400;
</script>
<span></span>
<script>
var data = [
{
className: 'germany', // optional can be used for styling
axes: [
{axis: "strength", value: 13},
{axis: "intelligence", value: 6},
{axis: "charisma", value: 5},
{axis: "dexterity", value: 9},
{axis: "luck", value: 2}
]
},
{
className: 'argentina',
axes: [
{axis: "strength", value: 6},
{axis: "intelligence", value: 7},
{axis: "charisma", value: 10},
{axis: "dexterity", value: 13},
{axis: "luck", value: 9}
]
}
];
function randomDataset() {
return data.map(function(d) {
return {
className: d.className,
axes: d.axes.map(function(axis) {
return {axis: axis.axis, value: Math.ceil(Math.random() * 10)};
})
};
});
}
</script>
<script>
var chart = RadarChart.chart();
var cfg = chart.config(); // retrieve default config
var svg = d3.select('body').append('svg')
.attr('width', cfg.w + cfg.w + 50)
.attr('height', cfg.h + cfg.h / 4);
svg.append('g').classed('single', 1).datum(randomDataset()).call(chart);
// many radars
chart.config({w: cfg.w / 4, h: cfg.h / 4, axisText: false, levels: 0, circles: false});
cfg = chart.config();
function render() {
var game = svg.selectAll('g.game').data(
[
randomDataset(),
randomDataset(),
randomDataset(),
randomDataset()
]
);
game.enter().append('g').classed('game', 1);
game
.attr('transform', function(d, i) { return 'translate('+((cfg.w * 4) + 50 + (i * cfg.w))+','+ (cfg.h * 1.3) +')'; })
.call(chart);
setTimeout(render, 1000);
}
render();
</script>
<!--
<h2>Simple single chart drawing</h2>
<div class="chart-container"></div>
<script>
RadarChart.draw(".chart-container", data);
</script>
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment