sugi2000/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #日本のお菓子消費量
data source: 総務省家計調査報告 via 菓子統計

  
## index.html
<!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>

## sweets.csv

          
            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

## sweets.js
//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公開時の高さを設定

});
	<!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>
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
	//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公開時の高さを設定

	});