miyu80/README.md

## README.md

      
    Raw
  

              README.md
            
          
    総務省国勢調査

  
## 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>北海道未婚率男女</title>

  </head>
  <body>
    <div class="container">
    </div>
    <script src="migraph.js" charset="utf-8"></script> <!--これからプログラミングするjsファイルパス-->
  </body>
</html>

## migraph.js
//var gDataset;
d3.csv("mikon.csv", function(error, dataset) {
	var w = 600;
	var w2 = w/2;
	var h = 400;
	var barPadding = 10;
	var barScale = 2;
	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(0, 81%,98%)');

		 	// 女
	svg.append('rect')
			.attr('class','bgtext')
			.attr('width','20')
			.attr('height','20')
			.attr('x','520')
			.attr('y','40')
			.attr('fill','hsl(300,90%,70%)')
svg.append('text')
		.attr('class','textf')
		.attr('x','550')
		.attr('y','55')
		.attr('font-size','15')
		.text('女')


		 	// 男
	svg.append('rect')
			.attr('class','bgtext')
			.attr('width','20')
			.attr('height','20')
			.attr('x','520')
			.attr('y','10')
			.attr('fill','hsl(240, 90%, 70%)')
svg.append('text')
		.attr('class','textm')
		.attr('x','550')
		.attr('y','25')
		.attr('font-size','15')
		.text('男')


	console.log(dataset);
	//gDataset = dataset;
		// set 年齢 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-8;})
		.attr('y', h - 5)
		.attr('text-anchor', 'middle')
		.attr('font-size',12)
		.text(function(d){return d.年齢+'歳'});

	var updateBar = function() {
		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, 100])
		    .range([0, chartHeight-30]);
//bar man
		var barm = svg.selectAll('rect.barm')
		    .data(dataset);

		// 作成
		barm.enter()
			.append('rect')
			.attr('class', 'barm')
		    .attr('fill', function(d) { return 'hsl(240,80%,80%)'; })
		    .attr('x', function(d, i) {
			    return i * w / dataset.length;
			})
		    .attr('width', w2/dataset.length-barPadding)
		    .attr('height', function(d){return scaleheight(d.未婚率男);})
			.attr('y', function(d){return chartHeight -  scaleheight (d.未婚率男);})
		    .on('mouseover', function(){
				d3.select(this)
					.attr('fill', "hsl(240, 95%, 87%)")
			})
			.on('mouseout', function(){
				d3.select(this)
					.transition()
					.duration(200)
				    .attr('fill', function(d) { return 'hsl(240,80%,70%)'; })
			})
		// 削除
		barm.exit().remove();

		//更新
	barm.transition()
			.delay(function(d,i){return i*50;})
			.duration(300)
		    .attr('fill', function(d) { return 'hsl(240,80%,70%)'; })
		    .attr('height', function(d){return scaleheight(d.未婚率男);})
		    .attr('y', function(d){return chartHeight -  scaleheight (d.未婚率男);})

			//bar female
			var barf = svg.selectAll('rect.barf')
				.data(dataset);
					// 作成
		barf.enter()
			.append('rect')
			.attr('class', 'barf')
		    .attr('fill', function(d) { return 'hsl(300,90%,70%)' })
		    .attr('x', function(d, i) {
			    return i * w / dataset.length +w2/dataset.length-barPadding+5;
			})
		    .attr('width', w2/dataset.length-barPadding)
		    .attr('height', function(d){return scaleheight(d.未婚率女);})
		    .attr('y', function(d){return chartHeight -  scaleheight (d.未婚率女);})
		    .on('mouseover', function(){
				d3.select(this)
					.attr('fill', "hsl(300, 95%, 87%)")
			})
			.on('mouseout', function(){
				d3.select(this)
					.transition()
					.duration(200)
				    .attr('fill', function(d) { return 'hsl(300,90%,70%)'; })
			})

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

		//更新
	barf.transition()
			.delay(function(d,i){return i*50;})
			.duration(300)
		    .attr('fill', function(d) { return 'hsl(300,90%,70%)'; })
		    .attr('height', function(d){return scaleheight(d.未婚率女);})
		    .attr('y', function(d){return chartHeight -  scaleheight (d.未婚率女);})

						//テキスト男作成
			svg.selectAll('text.percentm')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'percentm')
		.attr('x', function(d, i){return (i + 0.5) * w / dataset.length-18;})
		.attr('y', function(d){return chartHeight -  scaleheight (d.未婚率男)-5;})
		.attr('text-anchor', 'middle')
		.attr('font-size', 10)
		.attr('font-family', 'Helvetica')
		.attr('font-weight', 'bold')
		.style('cursor', 'pointer')
		.text(function(d){return d.未婚率男+ '%';})

									//テキスト女作成
			svg.selectAll('text.percentf')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'percentf')
		.attr('x', function(d, i){return (i + 0.5) * w / dataset.length+8;})
		.attr('y', function(d){return chartHeight -  scaleheight (d.未婚率女)-5;})
		.attr('text-anchor', 'middle')
		.attr('font-size', 10)
		.attr('font-family', 'Helvetica')
		.attr('font-weight', 'bold')
		.style('cursor', 'pointer')
		.text(function(d){return d.未婚率女+ '%';})

			}

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

