Skip to content

Instantly share code, notes, and snippets.

@shotahorii

shotahorii/README.md

Created November 16, 2013 06:53
Show Gist options
  • Save shotahorii/7496823 to your computer and use it in GitHub Desktop.
Save shotahorii/7496823 to your computer and use it in GitHub Desktop.
Download ZIP
patternables.com
Raw
README.md
Raw
data.csv
year japan korea china
1960 92500572 25074152 667070000
1961 94943000 25725456 660330000
1962 95832000 26437008 665770000
1963 96812000 27140032 682335000
1964 97826000 27836904 698355000
1965 98883000 28530000 715185000
1966 99790000 29217736 735400000
1967 100725000 29898528 754550000
1968 101061000 30574752 774510000
1969 103172000 31248784 796025000
1970 104345000 31923000 818315000
1971 105697000 32595816 841105000
1972 107188000 33265648 862030000
1973 108079000 33934872 881940000
1974 110162000 34605864 900350000
1975 111940000 35281000 916395000
1976 112771000 35849000 930685000
1977 113863000 36412000 943455000
1978 114898000 36969000 956165000
1979 115870000 37534000 969005000
1980 116782000 38124000 981235000
1981 117648000 38723000 993885000
1982 118449000 39326000 1008630000
1983 119259000 39910000 1023310000
1984 120018000 40406000 1036825000
1985 120754000 40806000 1051040000
1986 121492000 41184000 1066790000
1987 122091000 41575000 1084035000
1988 122613000 41975000 1101630000
1989 123116000 42380000 1118650000
1990 123537000 42869000 1135185000
1991 123921000 43268000 1150780000
1992 124229000 43663000 1164970000
1993 124536000 44056000 1178440000
1994 124961000 44453000 1191835000
1995 125439000 45093000 1204855000
1996 125761000 45525000 1217550000
1997 126091000 45954000 1230075000
1998 126410000 46287000 1241935000
1999 126650000 46617000 1252735000
2000 126870000 47008000 1262645000
2001 127149000 47357000 1271850000
2002 127445000 47622000 1280400000
2003 127718000 47859000 1288400000
2004 127761000 48039000 1296075000
2005 127773000 48138000 1303720000
2006 127756000 48372000 1311020000
2007 127770750 48598000 1317885000
2008 127704040 48949000 1324655000
2009 127557958 49182000 1331260000
2010 127450459 49410000 1337705000
2011 127817277 49779000 1344130000
2012 127561489 50004000 1350695000
Raw
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-width: 1.5px;
}
.legend {
fill: black;
font-size: 12px;
}
.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;
var colour = d3.scale.category10();
//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", function(error, rows){
//d3.keys(array) : return keys of the associative array.
//so, d3.keys(rows[0]) returns all keys of the data. Note that rows[n] with any n is OK.
colour.domain(d3.keys(rows[0]).filter(function(key){return key !== "year";}));
rows.forEach(function(d){
d.year = parseYear(d.year);
});
//reshape the data.
var countries = colour.domain().map(function(country){
return {
country: country,
years: rows.map(function(d){
return {year: d.year, pop: +d[country]};
})
};
});
//d3.extent(data) returns max and min of the data.
xScale.domain(d3.extent(rows, function(d){return d.year;}));
yScale.domain([
d3.min(countries, function(country){return d3.min(country.years, function(year){return year.pop;});}),
d3.max(countries, function(country){return d3.max(country.years, function(year){return year.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, G=billions)");
//draw line
var country = svg.selectAll(".country")
.data(countries)
.enter()
.append("g")
.attr({
class: "country"
});
country.append("path")
.attr({
class: "line",
d: function(d){return line(d.years);}
})
.style("stroke", function(d){return colour(d.country)});
country.append("text")
.datum(function(d){return {country: d.country, last: d.years[d.years.length-1]};})
.attr({
class: "legend",
transform: function(d){return "translate("+xScale(d.last.year)+","+yScale(d.last.pop)+")"},
x: 10
})
.text(function(d){return d.country;});
//----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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment