JavaScriptで棒グラフを作成してみた。
d3.jsを使う。使い方は、主に、
http://ja.d3js.info/alignedleft/tutorials/d3/
を参考にした。
スペース区切りのデータである。1列目が項目名、2列目が棒グラフにする値である。
3列目は棒にマウスが移動すると表示される値とする。
Tokyo 300 0.1 Kyoto 100 0.5 Osaka 150 1.2 Nagoya 200 0.3 Yokohama 250 0.7このデータから横向きの棒グラフ
ファイル名は任意で、test.datと同じディレクトリに作成する。
このファイルをブラウザで表示すると、横向きの棒グラフが表示される。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.js"></script>
<style type="text/css">
.axis path, .axis line {
fill: none;
stroke: black;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 500; // Width of a SVG canvas
var h = 100; // Height of a SVG canvas
var axisHeight = 20; // Height of a horizontal axis
var barPadding = 3; // Padding between bars
var svg = d3.select("body")
.append("div")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.text("./test.dat", function(error, text) { // load a data file
// Parse space-separated values
var data = d3.dsv(" ", "text/plain").parseRows(text, function(d) {
return { name: d[0], value: d[1], ratio: d[2] }; // Parse one line
});
// Make a tooltip showing data.ratio as text when mouseover
var tip = svg.append("text")
.attr("font-size", "11px")
.attr("text-anchor", "start")
.attr("dominant-baseline", "middle")
.attr("visibility", "hidden");
// Draw region of y-label
var yLabelOffset = 5; // Padding between a label and a bar
var yLabelMaxWidth = 0;
var yLabel = svg.selectAll("text")
.data(data, function(d, i){
if(d === undefined){
return i;
}
return i+1;
})
.enter()
.append("text")
.text(function(d) {
return d["name"];
})
.attr("y", function(d, i){
return (i+0.5)*(h-axisHeight)/data.length;
})
.attr("font-size", "11px")
.attr("text-anchor", "end")
.attr("dominant-baseline", "middle")
.each(function(d){
yLabelMaxWidth = Math.max(this.getBBox().width, yLabelMaxWidth);
})
.attr("x", yLabelMaxWidth);
yLabelMaxWidth += yLabelOffset;
// Make a horizontal scale
// (last '-10' makes room for drawing axis labels)
var xScale = d3.scale.linear()
.domain([0, 500])
.range([0, w - yLabelMaxWidth - 10]);
// Make an axis with xScale
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// Make horizontal bars
svg.selectAll("rect")
.data(data) // Load data
.enter() // Make placeholders
.append("rect")
.attr("x", yLabelMaxWidth)
.attr("y", function(d, i) {
return i*(h - axisHeight)/data.length + barPadding/2;
})
.attr("width", function(d){return xScale(d["value"])})
.attr("height", (h - axisHeight)/data.length - barPadding)
.attr("stroke", function(d) {
return "rgb(0, 0, " + (d["value"]) + 50 + ")";
})
.attr("stroke-width", 1)
.attr("fill", function(d) {
return "rgb(0, 0, " + (d["value"]) + ")";
})
.on("mouseover", function(d, i){
return tip.attr("visibility", "visible")
.text(d["ratio"])
.attr("x", yLabelMaxWidth + xScale(d["value"]) + 3 + "px")
.attr("y", ((i + 0.5)*(h - axisHeight)/data.length) + "px");
})
.on("mouseout", function(d){
return tip.attr("visibility", "hidden");
});
svg.append("g")
.attr("class", "axis") // Define the class "axis"
.attr("transform", "translate(" + yLabelMaxWidth + ","
+ (h - axisHeight + barPadding/2) + ")")
.call(xAxis);
});
</script>
</body>
</html>
|
0 件のコメント :
コメントを投稿