Skip to content

Instantly share code, notes, and snippets.

@joshy
Last active September 19, 2015 19:58
Show Gist options
  • Save joshy/133142101d7a07099ff1 to your computer and use it in GitHub Desktop.
Save joshy/133142101d7a07099ff1 to your computer and use it in GitHub Desktop.
Module 5 - Scatterplot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Urban population of Switzerland</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
font-family: Sans-Serif;
font-size: 13px;
background-color: #fcfcfa;
}
h1 {
font-size: 17px;
}
h2 {
font-size: 15px;
}
a {
color: steelblue;
}
#smallData svg{
background-color: #fcfcfa;
}
#bigData svg {
background-color: #fcfcfa;
}
.circleColor {
fill: steelblue;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-size: 12px;
}
</style>
</head>
<body>
<h1>Agglomeration population of Switzerland in 1'000 / year 2013.</h1>
<p style="width:600px">
The data is displayed in two charts. The reason is there are a lot of agglomerations
which have a small population and few communes and a few ones which have a huge population.
The y-axis shows the number of communes and the x-axis the population in 1'000.
</p>
<p><a href="http://www.bfs.admin.ch/xmlns/opendata/je-e-01.02.01.01.03.ods">Source data</a>
<h2>Agglomerations with a population less/equal than 200'000</h2>
<div id="smallData"></div>
<h2>Agglomerations with a population greather than 200'000</h2>
<div id="bigData"></div>
<script type="text/javascript">
var w = 600;
var h = 400;
var padding = { top: 10, right: 10, bottom: 20, left: 50 };
var smallData = d3.select("#smallData")
.append("svg")
.attr("width", w)
.attr("height", h);
var xScale1 = d3.scale.linear()
.range([ padding.left, w - padding.right - padding.left ]);
var yScale1 = d3.scale.linear()
.range([ padding.top, h - padding.bottom - padding.top]);
var xAxis1 = d3.svg.axis()
.scale(xScale1)
.orient("bottom")
.ticks(8);
var yAxis1 = d3.svg.axis()
.scale(yScale1)
.orient("left")
.ticks(8);
var year = '2013';
d3.csv("urban-population-of-switzerland.csv", function(data) {
data = data.filter(function (d) { return +d[year] <= 200; });
data = data.sort(function (a, b) {return d3.ascending(+a[year], +b[year]); });
xScale1.domain([
d3.min(data, function(d) {
return +d[year];
}),
d3.max(data, function(d) {
return +d[year];
})
]);
yScale1.domain([
d3.max(data, function(d) {
return +d['Number of communes'];
}),
d3.min(data, function(d) {
return +d['Number of communes'];
})
]);
circles = smallData.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale1(d[year]);
})
.attr("cy", function(d) {
return yScale1(d['Number of communes']);
})
.attr("class", "circleColor")
.attr("r", 0.5)
.append("title")
.text(function (d) {
return "Population of " + d.Agglomeration + " is " + d[year] +
" and number of communes is " + d['Number of communes'];
});
circles.transition()
.delay(function (d, i) {
return i * 50;
})
.duration(1000)
.attr("r", 3);
smallData.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding.bottom - padding.top - 10) + ")")
.call(xAxis1);
smallData.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding.left - 10) + ",0)")
.call(yAxis1);
});
</script>
<script type="text/javascript">
var w = 600;
var h = 400;
var padding = { top: 10, right: 10, bottom: 10, left: 50 };
var bigData = d3.select("#bigData")
.append("svg")
.attr("width", w)
.attr("height", h);
var xScale = d3.scale.linear()
.range([ padding.left, w - padding.right - padding.left ]);
var yScale = d3.scale.linear()
.range([ padding.top, h - padding.bottom - padding.top]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var year = '2013';
d3.csv("urban-population-of-switzerland.csv", function(data) {
data = data.filter(function (d) { return +d[year] > 200; });
data = data.sort(function (a, b) { return d3.ascending(+a[year], +b[year]); });
xScale.domain([
d3.min(data, function (d) {
return +d[year];
}),
d3.max(data, function (d) {
return +d[year];
})
]);
yScale.domain([
d3.max(data, function (d) {
return +d['Number of communes'];
}),
d3.min(data, function (d) {
return +d['Number of communes'];
})
]);
circles = bigData.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d[year]);
})
.attr("cy", function(d) {
return yScale(d['Number of communes']);
})
.attr("class", "circleColor")
.attr("r", 1)
.append("title")
.text(function (d) {
return "Population of " + d.Agglomeration + " is " + d[year] +
" and number of communes is " + d['Number of communes'];
});
circles.transition()
.delay(2000)
.duration(1000)
.attr("r", 4);
bigData.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding.bottom - padding.top) + ")")
.call(xAxis);
bigData.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding.left - 10) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Agglomeration Number of communes 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
Aarau 17 76.5 76.7 77.6 77.7 78.1 78.2 78.2 78.3 78.7 79.1 79.7 80.3 81 81.8 82.3 83.1 83.8 85.1 86.4 88 89.3 90.7 91.7
Amriswil-Romanshorn 5 22.6 22.9 23.3 23.6 24 24 24.2 24 24 24.1 24 24.2 24.4 24.6 24.7 24.8 25 25.4 25.8 26.3 26.8 27.3 27.7
Arbon-Rorschach 11 54.6 54.9 55.3 55.6 55.7 55.7 55.6 56 56 56.1 56.2 56.4 56.6 56.7 56.7 57 57.8 58.5 59 59.4 59.7 60.1 60.6
Baden-Brugg 22 100.9 101.6 102.5 102.8 103.5 103.7 103.8 104.2 104.8 105.7 107.3 108.2 108.4 108.5 109 110.3 111.9 114.3 115.7 117.7 118.8 120.6 122.4
Basel 74 470.7 473.2 476 477 477.2 478.4 478.3 477.8 478 479.1 479.7 482.2 484.1 485.9 486.1 487 489.9 494.3 498 497.7 500.6 503.9 508.6
Bellinzona 15 42.4 43 43.6 44.3 44.8 44.7 44.8 44.8 45 45.3 45.8 46.5 46.7 47.2 47.5 48 48.6 49.3 49.9 50.1 50.8 51.5 52.2
Bern 41 343.3 342.3 341.6 340.9 339.7 338.7 337.3 338 339.9 340.4 341.7 342.6 343.3 344.3 344.2 345.2 346.7 349.2 351.3 353.7 356 360.1 364.2
Biel/Bienne 19 88.5 88.7 89.3 88.3 87.9 87.4 86.9 86.5 86.2 86.3 86.1 86.7 87.1 87.6 88 88.6 89 90 90.9 92.2 92.9 94 95.2
Brig-Visp 10 29.9 30.4 30.8 31.2 31.5 31.8 32.1 32.2 32.3 32.5 32.5 32.6 32.8 32.9 32.9 33 33.1 33.6 33.9 34.6 35 35.5 36
Buchs (SG) (Vaduz-) 3 19.1 19.7 20 20.3 20.5 20.6 20.7 20.6 20.7 20.8 20.8 20.9 21 21.1 21.3 21.4 21.6 22.1 22.3 22.7 23 23.2 23.6
Bulle 7 17.4 17.8 18.3 18.9 19.3 19.8 20.2 20.6 20.7 20.9 21.3 21.8 22.3 23 23.4 23.8 24.6 25.3 26 27.1 27.9 28.7 29.5
Burgdorf 6 27.1 27.3 27.3 27.2 27.1 27 26.9 27.4 27 26.9 27.1 27.3 27.4 27.5 27.7 27.9 28.1 28.3 28.2 28.5 28.8 29.1 29.5
Chiasso-Mendrisio (Como-) 12 45.1 45.4 45.8 46 46.2 46.1 46.2 46.3 46.7 47 46.8 47.2 47.5 47.8 48 48.3 48.6 49.1 49.3 49.2 49.5 50 50.8
Chur 13 60.6 61.2 61.8 62.3 62.6 62.6 62.9 63.7 64.2 64.5 64.4 65 65.7 66.2 66.4 66.6 67.4 68.4 69.3 70 70.5 71.1 71.7
Davos 1 11.1 11.4 11.5 11.6 11.6 11.8 11.7 11.7 11.6 12.4 11.3 11.2 11.3 11.3 11.2 11.1 11.1 11.1 11.2 11.2 11.1 11.2 11.2
Delémont 6 18.5 18.6 18.7 18.8 19 19 18.9 18.9 18.9 18.9 19 19 19 19 19 19 19.2 19.4 19.5 19.6 19.8 20 20.6
Einsiedeln 1 11 11.2 11.3 11.5 11.7 11.8 12 12.2 12.3 12.5 12.7 12.9 13 13.1 13.4 13.5 13.8 14 14.2 14.4 14.4 14.6 14.9
Frauenfeld 3 24.7 24.9 24.9 25.2 25.3 25.4 25.5 25.9 26.4 26.7 26.9 27.3 27.3 27.5 27.6 27.9 28.1 28.4 28.8 29.2 29.6 30.2 30.6
Fribourg 30 83.3 84.5 85.6 86.3 86.8 87.7 88 88.5 89.2 89.7 91.5 92.5 93.5 94.7 96 97.7 99.6 101.3 103 104.9 107.3 109.7 112.1
Genève 74 429.3 433.4 438.3 443.8 448.6 448.5 451.5 454.5 459.8 466.3 472 477.9 484.5 489 493.4 497.4 503.6 513.2 521.4 526.4 530.7 533.5 541.3
Grenchen 3 25.1 25.2 25.2 25.2 25.2 25.3 25.3 25.2 25.1 25.1 25.1 25.2 25.1 25.1 25 25 25.1 25.2 25.1 25.4 25.4 25.6 25.9
Heerbrugg-Altstätten 10 44.9 45.7 46.4 47 47.6 48 48.1 48.4 48.8 49.1 49.5 49.7 50.1 50.4 50.8 51.2 51.8 52.6 53.1 53.8 54.5 55 55.7
Interlaken 7 19.6 19.8 20 20.3 20.5 20.7 20.6 20.8 21 21.1 21.3 21.5 21.6 21.8 21.9 22 22.3 22.4 22.6 22.7 22.8 22.9 23.2
Kreuzlingen (Konstanz-) 5 23.3 23.6 24.1 24.5 25.1 25.4 25.2 25.1 25.2 24.4 24.6 25 25.5 25.7 25.9 26.2 26.8 27.3 28 28.8 29.3 30.1 30.7
La Chaux-de-Fonds-Le Locle 2 47.8 48 48.4 48.3 48.4 48.3 48 47.7 47.3 47.1 47.2 47.1 47.2 47.1 47 46.9 47 47.4 47.5 47.6 47.9 48.5 49.1
Lachen 7 27.7 28.4 29.1 29.6 30.1 30.6 30.9 31.3 31.7 32.3 32.6 33.2 33.5 33.7 34.1 34.5 35.2 36.4 36.9 37.8 38.3 39 39.7
Langenthal 1 14.4 14.5 14.7 14.7 14.7 14.7 14.2 14.4 14.5 14.5 14.3 14.3 14.3 14.3 14.4 14.6 14.7 14.9 15.1 14.9 15.1 15.2 15.3
Lausanne 63 287.7 288.7 289.6 291.1 292.1 291.7 292 293.6 295.8 297.4 299.7 302.2 305.4 308.5 310.6 313.7 317.6 324.9 331.4 336.8 342.2 345.3 351.5
Lenzburg 7 24.2 24.3 24.7 24.9 25.1 25.4 25.4 25.6 25.7 25.8 26.1 26.3 26.6 26.7 26.9 27.3 27.8 28.4 28.9 29.5 30.2 30.8 31.4
Locarno 16 52.5 53.4 54.1 54.7 55.5 55.4 55.8 55.9 56.3 56.6 57.3 57.6 58.1 58.5 59 59.5 60.2 60.9 61.4 60.9 61.5 62.1 62.7
Lugano 45 112.3 114.2 115.9 118 119.3 119.3 119.6 120.2 121.7 122.6 124 125.1 126 127.1 128.3 129.4 131.5 133.7 135.3 134.1 135.5 138.1 140.7
Luzern 16 185.3 187.9 189.8 190.8 191.5 191.7 191.4 191.1 192.2 193.4 195.3 196.7 197.5 198.3 199.2 200.3 202.5 205.4 207.6 209.8 211.8 214.3 216.1
Lyss 1 11.8 11.7 11.7 11.8 11.9 12.1 12.1 12.4 12.5 12.5 12.7 12.7 12.8 12.8 12.9 12.9 13.2 13.4 13.6 13.7 13.9 14.1 14.2
Martigny 1 13.5 13.8 14 14.1 14.2 14.1 14.1 14 14 13.8 14.5 14.6 14.7 14.9 15 15.2 15.4 15.6 15.8 16.1 16.3 16.9 17.2
Monthey-Aigle 5 30.2 30.7 31.1 31.3 31.5 31.4 31.5 31.7 32.1 32.4 32.6 33.4 33.9 34.4 35.2 35.9 36.4 37.1 37.9 38.8 39.7 40.3 41
Neuchâtel 12 72.5 72.5 72.8 73 73.7 73.7 73.9 74.2 74.4 74.7 74.9 75.2 75.2 76 76.5 76.9 77.6 78 78.4 78.8 79.3 79.6 80.4
Olten-Zofingen 25 97.9 98.5 99.1 99.4 100 100.3 100 100.4 101 101.4 102 102.7 103.3 104.1 104.6 105.5 106.7 108.1 109.1 110.7 111.9 113.3 114.5
Rapperswil-Jona-Rüti 3 38.9 39 39.2 39.2 39.3 39.5 39.8 40 40.4 40.8 41.5 42 42.3 42.7 42.7 43.1 43.8 44.1 44.6 44.9 45.1 45.5 45.7
Schaffhausen 13 62.3 62.6 62.9 63 63 62.8 62.7 62.8 62.9 62.9 63 63.7 64 64 63.9 64 64.8 65.5 65.8 66.5 67.2 67.7 68.4
Schwyz 3 22.1 22.5 22.8 23.1 23.3 23.2 23.4 23.4 23.8 24.3 24.2 24.5 24.8 25 25.2 25.2 25.4 25.5 25.6 26 26.1 26.5 26.7
Sierre-Montana 11 31.8 32.2 32.5 32.5 32.5 32.2 32.1 32.3 32.5 32.4 33.1 33.4 33.8 34.2 34.8 35.2 35.8 36.5 37 37.1 37.5 38 38.7
Sion 10 48.1 49.2 49.9 50.3 50.8 51.3 51.5 52 52.3 52.6 53 53.6 54.3 55.2 56.1 56.8 57.5 58.6 59.5 61 62.1 63.4 64.9
Solothurn 24 70.5 71.3 71.5 71.5 71.8 72.2 72.4 73.3 73.3 73 73.4 73.8 73.9 74 74.1 74.2 74.7 75.3 75.8 76.4 77.1 77.6 78.2
St. Gallen 11 141.8 142.9 143.7 144.5 144.2 144.1 143.6 143.1 143.5 143.9 144.2 145.1 145.5 145.6 145.3 145.6 146.7 148.5 149.6 150.2 151.4 152.4 153.4
St.Moritz 8 12.8 13.1 13.4 13.6 13.8 14.1 14 13.8 13.8 13.8 13.8 13.8 13.9 14.1 14.2 14.3 14.3 14.6 14.8 14.8 15 14.9 15
Stans 7 25.3 25.7 26.2 26.5 26.9 27.1 27.5 27.5 27.8 28.1 28.4 28.6 28.9 29.2 29.5 29.7 29.9 30.3 30.3 30.5 30.8 30.9 31.1
Thun 10 84.6 84.8 85.2 85.7 86.3 86.8 87.2 88 88.4 88.7 89.4 90.3 91.1 91.6 92.2 92.7 93.6 94.4 94.7 95.3 95.6 96 96.6
Vevey-Montreux 17 76.1 76.5 76.5 77 77.5 77.9 78.3 78.6 78.9 79.7 80.9 81.7 82.9 83.9 85.1 86.1 87.6 89.9 91.2 92 93.4 94.6 96.3
Wetzikon-Pfäffikon (ZH) 5 40.1 40.4 40.6 40.7 41.2 41.6 42 42.2 42.9 43.6 44.6 45.4 46 46.3 46.8 47.1 48.2 49.3 50.1 51.4 52.4 53.4 54.1
Wil (SG) 10 59.2 59.6 60.1 60.8 61.2 61.6 61.9 62.5 63.3 63.9 64.7 65.3 65.8 66.2 66.7 67.2 67.9 68.8 69.4 70.1 71 71.8 72.8
Winterthur 12 115 115.2 116 117 117.7 118.1 118.3 119.1 120.2 121.6 122.9 124.4 125.9 127.8 128.7 130.1 132.5 135 137 139.9 142.4 144.2 145.9
Wohlen (AG) 3 19.1 19.2 19.4 19.6 19.9 20 20.1 20.1 20.3 20.5 20.9 21.2 21.3 21.5 21.7 21.8 21.9 22.2 22.6 22.9 23.2 23.9 24.6
Yverdon-les-Bains 7 27.1 27.4 27.5 27.9 28.3 28.4 28.3 28.3 28.5 28.5 28.7 29 29.2 29.7 30.1 30.5 31 31.8 32.7 33.7 34.1 34.7 35.2
Zug 10 82 83.1 84.5 86.2 88.2 89.5 90.7 92.1 93.4 94.9 96.6 98.1 99.3 100.9 102.2 102.9 104.9 106 106.6 108.7 110.7 112.2 113.8
Zürich 131 994.6 1000.2 1003.2 1008.7 1014.9 1017.7 1019.9 1025.8 1035.8 1047.4 1061.2 1074.3 1081.7 1091.6 1101.7 1111.9 1132.2 1154.5 1170.2 1188.6 1204 1217.8 1232.6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment