月別菓子支出金額

README.md

平成25年度　　１世帯当たり月別の菓子支出金額（二人以上の世帯･全国）
総務省家計調査報告

graph.js

//var gDataset;
d3.csv("sweet.csv", function(error, dataset) {
	var w = 600;
	var h = 400;
	var barPadding = 5;
	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', 'hsl(306, 81%,98%)');
	
	svg.append('rect')
			.attr('class','bgtext')
			.attr('width','100%')
			.attr('height','8%')
			.attr('fill','hsl(306,81%,89%)')

	
	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'));
	});

	// set month text
	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 + '月';});

//３桁コンマ
			function addFigure(str) {
			var num = new String(str).replace(/,/g, "");
			while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
			return num;
			}

	//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, 2500])
		    .range([0, chartHeight - 40]);

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

		var bar = svg.selectAll('rect.bar')
		    .data(dataset);
			
//グラデーション設定
  gradient = svg.append("svg:defs")
    .append("svg:linearGradient")
      .attr("id", "grade")
      .attr("x1", "0%")
      .attr("y1", "0%")
      .attr("x2", "0%")
      .attr("y2", "100%")
  gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "hsl(306, 90%, 70%)")
    .attr("stop-opacity", 1)
  gradient.append("svg:stop")
    .attr("offset", "90%")
    .attr("stop-color", "hsl(306, 90%, 90%)")
    .attr("stop-opacity", 1)
  
  //つやつや
  lighting = svg.append("defs").append("filter")
            .attr("id", "lighting")
  
  lighting.append("feGaussianBlur")//ガウスぼかし
            .attr("stdDeviation", 4)//ぼかし演算による標準偏差
            .attr("in", "SourceAlpha")
            .attr("result", "blur")
  
  lighting.append("feSpecularLighting")
            .attr("in", "blur")
            .attr("surfaceScale", 20)
            .attr("specularConstant", 1)//鏡面反射係数
            .attr("specularExponent", 25)//鏡面指数
            .attr("lighting-color", "white")//色
            .attr("result", "d")
          .append("fePointLight")
		    .attr("x",-300)
            .attr("y", 50)
            .attr("z", 100)
            
  lighting.append("feComposite")
            .attr("operator", "arithmetic")
            .attr("in", "d")
            .attr("in2", "SourceGraphic")
            .attr("k1", 0)
            .attr("k2", 1)
            .attr("k3", 1)
            .attr("k4", 0)
            .attr("result" ,"r")

  lighting.append("feComposite")
            .attr("operator", "in")
            .attr("in", "r")
            .attr("in2", "SourceGraphic")

		// 作成
		bar.enter()
			.append('rect')
			.attr('class', 'bar')
		    .attr('fill', function(d) { return 'url(#grade)' })
		    .attr('x', function(d, i) {
			    return i * w / dataset.length;
			})
		    .attr('width', w/dataset.length-barPadding)
		    .attr('height', 0)
		    .attr('y', chartHeight)
		  	.attr("rx","10")
			.attr("ry","10")
			.style("filter", "url(#lighting)")
		    .on('mouseover', function(){
				d3.select(this)
					.attr('fill', "hsl(306, 95%, 87%)")
			})
			.on('mouseout', function(){
				d3.select(this)
					.transition()
					.duration(200)
				    .attr('fill', function(d) { return 'url(#grade)'; })
			})


		// 削除
		bar.exit().remove();
		
		//更新
	bar.transition()
			.delay(function(d,i){return i*50;})
			.duration(300)
		    .attr('fill', function(d) { return 'url(#grade)'; })
		    .attr('height', function(d){return scaleheight(d[category]);})
		    .attr('y', function(d){return chartHeight - scaleheight(d[category]);})
			.attr("rx","10")
			.attr("ry","10")
			
//テキスト作成
			svg.selectAll('text.atai')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'atai')
	    .attr('x', function(d, i) {
				return i * w / dataset.length+22;
			})
		.attr('y', h-40)
		.attr('text-anchor', 'middle')
		.attr('font-size', 10)
		.attr('font-family', 'Helvetica')
		.attr('font-weight', 'bold')
		.style('cursor', 'pointer')
		.text(function(d){return addFigure(d[category]) + '円';});
		//テキストの更新
			svg.selectAll('text.atai')
			.transition()
			.delay(function(d,i){return i*50;})
			.duration(300)
		    .attr('fill', function(d) { return 'black'; })
		    .attr('height', function(d){return scaleheight(d[category]);})
		    .attr('y', function(d){return chartHeight - scaleheight(d[category])-4;})
			.text(function(d){return addFigure(d[category]) + '円';});


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

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <!--ライブラリd3.jsを読み込み-->
    <title>sweets graph</title>
	
	<style type="text/css">
				.categoryLabel.on {
							font-weight: bold;
							}
							</style>
  </head>
  <body>
    <div class="container">
    </div>
    <script src="graph.js" charset="utf-8"></script> <!--これからプログラミングするjsファイルパス-->
  </body>
</html>

sweet.csv