shotahorii/README.md

## README.md

      
    Raw
  

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

Source: e-Stat

References: Sortable Bar Chart

  
## data.csv

          
            id
            prefecture
            pop

            
              1
              Hokkaido
              5460

            
              2
              Aomori
              1350

            
              3
              Iwate
              1303

            
              4
              Miyagi
              2325

            
              5
              Akita
              1063

            
              6
              Yamagata
              1152

            
              7
              Fukushima
              1962

            
              8
              Ibaraki
              2943

            
              9
              Tochigi
              1992

            
              10
              Gunma
              1992

            
              11
              Saitama
              7212

            
              12
              Chiba
              6195

            
              13
              Tokyo
              13230

            
              14
              Kanagawa
              9067

            
              15
              Niigata
              2347

            
              16
              Toyama
              1082

            
              17
              Ishikawa
              1163

            
              18
              Fukui
              799

            
              19
              Yamanashi
              852

            
              20
              Nagano
              2132

            
              21
              Gifu
              2061

            
              22
              Shizuoka
              3735

            
              23
              Aichi
              7427

            
              24
              Mie
              1840

            
              25
              Shiga
              1415

            
              26
              Kyoto
              2625

            
              27
              Osaka
              8856

            
              28
              Hyogo
              5571

            
              29
              Nara
              1390

            
              30
              Wakayama 
              988

            
              31
              Tottori
              582

            
              32
              Shimane
              707

            
              33
              Okayama
              1936

            
              34
              Hiroshima
              2848

            
              35
              Yamaguchi
              1431

            
              36
              Tokushima
              776

            
              37
              Kagawa
              989

            
              38
              Ehime
              1415

            
              39
              Kochi
              752

            
              40
              Fukuoka
              5085

            
              41
              Saga
              843

            
              42
              Nagasaki
              1408

            
              43
              Kumamoto
              1807

            
              44
              Oita
              1185

            
              45
              Miyazaki
              1126

            
              46
              Kagoshima
              1690

            
              47
              Okinawa
              1409

## 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;
}

.bar {
	fill: darkcyan;
}
</style>
<body>
<label><input type="checkbox"> Sort by population</label>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
//define parameters.
var margin =70;
var w = 1200-2*margin;
var h = 500-2*margin;

//generate a svg with the given size, and store a reference to the svg.
var svg = d3.select("body")
	.append("svg")
	.attr({
		width:w+2*margin,
		height:h+2*margin
	})
	.append("g")
	.attr("transform", "translate("+margin+","+margin+")");

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

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

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

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

//read data.
//note that this method is 'asynchronised'. So it returns immediately.
//This means that the program goes on regardless of the loading.
//Therefore, all functions related to the data must be written in this method.
d3.csv("data.csv")
	.row(function(d){return {id: +d.id, pref: d.prefecture, pop: +d.pop};})
	.get(function(error, rows){

		//set domains of the scales.
		xScale.domain(rows.map(function(d){return d.pref;}));
		yScale.domain([0, d3.max(rows, function(d){return d.pop;})]);

		//draw x axis
		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)"
			});

		//draw y axis
		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis)
			.append("text")
			.attr({
				y: 10,
				transform: "rotate(-90)",
			})
			.style("text-anchor", "end")
			.text("population (thousands)");

		//draw bars.
		svg.selectAll(".bar")
			.data(rows)
			.enter()
			.append("rect")
			.attr({
				class: "bar",
				x: function(d){return xScale(d.pref);},
				width: xScale.rangeBand(),
				y: function(d){return yScale(d.pop);},
				height: function(d){return h-yScale(d.pop);}
			});

		//----until here, normal barchart----


		//----set tweens
		d3.select("input").on("change", change);

		var sortTimeout = setTimeout(function(){
			d3.select("input").property("checked", true).each(change);
		}, 2000);

		function change(){
			clearTimeout(sortTimeout);

			var x0 = xScale.domain(rows.sort(this.checked
				? function(a,b){return b.pop-a.pop;}
				: function(a,b){return d3.ascending(a.id,b.id);})
				.map(function(d){return d.pref;}))
				.copy();

			var transition = svg.transition()
				.duration(500),
				delay = function(d,i){return i*50;};

			transition.selectAll(".bar")
				.delay(delay)
				.attr("x", function(d){return x0(d.pref);});

			transition.select(".x.axis")
				.call(xAxis)
				.selectAll("g")
				.delay(delay)
				.selectAll("text")
				.style("text-anchor", "end");
		}

	});
