sugi2000/README.md

## README.md

      
    Raw
  

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

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <title>Sweets</title>

    <style type="text/css">
	    .categoryLabel.on {
		    font-weight: bold;
	    }
	</style>

  </head>
  <body>
    <div class="container">
    </div>
    <script src="sweets2.js" charset="utf-8"></script>
  </body>
</html>

## sweets.csv

          
            month
            biscuit
            candy
            sembei
            snack
            chocolate
            wa-nama
            yo-nama
            ice
            other
            total

            
              1
              227
              169
              438
              331
              600
              826
              1397
              363
              1728
              6079

            
              2
              279
              184
              396
              333
              1366
              739
              1302
              322
              1539
              6460

            
              3
              391
              202
              501
              366
              567
              1180
              1674
              438
              1868
              7187

            
              4
              302
              181
              442
              376
              426
              964
              1412
              525
              1662
              6290

            
              5
              273
              185
              437
              365
              374
              1031
              1540
              761
              1638
              6604

            
              6
              241
              167
              402
              325
              300
              804
              1433
              878
              1449
              5999

            
              7
              266
              169
              390
              321
              248
              847
              1501
              1234
              1535
              6511

            
              8
              322
              156
              498
              341
              245
              1085
              1632
              1437
              2071
              7787

            
              9
              256
              150
              389
              331
              327
              919
              1331
              794
              1466
              5963

            
              10
              243
              183
              419
              333
              446
              816
              1283
              549
              1471
              5743

            
              11
              286
              198
              422
              342
              510
              875
              1400
              370
              1631
              6034

            
              12
              335
              196
              587
              386
              715
              1087
              2405
              445
              2236
              8392

## sweets2.js
//var gDataset;
d3.csv("sweets.csv", function(error, dataset) {
	var w = 800;
	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', '#fee');

	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 === 'month') { 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', 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(){
		d3.selectAll('text.categoryLabel.on')
			.attr('class', 'categoryLabel');
		d3.select(this)
			.attr('class', 'categoryLabel on');
		updateBar(this.getAttribute('value'));
	});

	var maxTotal = d3.max(dataset, function(d){return +d.total;});
	var scaleTotal = d3.scale.linear()
		.domain([0, maxTotal])
		.range([0, w / 8]);

	svg.selectAll('circle')
		.data(dataset)
		.enter()
		.append('circle')
		.attr('cx', function(d, i) {return ((i % 4) + 0.5) * (w / 4);})
		.attr('cy', function(d, i) {return (Math.floor(i / 4) + 0.5) * (h / 3);})
		.attr('r', function(d){return scaleTotal(d.total);})
		.attr('fill', 'hsla(0, 0%, 100%, 1.0)')

	// set month text
	svg.selectAll('text.month')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'month')
		.attr('x', function(d, i) {return ((i % 4) + 0.5) * (w / 4);})
		.attr('y', function(d, i) {return (Math.floor(i / 4) + 0.5) * (h / 3);})
		.attr('text-anchor', 'middle')
		.text(function(d){return d.month + '月';});

	/*
		var data = [];
	Object.keys(dataset).forEach(function(key){
		data.push({
			kind: key,
			amount: dataset.chocolate
		});
	});
	console.log(data);
	*/

	//console.log(d3.selectAll('circle')[0][0].getAttribute('r'));

	//console.log(dataset[0]);
	for (var i = 0; i < 12; i++) {
		var jan = d3.entries(dataset[i]);
		jan.shift(); // remove first (month)
		jan.pop(); // remove last (total)
		console.log(jan);

		var color = d3.scale.ordinal()
	    	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
		//var radius = w / 8;
		var radius = Math.ceil(d3.selectAll('circle')[0][i].getAttribute('r'));
		var arc = d3.svg.arc()
	    	.outerRadius(radius)
			.innerRadius(radius / 2);
	    var pie = d3.layout.pie()
			.sort(null)
			.value(function(d){return +d.value;});

		var g = svg.selectAll('g.arc-' + i)
	      //.data(pie(dataset))
	      .data(pie(jan))
		  .enter()
		  .append('g')
	      .attr("class", function(d) { return "arc arc-" + i + " " + d.data.key; })
	      .attr("transform", "translate(" + ((i % 4) + 0.5) * (w / 4) + "," + (Math.floor(i / 4) + 0.5) * (h / 3) + ")");

	     g.append('path')
	     	.attr('d', arc)
	     	.style('fill', function(d){ return color(d.data.key); });
		 /*
		 g.append("text")
	      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
	      .attr("dy", ".35em")
	      .style("text-anchor", "middle")
	      .text(function(d) { return d.data.key; });
	     */
	}

	//updateBar('chocolate');

	var updateBar = function(category) {
		//d3.selectAll('.arc ' + category)
	};

	var updateBar2 = 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, 2500])
		    .range([0, chartHeight - 20]);

		var scaleSaturation = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2500])
		    .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', 'red');
			})
			.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");

});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<title>Sweets</title>

	<style type="text/css">
	.categoryLabel.on {
	font-weight: bold;
	}
	</style>

	</head>
	<body>
	<div class="container">
	</div>
	<script src="sweets2.js" charset="utf-8"></script>
	</body>
	</html>
month	biscuit	candy	sembei	snack	chocolate	wa-nama	yo-nama	ice	other	total
1	227	169	438	331	600	826	1397	363	1728	6079
2	279	184	396	333	1366	739	1302	322	1539	6460
3	391	202	501	366	567	1180	1674	438	1868	7187
4	302	181	442	376	426	964	1412	525	1662	6290
5	273	185	437	365	374	1031	1540	761	1638	6604
6	241	167	402	325	300	804	1433	878	1449	5999
7	266	169	390	321	248	847	1501	1234	1535	6511
8	322	156	498	341	245	1085	1632	1437	2071	7787
9	256	150	389	331	327	919	1331	794	1466	5963
10	243	183	419	333	446	816	1283	549	1471	5743
11	286	198	422	342	510	875	1400	370	1631	6034
12	335	196	587	386	715	1087	2405	445	2236	8392
	//var gDataset;
	d3.csv("sweets.csv", function(error, dataset) {
	var w = 800;
	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', '#fee');

	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 === 'month') { 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', 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(){
	d3.selectAll('text.categoryLabel.on')
	.attr('class', 'categoryLabel');
	d3.select(this)
	.attr('class', 'categoryLabel on');
	updateBar(this.getAttribute('value'));
	});

	var maxTotal = d3.max(dataset, function(d){return +d.total;});
	var scaleTotal = d3.scale.linear()
	.domain([0, maxTotal])
	.range([0, w / 8]);

	svg.selectAll('circle')
	.data(dataset)
	.enter()
	.append('circle')
	.attr('cx', function(d, i) {return ((i % 4) + 0.5) * (w / 4);})
	.attr('cy', function(d, i) {return (Math.floor(i / 4) + 0.5) * (h / 3);})
	.attr('r', function(d){return scaleTotal(d.total);})
	.attr('fill', 'hsla(0, 0%, 100%, 1.0)')

	// set month text
	svg.selectAll('text.month')
	.data(dataset)
	.enter()
	.append('text')
	.attr('class', 'month')
	.attr('x', function(d, i) {return ((i % 4) + 0.5) * (w / 4);})
	.attr('y', function(d, i) {return (Math.floor(i / 4) + 0.5) * (h / 3);})
	.attr('text-anchor', 'middle')
	.text(function(d){return d.month + '月';});

	/*
	var data = [];
	Object.keys(dataset).forEach(function(key){
	data.push({
	kind: key,
	amount: dataset.chocolate
	});
	});
	console.log(data);
	*/

	//console.log(d3.selectAll('circle')[0][0].getAttribute('r'));

	//console.log(dataset[0]);
	for (var i = 0; i < 12; i++) {
	var jan = d3.entries(dataset[i]);
	jan.shift(); // remove first (month)
	jan.pop(); // remove last (total)
	console.log(jan);

	var color = d3.scale.ordinal()
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
	//var radius = w / 8;
	var radius = Math.ceil(d3.selectAll('circle')[0][i].getAttribute('r'));
	var arc = d3.svg.arc()
	.outerRadius(radius)
	.innerRadius(radius / 2);
	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d){return +d.value;});

	var g = svg.selectAll('g.arc-' + i)
	//.data(pie(dataset))
	.data(pie(jan))
	.enter()
	.append('g')
	.attr("class", function(d) { return "arc arc-" + i + " " + d.data.key; })
	.attr("transform", "translate(" + ((i % 4) + 0.5) * (w / 4) + "," + (Math.floor(i / 4) + 0.5) * (h / 3) + ")");

	g.append('path')
	.attr('d', arc)
	.style('fill', function(d){ return color(d.data.key); });
	/*
	g.append("text")
	.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.data.key; });
	*/
	}

	//updateBar('chocolate');

	var updateBar = function(category) {
	//d3.selectAll('.arc ' + category)
	};

	var updateBar2 = 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, 2500])
	.range([0, chartHeight - 20]);

	var scaleSaturation = d3.scale.linear()
	//.domain([0, maxvalue])
	.domain([0, 2500])
	.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', 'red');
	})
	.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");

	});