shotahorii/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Original data: 人口推計(2012年) 都道府県, 男女別人口及び人口性比－総人口, 日本人人口(平成24年10月1日現在)

Source: e-Stat

References: Normalized Stacked Bar Chart

  
## data.csv

          
            prefecture
            0-14 Years
            15-64 Years
            65 Years and Over

            
              Hokkaido
              640
              3398
              1422

            
              Aomori
              164
              822
              364

            
              Iwate
              162
              777
              364

            
              Miyagi
              301
              1491
              534

            
              Akita
              118
              619
              326

            
              Yamagata
              145
              681
              326

            
              Fukushima
              252
              1198
              511

            
              Ibaraki
              388
              1855
              701

            
              Tochigi
              263
              1266
              463

            
              Gunma
              267
              1229
              496

            
              Saitama
              940
              4687
              1585

            
              Chiba
              791
              3966
              1437

            
              Tokyo
              1494
              8924
              2812

            
              Kanagawa
              1178
              5942
              1948

            
              Niigata
              292
              1415
              639

            
              Toyama
              138
              646
              299

            
              Ishikawa
              156
              716
              291

            
              Fukui
              109
              482
              208

            
              Yamanashi
              110
              524
              218

            
              Nagano
              288
              1260
              585

            
              Gifu
              283
              1258
              520

            
              Shizuoka
              501
              2302
              932

            
              Aichi
              1056
              4780
              1591

            
              Mie
              248
              1128
              465

            
              Shiga
              210
              899
              306

            
              Kyoto
              330
              1646
              649

            
              Osaka
              1152
              5605
              2099

            
              Hyogo
              750
              3466
              1355

            
              Nara
              179
              856
              355

            
              Wakayama 
              124
              583
              281

            
              Tottori
              77
              347
              158

            
              Shimane
              90
              405
              212

            
              Okayama
              261
              1167
              507

            
              Hiroshima
              383
              1746
              719

            
              Yamaguchi
              180
              833
              418

            
              Tokushima
              94
              464
              217

            
              Kagawa
              131
              591
              268

            
              Ehime
              181
              841
              393

            
              Kochi
              89
              436
              226

            
              Fukuoka
              687
              3212
              1186

            
              Saga
              121
              509
              214

            
              Nagasaki
              188
              839
              380

            
              Kumamoto
              247
              1081
              478

            
              Oita
              153
              705
              327

            
              Miyazaki
              156
              670
              301

            
              Kagoshima
              230
              1002
              457

            
              Okinawa
              248
              911
              250

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	fill: black;
	font-size: 12px;
}

.legend line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.legend text {
	font-size: 12px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 150, bottom: 100, left: 50},
	w = 1000 - margin.left - margin.right,
	h = 500 - margin.top - margin.bottom;

var xScale = d3.scale.ordinal()
	.rangeRoundBands([0, w], .2);

var yScale = d3.scale.linear()
	.rangeRound([h, 0]);

var colour = d3.scale.ordinal()
	.range(["skyblue","orange","limegreen"]);

var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(d3.format(".0%"));

var svg = d3.select("body")
	.append("svg")
	.attr({
		width: w + margin.left + margin.right,
		height: h + margin.top + margin.bottom
	})
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//read data.
d3.csv("data.csv", function(error, rows){

	colour.domain(d3.keys(rows[0]).filter(function(key){return key != "prefecture";}));
	//domain of colour: keys of the data except for 'prefecture'.
	//colour.domain() == ['0-14 Years', '15-64 Years', '65 Years and Over']

	rows.forEach(function(row){
		var current = 0; //for keeping track of the current y position.
		row.pref = row['prefecture'];
		row.ages = colour.domain().map(function(d){
			return {generation: d, bar_start: current, bar_end: current += +row[d]};
		});
		//convert into percentage.
		row.ages.forEach(function(d){
			d.bar_start /= current; //here, current==total.
			d.bar_end /= current;
		});
	});

	//----array.map example----
	//var numbers = [1,4,9];
	//var roots = numbers.map(Math.sqrt);
	//----result----
	//roots==[1,2,3], numbers==[1,4,9]
	xScale.domain(rows.map(function(d){return d.pref;}));


	svg.append("g")
		.attr({
			class: "x axis",
			transform: "translate(0,"+h+")"
		})
		.call(xAxis)
		.selectAll("text")
		.style("text-anchor", "end")
		.attr({
			transform: "rotate(-65, -3, 12)"
		});

	svg.append("g")
		.attr({
			class: "y axis"
		})
		.call(yAxis);

	var prefs = svg.selectAll(".pref")
		.data(rows)
		.enter()
		.append("g")
		.attr({
			class: "pref",
			transform: function(d){return "translate(" + xScale(d.pref) + ",0)";}
		});

	prefs.selectAll("rect")
		.data(function(d){return d.ages;})
		.enter()
		.append("rect")
		.attr({
			width: xScale.rangeBand(),
			y: function(d){return yScale(d.bar_end);},
			height: function(d){return yScale(d.bar_start)-yScale(d.bar_end);}
		})
		.style("fill", function(d){return colour(d.generation);});

	var legend = svg.select(".pref:last-child")
		.selectAll(".legend")
		.data(function(d){return d.ages;})
		.enter()
		.append("g")
		.attr({
			class: "legend",
			transform: function(d){return "translate(" + xScale.rangeBand()/2 + "," + yScale((d.bar_start+d.bar_end)/2) + ")";}
		});

	legend.append("line")
		.attr({
			y1: -4,
			y2: -4,
			x2: 20
		});

	legend.append("text")
		.attr({
			x: 25,
		})
		.text(function(d){return d.generation;});

});

</script>
prefecture	0-14 Years	15-64 Years	65 Years and Over
Hokkaido	640	3398	1422
Aomori	164	822	364
Iwate	162	777	364
Miyagi	301	1491	534
Akita	118	619	326
Yamagata	145	681	326
Fukushima	252	1198	511
Ibaraki	388	1855	701
Tochigi	263	1266	463
Gunma	267	1229	496
Saitama	940	4687	1585
Chiba	791	3966	1437
Tokyo	1494	8924	2812
Kanagawa	1178	5942	1948
Niigata	292	1415	639
Toyama	138	646	299
Ishikawa	156	716	291
Fukui	109	482	208
Yamanashi	110	524	218
Nagano	288	1260	585
Gifu	283	1258	520
Shizuoka	501	2302	932
Aichi	1056	4780	1591
Mie	248	1128	465
Shiga	210	899	306
Kyoto	330	1646	649
Osaka	1152	5605	2099
Hyogo	750	3466	1355
Nara	179	856	355
Wakayama	124	583	281
Tottori	77	347	158
Shimane	90	405	212
Okayama	261	1167	507
Hiroshima	383	1746	719
Yamaguchi	180	833	418
Tokushima	94	464	217
Kagawa	131	591	268
Ehime	181	841	393
Kochi	89	436	226
Fukuoka	687	3212	1186
Saga	121	509	214
Nagasaki	188	839	380
Kumamoto	247	1081	478
Oita	153	705	327
Miyazaki	156	670	301
Kagoshima	230	1002	457
Okinawa	248	911	250
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	fill: black;
	font-size: 12px;
	}

	.legend line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.legend text {
	font-size: 12px;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	var margin = {top: 20, right: 150, bottom: 100, left: 50},
	w = 1000 - margin.left - margin.right,
	h = 500 - margin.top - margin.bottom;

	var xScale = d3.scale.ordinal()
	.rangeRoundBands([0, w], .2);

	var yScale = d3.scale.linear()
	.rangeRound([h, 0]);

	var colour = d3.scale.ordinal()
	.range(["skyblue","orange","limegreen"]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(d3.format(".0%"));

	var svg = d3.select("body")
	.append("svg")
	.attr({
	width: w + margin.left + margin.right,
	height: h + margin.top + margin.bottom
	})
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	//read data.
	d3.csv("data.csv", function(error, rows){

	colour.domain(d3.keys(rows[0]).filter(function(key){return key != "prefecture";}));
	//domain of colour: keys of the data except for 'prefecture'.
	//colour.domain() == ['0-14 Years', '15-64 Years', '65 Years and Over']

	rows.forEach(function(row){
	var current = 0; //for keeping track of the current y position.
	row.pref = row['prefecture'];
	row.ages = colour.domain().map(function(d){
	return {generation: d, bar_start: current, bar_end: current += +row[d]};
	});
	//convert into percentage.
	row.ages.forEach(function(d){
	d.bar_start /= current; //here, current==total.
	d.bar_end /= current;
	});
	});

	//----array.map example----
	//var numbers = [1,4,9];
	//var roots = numbers.map(Math.sqrt);
	//----result----
	//roots==[1,2,3], numbers==[1,4,9]
	xScale.domain(rows.map(function(d){return d.pref;}));


	svg.append("g")
	.attr({
	class: "x axis",
	transform: "translate(0,"+h+")"
	})
	.call(xAxis)
	.selectAll("text")
	.style("text-anchor", "end")
	.attr({
	transform: "rotate(-65, -3, 12)"
	});

	svg.append("g")
	.attr({
	class: "y axis"
	})
	.call(yAxis);

	var prefs = svg.selectAll(".pref")
	.data(rows)
	.enter()
	.append("g")
	.attr({
	class: "pref",
	transform: function(d){return "translate(" + xScale(d.pref) + ",0)";}
	});

	prefs.selectAll("rect")
	.data(function(d){return d.ages;})
	.enter()
	.append("rect")
	.attr({
	width: xScale.rangeBand(),
	y: function(d){return yScale(d.bar_end);},
	height: function(d){return yScale(d.bar_start)-yScale(d.bar_end);}
	})
	.style("fill", function(d){return colour(d.generation);});

	var legend = svg.select(".pref:last-child")
	.selectAll(".legend")
	.data(function(d){return d.ages;})
	.enter()
	.append("g")
	.attr({
	class: "legend",
	transform: function(d){return "translate(" + xScale.rangeBand()/2 + "," + yScale((d.bar_start+d.bar_end)/2) + ")";}
	});

	legend.append("line")
	.attr({
	y1: -4,
	y2: -4,
	x2: 20
	});

	legend.append("text")
	.attr({
	x: 25,
	})
	.text(function(d){return d.generation;});

	});

	</script>