Skip to content

Instantly share code, notes, and snippets.

@mikelotis

mikelotis/.block

Last active August 10, 2018 03:05
Show Gist options
  • Save mikelotis/851036b44a2e7f38827990b0e67ecd4e to your computer and use it in GitHub Desktop.
Save mikelotis/851036b44a2e7f38827990b0e67ecd4e to your computer and use it in GitHub Desktop.
Download ZIP
Edmonton - Population History
Raw
.block
width: 980
height: 560
Raw
Edmonton_Population_History.json
[ {
"census_year" : true,
"year" : "2016-02-01T00:00:00",
"source" : "CoE",
"population" : "899447"
}
, {
"census_year" : true,
"year" : "2014-01-01T00:00:00",
"source" : "CoE",
"population" : "877926"
}
, {
"year" : "2013-02-01T00:00:00",
"source" : "CoE 6",
"population" : "847712"
}
, {
"census_year" : true,
"year" : "2012-01-01T00:00:00",
"source" : "CoE",
"population" : "817498"
}
, {
"year" : "2010-02-01T00:00:00",
"source" : "CoE 6",
"population" : "797320"
}
, {
"census_year" : true,
"year" : "2009-01-01T00:00:00",
"source" : "CoE",
"population" : "782439"
}
, {
"census_year" : true,
"year" : "2008-01-01T00:00:00",
"source" : "CoE",
"population" : "752412"
}
, {
"year" : "2007-02-01T00:00:00",
"source" : "CoE 6",
"population" : "741392"
}
, {
"census_year" : true,
"year" : "2005-01-01T00:00:00",
"source" : "CoE",
"population" : "712391"
}
, {
"year" : "2004-02-01T00:00:00",
"source" : "CoE 6",
"population" : "698631"
}
, {
"year" : "2003-02-01T00:00:00",
"source" : "CoE 6",
"population" : "684871"
}
, {
"year" : "2002-02-01T00:00:00",
"source" : "CoE 6",
"population" : "671110"
}
, {
"year" : "2000-02-01T00:00:00",
"source" : "CoE 6",
"population" : "652817"
}
, {
"census_year" : true,
"year" : "1999-01-01T00:00:00",
"source" : "CoE",
"population" : "648284"
}
, {
"year" : "1998-02-01T00:00:00",
"source" : "CoE 6",
"population" : "637625"
}
, {
"year" : "1997-02-01T00:00:00",
"source" : "CoE 6",
"population" : "626965"
}
, {
"year" : "1995-02-01T00:00:00",
"source" : "CoE 6",
"population" : "619870"
}
, {
"year" : "1994-02-01T00:00:00",
"source" : "CoE 6",
"population" : "623435"
}
, {
"census_year" : true,
"year" : "1993-01-01T00:00:00",
"source" : "CoE",
"population" : "626999"
}
, {
"census_year" : true,
"year" : "1992-01-01T00:00:00",
"source" : "CoE",
"population" : "618195"
}
, {
"census_year" : true,
"year" : "1990-01-01T00:00:00",
"source" : "CoE",
"population" : "605538"
}
, {
"census_year" : true,
"year" : "1989-01-01T00:00:00",
"source" : "CoE",
"population" : "583872"
}
, {
"year" : "1988-02-01T00:00:00",
"source" : "CoE",
"population" : "580061"
}
, {
"census_year" : true,
"year" : "1987-01-01T00:00:00",
"source" : "CoE",
"population" : "576249"
}
, {
"year" : "1985-02-01T00:00:00",
"source" : "CoE 6",
"population" : "567699"
}
, {
"year" : "1984-02-01T00:00:00",
"source" : "CoE 6",
"population" : "563892"
}
, {
"census_year" : true,
"year" : "1983-01-01T00:00:00",
"source" : "CoE",
"population" : "560085"
}
, {
"census_year" : true,
"year" : "1982-01-01T00:00:00",
"source" : "CoE 1",
"population" : "551314"
}
, {
"census_year" : true,
"year" : "1980-01-01T00:00:00",
"source" : "CoE",
"population" : "505773"
}
, {
"census_year" : true,
"year" : "1979-01-01T00:00:00",
"source" : "CoE",
"population" : "491359"
}
, {
"census_year" : true,
"year" : "1978-01-01T00:00:00",
"source" : "CoE",
"population" : "478066"
}
, {
"census_year" : true,
"year" : "1977-01-01T00:00:00",
"source" : "CoE",
"population" : "471474"
}
, {
"census_year" : true,
"year" : "1975-01-01T00:00:00",
"source" : "CoE",
"population" : "451635"
}
, {
"census_year" : true,
"year" : "1974-01-01T00:00:00",
"source" : "CoE",
"population" : "445691"
}
, {
"census_year" : true,
"year" : "1973-01-01T00:00:00",
"source" : "CoE",
"population" : "442365"
}
, {
"census_year" : true,
"year" : "1972-01-01T00:00:00",
"source" : "CoE",
"population" : "441530"
}
, {
"census_year" : true,
"year" : "1970-01-01T00:00:00",
"source" : "CoE",
"population" : "429750"
}
, {
"census_year" : true,
"year" : "1969-01-01T00:00:00",
"source" : "CoE",
"population" : "422418"
}
, {
"census_year" : true,
"year" : "1968-01-01T00:00:00",
"source" : "CoE",
"population" : "410105"
}
, {
"census_year" : true,
"year" : "1967-01-01T00:00:00",
"source" : "CoE",
"population" : "393593"
}
, {
"census_year" : true,
"year" : "1965-01-01T00:00:00",
"source" : "CoE",
"population" : "371265"
}
, {
"census_year" : true,
"year" : "1964-01-01T00:00:00",
"source" : "CoE 2",
"population" : "311804"
}
, {
"census_year" : true,
"year" : "1963-01-01T00:00:00",
"source" : "CoE",
"population" : "303756"
}
, {
"census_year" : true,
"year" : "1962-01-01T00:00:00",
"source" : "CoE",
"population" : "294967"
}
, {
"census_year" : true,
"year" : "1960-01-01T00:00:00",
"source" : "CoE",
"population" : "269314"
}
, {
"census_year" : true,
"year" : "1959-01-01T00:00:00",
"source" : "CoE",
"population" : "260733"
}
, {
"census_year" : true,
"year" : "1958-01-01T00:00:00",
"source" : "CoE",
"population" : "252131"
}
, {
"census_year" : true,
"year" : "1957-01-01T00:00:00",
"source" : "CoE",
"population" : "238353"
}
, {
"census_year" : true,
"year" : "1955-01-01T00:00:00",
"source" : "CoE",
"population" : "209353"
}
, {
"census_year" : true,
"year" : "1954-01-01T00:00:00",
"source" : "CoE",
"population" : "197836"
}
, {
"census_year" : true,
"year" : "1953-01-01T00:00:00",
"source" : "CoE",
"population" : "183411"
}
, {
"census_year" : true,
"year" : "1952-01-01T00:00:00",
"source" : "CoE",
"population" : "169196"
}
, {
"census_year" : true,
"year" : "1950-01-01T00:00:00",
"source" : "CoE",
"population" : "148861"
}
, {
"census_year" : true,
"year" : "1949-01-01T00:00:00",
"source" : "CoE",
"population" : "137469"
}
, {
"census_year" : true,
"year" : "1948-01-01T00:00:00",
"source" : "CoE",
"population" : "126609"
}
, {
"census_year" : true,
"year" : "1947-01-01T00:00:00",
"source" : "CoE",
"population" : "118541"
}
, {
"census_year" : true,
"year" : "1946-01-01T00:00:00",
"source" : "CoE",
"population" : "114976"
}
, {
"census_year" : true,
"year" : "1945-01-01T00:00:00",
"source" : "CoE",
"population" : "111745"
}
, {
"census_year" : true,
"year" : "1944-01-01T00:00:00",
"source" : "CoE",
"population" : "108416"
}
, {
"census_year" : true,
"year" : "1943-01-01T00:00:00",
"source" : "CoE",
"population" : "105536"
}
, {
"census_year" : true,
"year" : "1942-01-01T00:00:00",
"source" : "CoE",
"population" : "96725"
}
, {
"census_year" : true,
"year" : "1940-01-01T00:00:00",
"source" : "CoE",
"population" : "91723"
}
, {
"census_year" : true,
"year" : "1939-01-01T00:00:00",
"source" : "CoE",
"population" : "90419"
}
, {
"census_year" : true,
"year" : "1938-01-01T00:00:00",
"source" : "CoE",
"population" : "88887"
}
, {
"census_year" : true,
"year" : "1937-01-01T00:00:00",
"source" : "CoE",
"population" : "87034"
}
, {
"census_year" : true,
"year" : "1936-01-01T00:00:00",
"source" : "CoE",
"population" : "85470"
}
, {
"census_year" : true,
"year" : "1935-01-01T00:00:00",
"source" : "CoE",
"population" : "82634"
}
, {
"census_year" : true,
"year" : "1934-01-01T00:00:00",
"source" : "CoE",
"population" : "79773"
}
, {
"census_year" : true,
"year" : "1933-01-01T00:00:00",
"source" : "CoE",
"population" : "79231"
}
, {
"census_year" : true,
"year" : "1932-01-01T00:00:00",
"source" : "CoE",
"population" : "78387"
}
, {
"census_year" : true,
"year" : "1930-01-01T00:00:00",
"source" : "CoE",
"population" : "77557"
}
, {
"census_year" : true,
"year" : "1929-01-01T00:00:00",
"source" : "CoE",
"population" : "74298"
}
, {
"census_year" : true,
"year" : "1928-01-01T00:00:00",
"source" : "CoE",
"population" : "69744"
}
, {
"census_year" : true,
"year" : "1927-01-01T00:00:00",
"source" : "CoE",
"population" : "67083"
}
, {
"census_year" : true,
"year" : "1926-01-01T00:00:00",
"source" : "CoE",
"population" : "65163"
}
, {
"census_year" : true,
"year" : "1925-01-01T00:00:00",
"source" : "CoE",
"population" : "65378"
}
, {
"census_year" : true,
"year" : "1924-01-01T00:00:00",
"source" : "CoE",
"population" : "63160"
}
, {
"census_year" : true,
"year" : "1923-01-01T00:00:00",
"source" : "CoE*",
"population" : "60000"
}
, {
"census_year" : true,
"year" : "1922-01-01T00:00:00",
"source" : "CoE*",
"population" : "60000"
}
, {
"census_year" : true,
"year" : "1920-01-01T00:00:00",
"source" : "CoE",
"population" : "61045"
}
, {
"census_year" : true,
"year" : "1919-01-01T00:00:00",
"source" : "CoE*",
"population" : "60000"
}
, {
"census_year" : true,
"year" : "1918-01-01T00:00:00",
"source" : "CoE*",
"population" : "53000"
}
, {
"census_year" : true,
"year" : "1917-01-01T00:00:00",
"source" : "CoE* 4",
"population" : "51000"
}
, {
"census_year" : true,
"year" : "1916-01-01T00:00:00",
"source" : "CoE",
"population" : "53846"
}
, {
"census_year" : true,
"year" : "1915-01-01T00:00:00",
"source" : "CoE",
"population" : "59339"
}
, {
"census_year" : true,
"year" : "1914-01-01T00:00:00",
"source" : "CoE",
"population" : "72516"
}
, {
"census_year" : true,
"year" : "1913-01-01T00:00:00",
"source" : "CoE",
"population" : "67243"
}
, {
"census_year" : true,
"year" : "1912-01-01T00:00:00",
"source" : "CoE 5",
"population" : "53611"
}
, {
"year" : "1910-02-01T00:00:00",
"source" : "CoE 6",
"population" : "23950"
}
, {
"census_year" : true,
"year" : "1909-01-01T00:00:00",
"source" : "CoE*",
"population" : "23000"
}
, {
"census_year" : true,
"year" : "1908-01-01T00:00:00",
"source" : "CoE",
"population" : "18500"
}
, {
"year" : "1907-02-01T00:00:00",
"source" : "CoE 6",
"population" : "16294"
}
, {
"census_year" : true,
"year" : "1906-01-01T00:00:00",
"source" : "CoE",
"population" : "14088"
}
, {
"year" : "1905-02-01T00:00:00",
"source" : "CoE 6",
"population" : "11219"
}
, {
"census_year" : true,
"year" : "1904-01-01T00:00:00",
"source" : "CoE",
"population" : "8350"
}
, {
"census_year" : true,
"year" : "1903-01-01T00:00:00",
"source" : "CoE",
"population" : "6995"
}
, {
"year" : "1902-02-01T00:00:00",
"source" : "CoE 6",
"population" : "4811"
}
, {
"year" : "1900-02-01T00:00:00",
"source" : "CoE 6",
"population" : "2419"
}
, {
"census_year" : true,
"year" : "1899-01-01T00:00:00",
"source" : "CoE",
"population" : "2212"
}
, {
"year" : "1898-02-01T00:00:00",
"source" : "CoE 6",
"population" : "2212"
}
, {
"census_year" : true,
"year" : "1897-01-01T00:00:00",
"source" : "CoE",
"population" : "2212"
}
, {
"year" : "1896-02-01T00:00:00",
"source" : "CoE 6",
"population" : "1689"
}
, {
"census_year" : true,
"year" : "1895-01-01T00:00:00",
"source" : "CoE",
"population" : "1165"
}
, {
"year" : "1894-02-01T00:00:00",
"source" : "CoE 6",
"population" : "1010"
}
, {
"year" : "1893-02-01T00:00:00",
"source" : "CoE 6",
"population" : "855"
}
, {
"census_year" : true,
"year" : "1892-01-01T00:00:00",
"source" : "CoE",
"population" : "700"
}
, {
"year" : "1891-02-01T00:00:00",
"source" : "CoE 6",
"population" : "630"
}
, {
"year" : "1890-02-01T00:00:00",
"source" : "CoE 6",
"population" : "560"
}
, {
"year" : "1889-02-01T00:00:00",
"source" : "CoE 6",
"population" : "490"
}
, {
"year" : "1888-02-01T00:00:00",
"source" : "CoE 6",
"population" : "420"
}
, {
"census_year" : true,
"year" : "1887-01-01T00:00:00",
"source" : "CoE*",
"population" : "350"
}
, {
"year" : "1886-02-01T00:00:00",
"source" : "CoE",
"population" : "307"
}
, {
"census_year" : true,
"year" : "1885-01-01T00:00:00",
"source" : "CoE",
"population" : "263"
}
, {
"year" : "1884-02-01T00:00:00",
"source" : "CoE 6",
"population" : "247"
}
, {
"year" : "1883-02-01T00:00:00",
"source" : "CoE 6",
"population" : "230"
}
, {
"year" : "1882-02-01T00:00:00",
"source" : "CoE 6",
"population" : "214"
}
, {
"year" : "1881-02-01T00:00:00",
"source" : "CoE 6",
"population" : "197"
}
, {
"year" : "1880-02-01T00:00:00",
"source" : "CoE 6",
"population" : "181"
}
, {
"year" : "1879-02-01T00:00:00",
"source" : "CoE 6",
"population" : "164"
}
, {
"census_year" : true,
"year" : "1878-01-01T00:00:00",
"source" : "CoE",
"population" : "148"
}
]
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Edmonton - Population History</title>
<style>
svg {
background-color: whitesmoke;
display: block;
margin: 0 auto;
margin-top: 30px;
}
.annotation-note-title, .axis-label {
font-weight: bold;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.3.0/d3-annotation.min.js"></script>
<script>
var log = console.log;
var dir = console.dir;
// Define SVG
var svg = d3.select("svg");
var margin = {top: 20, right: 30, bottom: 30, left: 60};
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;
var g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
// load JSON data
d3.json("Edmonton_Population_History.json")
.then(histoChart);
// Format and measure data then create chart components
function histoChart(population) {
// formating
population.forEach(function(d) {
d.year = new Date(d.year).getFullYear();
d.population = +d.population;
});
//measuring
var xScale = d3.scaleLinear()
.domain(d3.extent(population, function(d) { return d.year; })).nice()
.range([0, width]);
var yScale = d3.scaleLinear()
.domain([0, d3.max(population, function(d) { return d.population; })]).nice()
.range([height, 0]);
var line = d3.line().x(function(d) { return xScale(d.year); })
.y(function(d) { return yScale(d.population); });
// chart components - annotations, line path, x and y axis, axis lables
// annotations
var myType = d3.annotationCustomType(
d3.annotationXYThreshold,
{
note: {
orientation : "top",
align :"middle"
}
}
);
var annotations = [
{
type: d3.annotationCalloutCircle,
note: {
label: "linear increse in population",
title: "1944 - 1962",
wrap: 200
},
subject: {
radius: 69
},
x: 564,
y: 348,
dx: -90
},
{
type: myType,
note: {
title: "1878",
label: "population was 148",
wrap: 200
},
subject: {
y1: 400,
y2: 0
},
dy: -200,
y : 465,
x: 158
},
{
type: d3.annotationXYThreshold,
note: {
title: "2016",
label: "population was 899,447",
wrap: 200
},
dx: -120,
dy: 50,
y : 20,
x: 902
}
].map(function(d) { d.color = "#E8336D"; return d; });
// helpers for placing the annotation - used pixel positions
// log(xScale(2016)+margin.left); // xScale(1878)+margin.left = 908.25
// log(yScale(899447));
var makeAnnotations = d3.annotation().type(d3.annotationLabel).annotations(annotations);
d3.select("svg").append("g")
.attr("class", "annotation-group")
.call(makeAnnotations);
// x axis
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(xScale).ticks(6, "0.0f"))
.select(".domain")
.remove();
// y axis
g.append("g")
.call(d3.axisLeft(yScale))
.select(".domain")
.remove();
// y axis label
g.append("text")
.attr("class", "axis-label")
.attr("x", 10)
.attr("y", 2)
.style("font-size", "0.75em")
.text("population");
// x axis label
g.append("text")
.attr("class", "axis-label")
.attr("x", width - 23)
.attr("y", height - 2)
.style("font-size", "0.75em")
.text("year");
// line path
g.append("path")
.datum(population)
.style("fill", "none")
.style("stroke", "steelblue")
.style("stoke-linejoin", "round")
.style("stroke-linecap", "round")
.style("stroke-width", 1.5)
.attr("d", line);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment