#日本のお菓子消費量
Last active
October 29, 2015 08:53
-
-
Save sugi2000/31a2957b6d9fcf3ab41e to your computer and use it in GitHub Desktop.
Sweets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<title>Sweets</title> | |
</head> | |
<body> | |
<div class="container"></div> | |
<script src="sweets.js" charset="utf-8"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
month | ビスケット | 飴菓子 | せんべい | スナック | チョコ | 和生菓子 | 洋生菓子 | アイス | その他 | |
---|---|---|---|---|---|---|---|---|---|---|
1 | 227 | 169 | 438 | 331 | 600 | 826 | 1397 | 363 | 1728 | |
2 | 279 | 184 | 396 | 333 | 1366 | 739 | 1302 | 322 | 1539 | |
3 | 391 | 202 | 501 | 366 | 567 | 1180 | 1674 | 438 | 1868 | |
4 | 302 | 181 | 442 | 376 | 426 | 964 | 1412 | 525 | 1662 | |
5 | 273 | 185 | 437 | 365 | 374 | 1031 | 1540 | 761 | 1638 | |
6 | 241 | 167 | 402 | 325 | 300 | 804 | 1433 | 878 | 1449 | |
7 | 266 | 169 | 390 | 321 | 248 | 847 | 1501 | 1234 | 1535 | |
8 | 322 | 156 | 498 | 341 | 245 | 1085 | 1632 | 1437 | 2071 | |
9 | 256 | 150 | 389 | 331 | 327 | 919 | 1331 | 794 | 1466 | |
10 | 243 | 183 | 419 | 333 | 446 | 816 | 1283 | 549 | 1471 | |
11 | 286 | 198 | 422 | 342 | 510 | 875 | 1400 | 370 | 1631 | |
12 | 335 | 196 | 587 | 386 | 715 | 1087 | 2405 | 445 | 2236 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//var gDataset; | |
d3.csv("sweets.csv", function(error, dataset) { | |
// svg のサイズ | |
var w = 500; | |
var h = 500; | |
// containerクラスの要素を選択 | |
var container = d3.select('.container'); | |
// containerの中にsvgを追加 | |
var svg = container.append('svg') | |
.attr('width', w) | |
.attr('height', h); | |
// 背景の色 | |
svg.append('rect') | |
.attr('class', 'background') | |
.attr('width', '100%') | |
.attr('height', '100%') | |
.attr('fill', '#fee'); | |
console.log(dataset); | |
//gDataset = dataset; | |
// カテゴリラベルのテキストをセット | |
var categoryLabels = Object.keys(dataset[0]); // データセット1行目のキー配列 | |
categoryLabels.some(function(v, i){ | |
if (v === 'month') { categoryLabels.splice(i, 1);} // monthは不要なので削除 | |
}); | |
//console.log(categoryLabels); | |
svg.selectAll('text.categoryLabel') | |
.data(categoryLabels) | |
.enter() | |
.append('text') | |
.attr('class', 'categoryLabel') | |
.attr('x', function(d, i){return (i + 0.5) * w / categoryLabels.length;}) | |
.attr('y', 20) | |
.attr('text-anchor', 'middle') | |
.attr('font-size', 9) | |
.attr('font-family', 'Helvetica') | |
.attr('font-weight', 'bold') | |
.attr('value', function(d){return d;}) | |
.style('cursor', 'pointer') | |
//.attr('onclick', function(d){return "updateBar('" + d + "')";}) | |
.text(function(d){return d;}); | |
// カテゴリラベルのテキストのクリックイベントを設定 | |
d3.selectAll('text.categoryLabel').on('click', function(){ | |
updateBar(this.getAttribute('value')); // updateBar()関数を呼びだし:引数はテキストのvalue属性の値 | |
}); | |
// 月のテキストをセット | |
svg.selectAll('text.month') | |
.data(dataset) | |
.enter() | |
.append('text') | |
.attr('class', 'month') | |
.attr('x', function(d, i){return (i + 0.5) * w / dataset.length;}) | |
.attr('y', h - 5) | |
.attr('text-anchor', 'middle') | |
.text(function(d){return d.month + '月';}); | |
//updateBar('chocolate'); | |
// updateBar()関数 | |
var updateBar = function(category) { | |
var svg = d3.select('svg'); // svg要素 | |
//var dataset = gDataset; //svg.selectAll('rect.bar').data; | |
var chartHeight = h - 20; // グラフの高さ:svgの高さマイナス20ピクセル | |
var maxvalue = d3.max(dataset, function(d){return +d[category];}); // カテゴリの値の最大値 | |
console.log(maxvalue); | |
// 高さをスケールする関数 (0~2500 を 0~chartHeight-20 に収める) | |
var scaleheight = d3.scale.linear() | |
//.domain([0, maxvalue]) | |
.domain([0, 2500]) | |
.range([0, chartHeight - 20]); | |
// 色の彩度をスケールする関数 (0~2500 を 20~80 に収める) | |
var scaleSaturation = d3.scale.linear() | |
//.domain([0, maxvalue]) | |
.domain([0, 2500]) | |
.range([20, 80]); | |
// barクラスのrectを全選択し、データをセットする | |
var bar = svg.selectAll('rect.bar') | |
.data(dataset); | |
// バーの作成、追加 | |
bar.enter() | |
.append('rect') | |
.attr('class', 'bar') | |
.attr('fill', function(d) { return 'hsla(0, 0%, 50%, 0)'; }) | |
.attr('x', function(d, i) { | |
return i * w / dataset.length; | |
}) | |
.attr('width', Math.floor(w / dataset.length)) | |
.attr('height', 0) | |
.attr('y', chartHeight) // y座標はchartHeight関数で計算 | |
.on('mouseover', function(){ // マウスオーバーイベント | |
d3.select(this) | |
.attr('fill', 'red'); // 色を赤色に | |
}) | |
.on('mouseout', function(){ // マウスアウトイベント | |
d3.select(this) | |
.transition() // アニメーション | |
.duration(200) // 200ミリセカンド | |
.attr('fill', function(d) { return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; }) // 色を設定色に | |
}) | |
// バーの削除 | |
bar.exit().remove(); | |
// バーの更新 | |
bar.transition() // アニメーション | |
.delay(function(d,i){return i*50;}) // 項目ごとに50ミリ秒遅延 | |
.duration(300) // 300ミリ秒 | |
.attr('fill', function(d) { return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; }) // 色を設定 | |
.attr('height', function(d){return scaleheight(d[category]);}) // 高さを設定 | |
.attr('y', function(d){return chartHeight - scaleheight(d[category]);}) // Y座標を設定 | |
}; | |
d3.select(self.frameElement).style("height", h + "px"); // blocks公開時の高さを設定 | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment