Instantly share code, notes, and snippets.

Embed
What would you like to do?
D3.jsでレーダーチャート
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var radarChart = function(){
var w = 200,
h = 200,
padding = 20,
svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h),
dataset = [
[5, 5, 2, 5, 8, 2, 3],
[2, 1, 5, 2, 5, 6, 7]
],
paramCount = dataset[0].length,
max = d3.max(d3.merge(dataset)),
rScale = d3.scale.linear()
.domain([0, max])
.range([0, w/2 - padding]),
grid = (function(){
var result = [];
for(var i=1; i<=max; i++){
var arr = [];
for (var j=0; j<paramCount; j++){
arr.push(i);
}
result.push(arr);
}
return result;
})(),
label = (function(){
var result = [];
for(var i=0; i<paramCount; i++){
result.push(max + 1);
}
return result;
})(),
line = d3.svg.line()
.x(function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
.y(function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
.interpolate('linear');
svg.selectAll('path')
.data(dataset)
.enter()
.append('path')
.attr('d', function(d){
return line(d)+"z";
})
.attr("stroke", function(d, i){ return d3.scale.category10().range()[i]; })
.attr("stroke-width", 2)
.attr('fill', 'none');
svg.selectAll("path.grid")
.data(grid)
.enter()
.append("path")
.attr("d", function(d,i){
return line(d)+"z";
})
.attr("stroke", "black")
.attr("stroke-dasharray", "2")
.attr('fill', 'none');
svg.selectAll("text")
.data(label)
.enter()
.append('text')
.text(function(d, i){ return i+1; })
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr('x', function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
.attr('y', function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
.attr("font-size", "15px");
};
radarChart();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment