shotahorii/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Original data: 人口推計(2012年) 都道府県, 年齢(3区分), 男女別人口－総人口(平成24年10月1日現在)

Source: e-Stat

References: Pie Chart

  
## data.csv

          
            age
            male
            female

            
              0-14 Years
              8474
              8073

            
              15-64 Years
              40378
              39796

            
              65 Years and Over
              13177
              17616

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.legend {
	font-size: 12px;
}

.title {
	font-size: 18px;
}

.label {
	font-size: 14px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
//define parameters.
var margin =40;
var w = 800-2*margin;
var h = 800-2*margin;


var outerR = w/5; //the radius
var innerR = 0; //the hole
var arc = d3.svg.arc()
	.innerRadius(innerR)
	.outerRadius(outerR);

//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+")");

var pie_male = d3.layout.pie()
	.value(function(d){return d.male;});

var pie_female = d3.layout.pie()
	.value(function(d){return d.female;});

var pie_both = d3.layout.pie()
	.value(function(d){return d.male+d.female;});

var colour = d3.scale.category10();

//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 {age: d.age, male: +d.male, female: +d.female};})
	.get(function(error, rows){

		var total_male = d3.sum(rows, function(d){return d.male;});
		var total_female = d3.sum(rows, function(d){return d.female;});
		var total_both = d3.sum(rows, function(d){return d.male+d.female;});

		var formatPercent = d3.format(".0%");

		//pie chart of male pop
		var arcs_male = svg.selectAll("g.arc_male")
			.data(pie_male(rows))
			.enter()
			.append("g")
			.attr({
				class: "arc",
				transform: "translate(" + outerR + ", " + outerR + ")"
			});

		arcs_male.append("path")
			.attr({
				fill: function(d,i){return colour(i);},
				d: arc
			});

		//labels
		arcs_male.append("text")
			.attr({
			class: "label",
			transform: function(d){return "translate(" + arc.centroid(d) + ")";}
			})
			.style("text-anchor", "middle")
			.text(function(d){return formatPercent(d.data.male/total_male);});

		//title
		arcs_male.append("text")
			.attr({
				class: "title",
				transform: "translate(0, " + 1.2*outerR + ")"
			})
			.style("text-anchor", "middle")
			.text("Male");

		//pie chart of female pop
		var arcs_female = svg.selectAll("g.arc_female")
			.data(pie_female(rows))
			.enter()
			.append("g")
			.attr({
				class: "arc",
				transform: "translate(" + 4*outerR + ", " + outerR + ")"
			});

		arcs_female.append("path")
			.attr({
				fill: function(d,i){return colour(i);},
				d: arc
			});

		//labels
		arcs_female.append("text")
			.attr({
				class: "label",
				transform: function(d){return "translate(" + arc.centroid(d) + ")";}
			})
			.style("text-anchor", "middle")
			.text(function(d){return formatPercent(d.data.female/total_female);});

		//title
		arcs_female.append("text")
			.attr({
				class: "title",
				transform: "translate(0, " + 1.2*outerR + ")"
			})
			.style("text-anchor", "middle")
			.text("Female");

		//pie chart of both pop
		var arcs_both = svg.selectAll("g.arc_both")
			.data(pie_both(rows))
			.enter()
			.append("g")
			.attr({
				class: "arc",
				transform: "translate(" + 2.5*outerR + ", " + 3.5*outerR + ")"
			});

		arcs_both.append("path")
			.attr({
				fill: function(d,i){return colour(i);},
				d: arc
			});

		//labels
		arcs_both.append("text")
			.attr({
				class: "label",
				transform: function(d){return "translate(" + arc.centroid(d) + ")";}
			})
			.style("text-anchor", "middle")
			.text(function(d){return formatPercent((d.data.male+d.data.female)/total_both);});

		//title
		arcs_both.append("text")
			.attr({
				class: "title",
				transform: "translate(0, " + 1.2*outerR + ")"
			})
			.style("text-anchor", "middle")
			.text("Total");

		var legend = svg.selectAll(".legend")
			.data(rows)
			.enter()
			.append("g")
			.attr({
				class: "legend",
				transform: function(d,i){return "translate(0, " + i*20 + ")";}
			});

		legend.append("rect")
			.attr({
				x: 0,
				y: h-60,
				width: 15,
				height: 15
			})
			.style("fill", function(d, i){return colour(i);});

		legend.append("text")
			.attr({
				x: 20,
				y: h-47,
			})
			.text(function(d){return d.age;});

	});
</script>
age	male	female
0-14 Years	8474	8073
15-64 Years	40378	39796
65 Years and Over	13177	17616
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.legend {
	font-size: 12px;
	}

	.title {
	font-size: 18px;
	}

	.label {
	font-size: 14px;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	//define parameters.
	var margin =40;
	var w = 800-2*margin;
	var h = 800-2*margin;


	var outerR = w/5; //the radius
	var innerR = 0; //the hole
	var arc = d3.svg.arc()
	.innerRadius(innerR)
	.outerRadius(outerR);

	//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+")");

	var pie_male = d3.layout.pie()
	.value(function(d){return d.male;});

	var pie_female = d3.layout.pie()
	.value(function(d){return d.female;});

	var pie_both = d3.layout.pie()
	.value(function(d){return d.male+d.female;});

	var colour = d3.scale.category10();

	//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 {age: d.age, male: +d.male, female: +d.female};})
	.get(function(error, rows){

	var total_male = d3.sum(rows, function(d){return d.male;});
	var total_female = d3.sum(rows, function(d){return d.female;});
	var total_both = d3.sum(rows, function(d){return d.male+d.female;});

	var formatPercent = d3.format(".0%");

	//pie chart of male pop
	var arcs_male = svg.selectAll("g.arc_male")
	.data(pie_male(rows))
	.enter()
	.append("g")
	.attr({
	class: "arc",
	transform: "translate(" + outerR + ", " + outerR + ")"
	});

	arcs_male.append("path")
	.attr({
	fill: function(d,i){return colour(i);},
	d: arc
	});

	//labels
	arcs_male.append("text")
	.attr({
	class: "label",
	transform: function(d){return "translate(" + arc.centroid(d) + ")";}
	})
	.style("text-anchor", "middle")
	.text(function(d){return formatPercent(d.data.male/total_male);});

	//title
	arcs_male.append("text")
	.attr({
	class: "title",
	transform: "translate(0, " + 1.2*outerR + ")"
	})
	.style("text-anchor", "middle")
	.text("Male");

	//pie chart of female pop
	var arcs_female = svg.selectAll("g.arc_female")
	.data(pie_female(rows))
	.enter()
	.append("g")
	.attr({
	class: "arc",
	transform: "translate(" + 4*outerR + ", " + outerR + ")"
	});

	arcs_female.append("path")
	.attr({
	fill: function(d,i){return colour(i);},
	d: arc
	});

	//labels
	arcs_female.append("text")
	.attr({
	class: "label",
	transform: function(d){return "translate(" + arc.centroid(d) + ")";}
	})
	.style("text-anchor", "middle")
	.text(function(d){return formatPercent(d.data.female/total_female);});

	//title
	arcs_female.append("text")
	.attr({
	class: "title",
	transform: "translate(0, " + 1.2*outerR + ")"
	})
	.style("text-anchor", "middle")
	.text("Female");

	//pie chart of both pop
	var arcs_both = svg.selectAll("g.arc_both")
	.data(pie_both(rows))
	.enter()
	.append("g")
	.attr({
	class: "arc",
	transform: "translate(" + 2.5outerR + ", " + 3.5outerR + ")"
	});

	arcs_both.append("path")
	.attr({
	fill: function(d,i){return colour(i);},
	d: arc
	});

	//labels
	arcs_both.append("text")
	.attr({
	class: "label",
	transform: function(d){return "translate(" + arc.centroid(d) + ")";}
	})
	.style("text-anchor", "middle")
	.text(function(d){return formatPercent((d.data.male+d.data.female)/total_both);});

	//title
	arcs_both.append("text")
	.attr({
	class: "title",
	transform: "translate(0, " + 1.2*outerR + ")"
	})
	.style("text-anchor", "middle")
	.text("Total");

	var legend = svg.selectAll(".legend")
	.data(rows)
	.enter()
	.append("g")
	.attr({
	class: "legend",
	transform: function(d,i){return "translate(0, " + i*20 + ")";}
	});

	legend.append("rect")
	.attr({
	x: 0,
	y: h-60,
	width: 15,
	height: 15
	})
	.style("fill", function(d, i){return colour(i);});

	legend.append("text")
	.attr({
	x: 20,
	y: h-47,
	})
	.text(function(d){return d.age;});

	});
	</script>