</script>
id	prefecture	pop
1	Hokkaido	5460
2	Aomori	1350
3	Iwate	1303
4	Miyagi	2325
5	Akita	1063
6	Yamagata	1152
7	Fukushima	1962
8	Ibaraki	2943
9	Tochigi	1992
10	Gunma	1992
11	Saitama	7212
12	Chiba	6195
13	Tokyo	13230
14	Kanagawa	9067
15	Niigata	2347
16	Toyama	1082
17	Ishikawa	1163
18	Fukui	799
19	Yamanashi	852
20	Nagano	2132
21	Gifu	2061
22	Shizuoka	3735
23	Aichi	7427
24	Mie	1840
25	Shiga	1415
26	Kyoto	2625
27	Osaka	8856
28	Hyogo	5571
29	Nara	1390
30	Wakayama	988
31	Tottori	582
32	Shimane	707
33	Okayama	1936
34	Hiroshima	2848
35	Yamaguchi	1431
36	Tokushima	776
37	Kagawa	989
38	Ehime	1415
39	Kochi	752
40	Fukuoka	5085
41	Saga	843
42	Nagasaki	1408
43	Kumamoto	1807
44	Oita	1185
45	Miyazaki	1126
46	Kagoshima	1690
47	Okinawa	1409
	<!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;
	}

	.bar {
	fill: darkcyan;
	}
	</style>
	<body>
	<label><input type="checkbox"> Sort by population</label>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	//define parameters.
	var margin =70;
	var w = 1200-2*margin;
	var h = 500-2*margin;

	//generate a svg with the given size, and store a reference to the svg.
	var svg = d3.select("body")
	.append("svg")
	.attr({
	width:w+2*margin,
	height:h+2*margin
	})
	.append("g")
	.attr("transform", "translate("+margin+","+margin+")");

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

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

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

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

	//read data.
	//note that this method is 'asynchronised'. So it returns immediately.
	//This means that the program goes on regardless of the loading.
	//Therefore, all functions related to the data must be written in this method.
	d3.csv("data.csv")
	.row(function(d){return {id: +d.id, pref: d.prefecture, pop: +d.pop};})
	.get(function(error, rows){

	//set domains of the scales.
	xScale.domain(rows.map(function(d){return d.pref;}));
	yScale.domain([0, d3.max(rows, function(d){return d.pop;})]);

	//draw x axis
	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)"
	});

	//draw y axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr({
	y: 10,
	transform: "rotate(-90)",
	})
	.style("text-anchor", "end")
	.text("population (thousands)");

	//draw bars.
	svg.selectAll(".bar")
	.data(rows)
	.enter()
	.append("rect")
	.attr({
	class: "bar",
	x: function(d){return xScale(d.pref);},
	width: xScale.rangeBand(),
	y: function(d){return yScale(d.pop);},
	height: function(d){return h-yScale(d.pop);}
	});

	//----until here, normal barchart----


	//----set tweens
	d3.select("input").on("change", change);

	var sortTimeout = setTimeout(function(){
	d3.select("input").property("checked", true).each(change);
	}, 2000);

	function change(){
	clearTimeout(sortTimeout);

	var x0 = xScale.domain(rows.sort(this.checked
	? function(a,b){return b.pop-a.pop;}
	: function(a,b){return d3.ascending(a.id,b.id);})
	.map(function(d){return d.pref;}))
	.copy();

	var transition = svg.transition()
	.duration(500),
	delay = function(d,i){return i*50;};

	transition.selectAll(".bar")
	.delay(delay)
	.attr("x", function(d){return x0(d.pref);});

	transition.select(".x.axis")
	.call(xAxis)
	.selectAll("g")
	.delay(delay)
	.selectAll("text")
	.style("text-anchor", "end");
	}

	});
	</script>