shotahorii/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Original data: population, total

Source: The World Bank

References: Line Chart

  
## data.csv

          
            year
            pop

            
              1960
              92500572

            
              1961
              94943000

            
              1962
              95832000

            
              1963
              96812000

            
              1964
              97826000

            
              1965
              98883000

            
              1966
              99790000

            
              1967
              100725000

            
              1968
              101061000

            
              1969
              103172000

            
              1970
              104345000

            
              1971
              105697000

            
              1972
              107188000

            
              1973
              108079000

            
              1974
              110162000

            
              1975
              111940000

            
              1976
              112771000

            
              1977
              113863000

            
              1978
              114898000

            
              1979
              115870000

            
              1980
              116782000

            
              1981
              117648000

            
              1982
              118449000

            
              1983
              119259000

            
              1984
              120018000

            
              1985
              120754000

            
              1986
              121492000

            
              1987
              122091000

            
              1988
              122613000

            
              1989
              123116000

            
              1990
              123537000

            
              1991
              123921000

            
              1992
              124229000

            
              1993
              124536000

            
              1994
              124961000

            
              1995
              125439000

            
              1996
              125761000

            
              1997
              126091000

            
              1998
              126410000

            
              1999
              126650000

            
              2000
              126870000

            
              2001
              127149000

            
              2002
              127445000

            
              2003
              127718000

            
              2004
              127761000

            
              2005
              127773000

            
              2006
              127756000

            
              2007
              127770750

            
              2008
              127704040

            
              2009
              127557958

            
              2010
              127450459

            
              2011
              127817277

            
              2012
              127561489

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

.line {
	fill: none;
	stroke: darkcyan;
	stroke-width: 1.5px;
}


.grid line {
	stroke: lightgray;
}

.grid .minor line {
	stroke-opacity: .5;
}

.grid text {
	display: none;
}

.grid path {
	display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
//define parameters.
var margin =100;
var w = 1000-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.time.scale()
	.range([0, w]);

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

var parseYear = d3.time.format("%Y").parse;

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

var format = d3.format("s");

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

//create line
var line = d3.svg.line()
	.x(function(d){return xScale(d.year);})
	.y(function(d){return yScale(d.pop);});

//read data.
d3.csv("data.csv")
	.row(function(d){return {year: parseYear(d.year), pop: +d.pop};})
	.get(function(error, rows){

		//set domains of the scales.
		//d3.extent returns the min and max value in the given array.
		//it is equivalent to calling d3.min and d3.max at the same time.
		xScale.domain(d3.extent(rows, function(d){return d.year;}));
		yScale.domain(d3.extent(rows, function(d){return d.pop;}));

		//draw x axis
		svg.append("g")
			.attr({
				class: "x axis",
				transform: "translate(0,"+h+")"
			})
			.call(xAxis);

		//draw y axis
		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis)
			.append("text")
			.attr({
				y: 14,
				transform: "rotate(-90)",
			})
			.style("text-anchor", "end")
			.text("Population (M=millions)");

		//draw line
		svg.append("path")
			.datum(rows)
			.attr({
				class: "line",
				d: line
			});

		//----until here, normal line chart.
		//----from here, draw guide axis.
		svg.append("g")
			.attr({
				class: "grid",
				transform: "translate(0,"+ h + ")"
			})
			.call(d3.svg.axis()
				.scale(xScale)
				.ticks(rows.length)
				.tickSize(-h)
			) //from here, emphasise 10 lines.
			.selectAll(".tick")
			.data(xScale.ticks(10), function(d){return d;})
			.exit()
			.classed("minor", true);


		svg.append("g")
			.attr({
				class: "grid"
			})
			.call(d3.svg.axis()
				.scale(yScale)
				.orient("left")
				.ticks(7)
				.tickSize(-w)
			);

	});
</script>
	year	pop
	1960	92500572
	1961	94943000
	1962	95832000
	1963	96812000
	1964	97826000
	1965	98883000
	1966	99790000
	1967	100725000
	1968	101061000
	1969	103172000
	1970	104345000
	1971	105697000
	1972	107188000
	1973	108079000
	1974	110162000
	1975	111940000
	1976	112771000
	1977	113863000
	1978	114898000
	1979	115870000
	1980	116782000
	1981	117648000
	1982	118449000
	1983	119259000
	1984	120018000
	1985	120754000
	1986	121492000
	1987	122091000
	1988	122613000
	1989	123116000
	1990	123537000
	1991	123921000
	1992	124229000
	1993	124536000
	1994	124961000
	1995	125439000
	1996	125761000
	1997	126091000
	1998	126410000
	1999	126650000
	2000	126870000
	2001	127149000
	2002	127445000
	2003	127718000
	2004	127761000
	2005	127773000
	2006	127756000
	2007	127770750
	2008	127704040
	2009	127557958
	2010	127450459
	2011	127817277
	2012	127561489
	<!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;
	}

	.line {
	fill: none;
	stroke: darkcyan;
	stroke-width: 1.5px;
	}


	.grid line {
	stroke: lightgray;
	}

	.grid .minor line {
	stroke-opacity: .5;
	}

	.grid text {
	display: none;
	}

	.grid path {
	display: none;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	//define parameters.
	var margin =100;
	var w = 1000-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.time.scale()
	.range([0, w]);

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

	var parseYear = d3.time.format("%Y").parse;

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

	var format = d3.format("s");

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

	//create line
	var line = d3.svg.line()
	.x(function(d){return xScale(d.year);})
	.y(function(d){return yScale(d.pop);});

	//read data.
	d3.csv("data.csv")
	.row(function(d){return {year: parseYear(d.year), pop: +d.pop};})
	.get(function(error, rows){

	//set domains of the scales.
	//d3.extent returns the min and max value in the given array.
	//it is equivalent to calling d3.min and d3.max at the same time.
	xScale.domain(d3.extent(rows, function(d){return d.year;}));
	yScale.domain(d3.extent(rows, function(d){return d.pop;}));

	//draw x axis
	svg.append("g")
	.attr({
	class: "x axis",
	transform: "translate(0,"+h+")"
	})
	.call(xAxis);

	//draw y axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr({
	y: 14,
	transform: "rotate(-90)",
	})
	.style("text-anchor", "end")
	.text("Population (M=millions)");

	//draw line
	svg.append("path")
	.datum(rows)
	.attr({
	class: "line",
	d: line
	});

	//----until here, normal line chart.
	//----from here, draw guide axis.
	svg.append("g")
	.attr({
	class: "grid",
	transform: "translate(0,"+ h + ")"
	})
	.call(d3.svg.axis()
	.scale(xScale)
	.ticks(rows.length)
	.tickSize(-h)
	) //from here, emphasise 10 lines.
	.selectAll(".tick")
	.data(xScale.ticks(10), function(d){return d;})
	.exit()
	.classed("minor", true);


	svg.append("g")
	.attr({
	class: "grid"
	})
	.call(d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(7)
	.tickSize(-w)
	);

	});
	</script>