未来電子テクノロジーでインターンをしているりくです。
最近、D3.jsというデータを見やすく表示させるフレームワークを学ぶ機会があり、見ていて楽しかったので、1つグラフを作ってみました。
1日当たりのツイート回数をまとめた棒グラフ
「プログラミング情報局@未来電子テクノロジー」が1日当たりにどれだけTwitterでツイートしているかを調べるためにグラフを作りました。
下の画像が完成品です。
ちなみにこれでは分かりませんが、アニメーションも機能します。
こうやってデータで見ると、かなり分かりやすく差が分かりますね。
たしか、ツイートが増えたあたりから「積み上げ」を始めていたため、急激にツイート数が伸びているのだと思います。
以下、コードです。
個人的な問題により1つにまとめていますが、実際に使う際には分割した方が見やすいかと思いますので分けた方がいいです。
Graph.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.x_text {
writing-mode: tb-rl;
font-size: 10px;
}
</style>
<title>Twitterグラフ</title>
</head>
<body>
<script>
var dataset = [
["六月十一日", 8],
["六月十二日", 4],
["六月十三日", 5],
["六月十四日", 6],
["六月十五日", 7],
["六月十六日", 4],
["六月十七日", 16],
["六月十八日", 18],
["六月十九日", 22],
["六月二十日", 30],
["六月二十一日", 23],
["六月二十二日", 19],
["六月二十三日", 18],
["六月二十四日", 22],
["六月二十五日", 14],
["六月二十六日", 15],
["六月二十七日", 24],
["六月二十八日", 24],
["六月二十九日", 24],
["六月三十日", 13]
];
var width = 450;
var height = 500;
var BAR_width = 20;
var BAR_PADDING = 1;
var width_PADDING = 25;
var height_PADDING = 20;
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height + height_PADDING * 2 + 200);
var scale = d3.scale
.linear()
.domain([0, 30])
.range([0, height]);
svg
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (BAR_width + 1) + width_PADDING;
})
.attr("height", 0)
.attr("y", height + height_PADDING)
.transition()
.duration(500)
.delay(function(d, i) {
return i * 50;
})
.attr("y", function(d, i) {
return height - scale(d[1]) + height_PADDING;
})
.attr("width", BAR_width)
.attr("height", function(d) {
return scale(d[1]);
})
.attr("style", "fill:red");
svg
.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[1];
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (BAR_width + 1) + 10 + width_PADDING;
})
.attr("y", function(d) {
return height - scale(d[1]) + 15 + height_PADDING;
})
.attr("font-size", "10px")
.attr("fill", "white");
var yScale = d3.scale
.linear()
.domain([0, 30])
.range([height, 0]);
var axis = d3.svg
.axis()
.scale(yScale)
.orient("left")
.ticks(3);
svg
.append("g")
.attr(
"transform",
"translate(" + width_PADDING + "," + height_PADDING + ")"
)
.attr("class", "axis")
.call(axis);
svg
.append("rect")
.attr("width", width - width_PADDING)
.attr("height", 1)
.attr("x", width_PADDING)
.attr("y", height + height_PADDING);
svg
.selectAll(".x_text")
.data(dataset)
.enter()
.append("text")
.attr("class", "x_text")
.attr("x", function(d, i) {
return i * (BAR_width + BAR_PADDING) + 10 + width_PADDING;
})
.attr("y", height + height_PADDING + 3)
.text(function(d, i) {
return d[0];
});
</script>
</body>
</html>
ちなみに、下記のサイトから「プログラミング情報局@未来電子テクノロジー」が1日当たりでどれだけTwitterでツイートしているかを調べて、人力でツイート数を打ち込みました。
本当はスクレイピングとやらで収集した方が効率的で具体的に分かるのだと思いますが、いかんせんやり方が分からないので、機会があれば調べたいです…
まとめ
D3.jsの公式サイトとか見ると、データを可視化しているものだけでなく「完全にゲームやん…」とかいうのもあるので、可能性は無限寄りの有限だと感じます!
でもいろいろな可能性があるということは、その分扱いも難しいので要練習ですね…
追記
次もD3.jsをしました。
D3.jsで分割したCSVファイルを読み取る方法とアニメーションをgifで紹介!