ofutondaisuki/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #任天堂 連結販売実績数量推移表（ホームコンソールゲーム機・ハード）
出典:任天堂 連結販売実績数量推移表
任天堂のデータということで、スーパーマリオブラザーズ風カラーにしてみました。
Built with blockbuilder.org

  
## games.csv

          
            year
            ファミリーコンピュータ
            スーパーファミコン
            ニンテンドウ64
            ニンテンドーゲームキューブ
            Wii
            Wii U

            
              1998
              3
              204
              942
              0
              0
              0

            
              1999
              5
              143
              786
              0
              0
              0

            
              2000
              5
              28
              649
              0
              0
              0

            
              2001
              5
              9
              285
              0
              0
              0

            
              2002
              6
              1
              50
              380
              0
              0

            
              2003
              6
              1
              1
              576
              0
              0

            
              2004
              3
              1
              0
              502
              0
              0

            
              2005
              0
              0
              0
              392
              0
              0

            
              2006
              0
              0
              0
              235
              0
              0

            
              2007
              0
              0
              0
              73
              584
              0

            
              2008
              0
              0
              0
              16
              1861
              0

            
              2009
              0
              0
              0
              0
              2595
              0

            
              2010
              0
              0
              0
              0
              2053
              0

            
              2011
              0
              0
              0
              0
              1508
              0

            
              2012
              0
              0
              0
              0
              984
              0

            
              2013
              0
              0
              0
              0
              398
              345

            
              2014
              0
              0
              0
              0
              122
              272

            
              2015
              0
              0
              0
              0
              46
              338

            
              2016
              0
              0
              0
              0
              4
              47

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <title>nintendo</title>
  </head>
  <body>
    <div class="container"></div>
    <script src="nintendo.js" charset="utf-8"></script>
  </body>
</html>

## nintendo.js
//var gDataset;
d3.csv("games.csv", function(error, dataset) {
	var w = 900;
	var h = 600;
	var container = d3.select('.container');
	var svg = container.append('svg')
	    .attr('width', w)
	    .attr('height', h);

	// background fill
	svg.append('rect')
	    .attr('class', 'background')
	    .attr('width', '100%')
	    .attr('height', '100%')
	    .attr('fill', 'mediumblue');

	console.log(dataset);
	//gDataset = dataset;

	// set category label
	//var categoryLabels = ['biscuit', 'chocolate'];
	var categoryLabels = Object.keys(dataset[0]);
	categoryLabels.some(function(v, i){
		if (v === 'year') { categoryLabels.splice(i, 1);}
	});
	//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', 12)
		.attr('font-family', 'Helvetica')
		.attr('font-weight', 'bold')
		.attr('value', function(d){return d;})
		.attr('fill','white')
		.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'));
	});

	// set year text
	svg.selectAll('text.year')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'year')
		.attr('x', function(d, i){return (i + 0.5) * w / dataset.length;})
		.attr('y', h - 5)
		.attr('text-anchor', 'middle')
		.attr('font-size', 9)
		.text(function(d){return d.year + '年';});

	//updateBar('chocolate');

	var updateBar = function(category) {
		var svg = d3.select('svg');
		//var dataset = gDataset; //svg.selectAll('rect.bar').data;
		var chartHeight = h - 20;
		var maxvalue = d3.max(dataset, function(d){return +d[category];});
		console.log(maxvalue);

		var scaleheight = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2700])
		    .range([0, chartHeight - 20]);

		var scaleSaturation = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2700])
		    .range([20, 80]);

		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)
		    .on('mouseover', function(){
				d3.select(this)
					.attr('fill', 'green');
			})
			.on('mouseout', function(){
				d3.select(this)
					.transition()
					.duration(200)
				    .attr('fill', function(d) { return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; })
			})


		// 削除
		bar.exit().remove();

		// 更新
		bar.transition()
			.delay(function(d,i){return i*50;})
			.duration(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]);})
	};

	d3.select(self.frameElement).style("height", h + "px");

});
year	ファミリーコンピュータ	スーパーファミコン	ニンテンドウ64	ニンテンドーゲームキューブ	Wii	Wii U
1998	3	204	942	0	0	0
1999	5	143	786	0	0	0
2000	5	28	649	0	0	0
2001	5	9	285	0	0	0
2002	6	1	50	380	0	0
2003	6	1	1	576	0	0
2004	3	1	0	502	0	0
2005	0	0	0	392	0	0
2006	0	0	0	235	0	0
2007	0	0	0	73	584	0
2008	0	0	0	16	1861	0
2009	0	0	0	0	2595	0
2010	0	0	0	0	2053	0
2011	0	0	0	0	1508	0
2012	0	0	0	0	984	0
2013	0	0	0	0	398	345
2014	0	0	0	0	122	272
2015	0	0	0	0	46	338
2016	0	0	0	0	4	47
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<title>nintendo</title>
	</head>
	<body>
	<div class="container"></div>
	<script src="nintendo.js" charset="utf-8"></script>
	</body>
	</html>
	//var gDataset;
	d3.csv("games.csv", function(error, dataset) {
	var w = 900;
	var h = 600;
	var container = d3.select('.container');
	var svg = container.append('svg')
	.attr('width', w)
	.attr('height', h);

	// background fill
	svg.append('rect')
	.attr('class', 'background')
	.attr('width', '100%')
	.attr('height', '100%')
	.attr('fill', 'mediumblue');

	console.log(dataset);
	//gDataset = dataset;

	// set category label
	//var categoryLabels = ['biscuit', 'chocolate'];
	var categoryLabels = Object.keys(dataset[0]);
	categoryLabels.some(function(v, i){
	if (v === 'year') { categoryLabels.splice(i, 1);}
	});
	//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', 12)
	.attr('font-family', 'Helvetica')
	.attr('font-weight', 'bold')
	.attr('value', function(d){return d;})
	.attr('fill','white')
	.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'));
	});

	// set year text
	svg.selectAll('text.year')
	.data(dataset)
	.enter()
	.append('text')
	.attr('class', 'year')
	.attr('x', function(d, i){return (i + 0.5) * w / dataset.length;})
	.attr('y', h - 5)
	.attr('text-anchor', 'middle')
	.attr('font-size', 9)
	.text(function(d){return d.year + '年';});

	//updateBar('chocolate');

	var updateBar = function(category) {
	var svg = d3.select('svg');
	//var dataset = gDataset; //svg.selectAll('rect.bar').data;
	var chartHeight = h - 20;
	var maxvalue = d3.max(dataset, function(d){return +d[category];});
	console.log(maxvalue);

	var scaleheight = d3.scale.linear()
	//.domain([0, maxvalue])
	.domain([0, 2700])
	.range([0, chartHeight - 20]);

	var scaleSaturation = d3.scale.linear()
	//.domain([0, maxvalue])
	.domain([0, 2700])
	.range([20, 80]);

	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)
	.on('mouseover', function(){
	d3.select(this)
	.attr('fill', 'green');
	})
	.on('mouseout', function(){
	d3.select(this)
	.transition()
	.duration(200)
	.attr('fill', function(d) { return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; })
	})


	// 削除
	bar.exit().remove();

	// 更新
	bar.transition()
	.delay(function(d,i){return i*50;})
	.duration(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]);})
	};

	d3.select(self.frameElement).style("height", h + "px");

	});