## mikon.csv

          
            年齢
            未婚率男女
            未婚率男
            未婚率女

            
              15-19
              99
              99
              99

            
              20-24
              90
              92
              87

            
              25-29
              63
              68
              59

            
              30-34
              40
              46
              36

            
              35-39
              30
              35
              26

            
              40-44
              24
              28
              20

            
              45-49
              19
              22
              16

            
              50-54
              14
              17
              11

            
              55-59
              10
              13
              8
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <!--ライブラリd3.jsを読み込み-->
	<title>北海道未婚率男女</title>

	</head>
	<body>
	<div class="container">
	</div>
	<script src="migraph.js" charset="utf-8"></script> <!--これからプログラミングするjsファイルパス-->
	</body>
	</html>
	//var gDataset;
	d3.csv("mikon.csv", function(error, dataset) {
	var w = 600;
	var w2 = w/2;
	var h = 400;
	var barPadding = 10;
	var barScale = 2;
	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(0, 81%,98%)');

	// 女
	svg.append('rect')
	.attr('class','bgtext')
	.attr('width','20')
	.attr('height','20')
	.attr('x','520')
	.attr('y','40')
	.attr('fill','hsl(300,90%,70%)')
	svg.append('text')
	.attr('class','textf')
	.attr('x','550')
	.attr('y','55')
	.attr('font-size','15')
	.text('女')


	// 男
	svg.append('rect')
	.attr('class','bgtext')
	.attr('width','20')
	.attr('height','20')
	.attr('x','520')
	.attr('y','10')
	.attr('fill','hsl(240, 90%, 70%)')
	svg.append('text')
	.attr('class','textm')
	.attr('x','550')
	.attr('y','25')
	.attr('font-size','15')
	.text('男')


	console.log(dataset);
	//gDataset = dataset;
	// set 年齢 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-8;})
	.attr('y', h - 5)
	.attr('text-anchor', 'middle')
	.attr('font-size',12)
	.text(function(d){return d.年齢+'歳'});

	var updateBar = function() {
	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, 100])
	.range([0, chartHeight-30]);
	//bar man
	var barm = svg.selectAll('rect.barm')
	.data(dataset);

	// 作成
	barm.enter()
	.append('rect')
	.attr('class', 'barm')
	.attr('fill', function(d) { return 'hsl(240,80%,80%)'; })
	.attr('x', function(d, i) {
	return i * w / dataset.length;
	})
	.attr('width', w2/dataset.length-barPadding)
	.attr('height', function(d){return scaleheight(d.未婚率男);})
	.attr('y', function(d){return chartHeight - scaleheight (d.未婚率男);})
	.on('mouseover', function(){
	d3.select(this)
	.attr('fill', "hsl(240, 95%, 87%)")
	})
	.on('mouseout', function(){
	d3.select(this)
	.transition()
	.duration(200)
	.attr('fill', function(d) { return 'hsl(240,80%,70%)'; })
	})
	// 削除
	barm.exit().remove();

	//更新
	barm.transition()
	.delay(function(d,i){return i*50;})
	.duration(300)
	.attr('fill', function(d) { return 'hsl(240,80%,70%)'; })
	.attr('height', function(d){return scaleheight(d.未婚率男);})
	.attr('y', function(d){return chartHeight - scaleheight (d.未婚率男);})

	//bar female
	var barf = svg.selectAll('rect.barf')
	.data(dataset);
	// 作成
	barf.enter()
	.append('rect')
	.attr('class', 'barf')
	.attr('fill', function(d) { return 'hsl(300,90%,70%)' })
	.attr('x', function(d, i) {
	return i * w / dataset.length +w2/dataset.length-barPadding+5;
	})
	.attr('width', w2/dataset.length-barPadding)
	.attr('height', function(d){return scaleheight(d.未婚率女);})
	.attr('y', function(d){return chartHeight - scaleheight (d.未婚率女);})
	.on('mouseover', function(){
	d3.select(this)
	.attr('fill', "hsl(300, 95%, 87%)")
	})
	.on('mouseout', function(){
	d3.select(this)
	.transition()
	.duration(200)
	.attr('fill', function(d) { return 'hsl(300,90%,70%)'; })
	})

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

	//更新
	barf.transition()
	.delay(function(d,i){return i*50;})
	.duration(300)
	.attr('fill', function(d) { return 'hsl(300,90%,70%)'; })
	.attr('height', function(d){return scaleheight(d.未婚率女);})
	.attr('y', function(d){return chartHeight - scaleheight (d.未婚率女);})

	//テキスト男作成
	svg.selectAll('text.percentm')
	.data(dataset)
	.enter()
	.append('text')
	.attr('class', 'percentm')
	.attr('x', function(d, i){return (i + 0.5) * w / dataset.length-18;})
	.attr('y', function(d){return chartHeight - scaleheight (d.未婚率男)-5;})
	.attr('text-anchor', 'middle')
	.attr('font-size', 10)
	.attr('font-family', 'Helvetica')
	.attr('font-weight', 'bold')
	.style('cursor', 'pointer')
	.text(function(d){return d.未婚率男+ '%';})

	//テキスト女作成
	svg.selectAll('text.percentf')
	.data(dataset)
	.enter()
	.append('text')
	.attr('class', 'percentf')
	.attr('x', function(d, i){return (i + 0.5) * w / dataset.length+8;})
	.attr('y', function(d){return chartHeight - scaleheight (d.未婚率女)-5;})
	.attr('text-anchor', 'middle')
	.attr('font-size', 10)
	.attr('font-family', 'Helvetica')
	.attr('font-weight', 'bold')
	.style('cursor', 'pointer')
	.text(function(d){return d.未婚率女+ '%';})

	}

	updateBar();
	d3.select(self.frameElement).style("height",h + "px");
	});
年齢	未婚率男女	未婚率男	未婚率女
15-19	99	99	99
20-24	90	92	87
25-29	63	68	59
30-34	40	46	36
35-39	30	35	26
40-44	24	28	20
45-49	19	22	16
50-54	14	17	11
55-59	10	13	8