Created
April 27, 2015 12:37
-
-
Save pierandrea/b46aca31aa1dfe14fdb0 to your computer and use it in GitHub Desktop.
#KnightD3 - Exercise Module 6: Multiple lines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>#KnightD3 - Exercise Module 6: Multiple lines</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style type="text/css"> | |
body { | |
background-color: white; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
} | |
p { | |
font-size: 14px; | |
margin: 10px 0 0 0; | |
} | |
svg { | |
background-color: white; | |
} | |
circle:hover { | |
fill: orange; | |
} | |
path { | |
stroke: gray; | |
stroke-width: 0.5; | |
} | |
g.highlight path { | |
stroke: steelblue; | |
stroke-width: 3; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
stroke-width: 1; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Internet users in Africa vs. rest of the world</h1> | |
<p>% of individuals using the internet in Sub-saharan Africa countries (for countries where data is available), 2007-2013. Source: World Bank data, downloaded via <a href="http://thewebindex.org/data/?indicator=I2&country=AFR" target="_blank">The Web Index</a>, 2014</p> | |
<script type="text/javascript"> | |
//Dimensions and padding | |
var w = 700; | |
var h = 600; | |
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left | |
//Set up date formatting and years | |
var dateFormat = d3.time.format("%Y"); | |
//Set up scales | |
var xScale = d3.time.scale() | |
.range([ padding[3], w - padding[1] - padding[3] ]); | |
var yScale = d3.scale.linear() | |
.range([ padding[0], h - padding[2] ]); | |
//Configure axis generators | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(7) | |
.tickFormat(function(d) { | |
return dateFormat(d); | |
}); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
//Configure line generator | |
var line = d3.svg.line() | |
.x(function(d) { | |
return xScale(dateFormat.parse(d.year)); | |
}) | |
.y(function(d) { | |
return yScale(+d.amount); | |
}); | |
//Create the empty SVG image | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
//Load data | |
d3.csv("internetUsers.csv", function(data) { | |
//New array with all the years, for referencing later | |
var years = ["2007", "2008", "2009", "2010", "2011", "2012", "2013",]; | |
//Create a new, empty array to hold our restructured dataset | |
var dataset = []; | |
//Loop once for each row in data | |
for (var i = 0; i < data.length; i++) { | |
//Create new object with this country's name and empty array | |
dataset[i] = { | |
country: data[i].country, | |
users: [] | |
}; | |
//Loop through all the years | |
for (var j = 0; j < years.length; j++) { | |
// If value is not empty | |
if (data[i][years[j]]) { | |
//Add a new object to the users data array | |
//for this country | |
dataset[i].users.push({ | |
year: years[j], | |
amount: data[i][years[j]] | |
}); | |
} | |
} | |
} | |
//Set scale domains | |
xScale.domain([ | |
d3.min(years, function(d) { | |
return dateFormat.parse(d); | |
}), | |
d3.max(years, function(d) { | |
return dateFormat.parse(d); | |
}) | |
]); | |
yScale.domain([ | |
d3.max(dataset, function(d) { | |
return d3.max(d.users, function(d) { | |
return +d.amount; | |
}); | |
}), | |
0 | |
]); | |
//Make a group for each country | |
var groups = svg.selectAll("g") | |
.data(dataset) | |
.enter() | |
.append("g") | |
.classed("highlight", function(d) { | |
if (d.country == "Benin" || | |
d.country == "Botswana" || | |
d.country == "Burkina Faso" || | |
d.country == "Cameroon" || | |
d.country == "Ethiopia" || | |
d.country == "Ghana" || | |
d.country == "Kenya" || | |
d.country == "Malawi" || | |
d.country == "Mali" || | |
d.country == "Mauritius" || | |
d.country == "Mozambique" || | |
d.country == "Namibia" || | |
d.country == "Nigeria" || | |
d.country == "Rwanda" || | |
d.country == "Senegal" || | |
d.country == "Sierra Leone" || | |
d.country == "South Africa" || | |
d.country == "Uganda" || | |
d.country == "Tanzania" || | |
d.country == "Zambia" || | |
d.country == "Zimbabwe" ) { | |
return true; | |
} else { | |
return false; | |
} | |
}); | |
//Append a title with the country name (so we get easy tooltips) | |
groups.append("title") | |
.text(function(d) { | |
return d.country; | |
}); | |
//Within each group, create a new line/path, | |
//binding just the users data to each one | |
groups.selectAll("path") | |
.data(function(d) { | |
return [ d.users ]; | |
}) | |
.enter() | |
.append("path") | |
.attr("class", "line") | |
.attr("d", line) | |
.attr("fill", "none") | |
.attr("stroke-width", 2); | |
//Axes | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (h - padding[2]) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (padding[3]) + ",0)") | |
.call(yAxis); | |
}); | |
//End data load function | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
country | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | |
---|---|---|---|---|---|---|---|---|
Argentina | 25.94663294 | 28.11262348 | 34 | 45 | 51 | 55.8 | 59.9 | |
Australia | 69.45 | 71.67 | 74.25 | 76 | 79.48769771 | 79 | 83 | |
Austria | 69.37 | 72.87 | 73.45 | 75.17 | 78.7399931 | 80.02999392 | 80.6188 | |
Bahrain | 32.91 | 51.95 | 53 | 55 | 76.9999665 | 88 | 90 | |
Bangladesh | 1.8 | 2.5 | 3.1 | 3.7 | 5 | 5.75 | 6.5 | |
Belgium | 64.44 | 66 | 70 | 75 | 81.609996 | 80.71999055 | 82.1702 | |
Benin | 1.79 | 1.85 | 2.24 | 3.13 | 4.148323066 | 4.5 | 4.9 | |
Botswana | 5.28 | 6.25 | 6.15 | 6 | 8 | 11.5 | 15 | |
Brazil | 30.88 | 33.83 | 39.22 | 40.65 | 45.69 | 48.56 | 51.6 | |
Burkina Faso | 0.75 | 0.92 | 1.13 | 2.4 | 3 | 3.725034916 | 4.4 | |
Cameroon | 2.93 | 3.4 | 3.84 | 4.3 | 5 | 5.69898724 | 6.4 | |
Canada | 73.2 | 76.7 | 80.3 | 80.3 | 83 | 83 | 85.8 | |
Chile | 35.9 | 37.3 | 41.56 | 45 | 52.24960729 | 61.41815456 | 66.5 | |
China | 16 | 22.6 | 28.9 | 34.3 | 38.3 | 42.30011749 | 45.8 | |
Colombia | 21.8 | 25.6 | 30 | 36.5 | 40.35091575 | 48.98 | 51.7 | |
Costa Rica | 28.4 | 32.29 | 34.33 | 36.5 | 39.212196 | 47.5 | 45.96 | |
Czech Republic | 51.93 | 62.97 | 64.43 | 68.82 | 70.49 | 73.43000782 | 74.1104 | |
Denmark | 85.03 | 85.02 | 86.84 | 88.72 | 89.81001339 | 92.26001172 | 94.6297 | |
Ecuador | 10.8 | 18.8 | 24.6 | 29.03 | 31.36680836 | 35.13514645 | 40.35368423 | |
Egypt | 16.03 | 18.01 | 25.69 | 31.42 | 39.83 | 44 | 49.56 | |
Estonia | 66.19 | 70.58 | 72.5 | 74.1 | 76.5 | 78.38992593 | 80.0043 | |
Ethiopia | 0.37 | 0.45 | 0.54 | 0.75 | 1.1 | 1.482810139 | 1.9 | |
Finland | 80.78 | 83.67 | 82.49 | 86.89 | 88.70999491 | 89.87999797 | 91.5144 | |
France | 66.09 | 70.68 | 71.58 | 77.28 | 77.81999899 | 81.44 | 81.9198 | |
Germany | 75.16 | 78 | 79 | 82 | 81.26999954 | 82.34999847 | 83.9614 | |
Ghana | 3.85 | 4.27 | 5.44 | 7.8 | 14.11 | 12.3 | 12.3 | |
Greece | 35.88 | 38.2 | 42.4 | 44.4 | 51.64999517 | 55.06999344 | 59.8663 | |
Haiti | 7.2 | 7.6 | 8.1 | 8.37 | 9 | 9.8 | 10.6 | |
Hungary | 53.3 | 61 | 62 | 65 | 68.01998789 | 70.57999815 | 72.6439 | |
Iceland | 90.6 | 91 | 93 | 93.39 | 94.8196868 | 96.20979955 | 96.5468 | |
India | 3.95 | 4.38 | 5.12 | 7.5 | 10.07 | 12.58006091 | 15.1 | |
Indonesia | 5.786274729 | 7.917479385 | 6.92 | 10.92 | 11.11 | 14.7 | 15.82 | |
Ireland | 61.15832455 | 65.34 | 67.38 | 69.85 | 74.88997297 | 76.91999254 | 78.2477 | |
Israel | 48.12806219 | 59.39 | 63.12 | 67.5 | 68.87387799 | 70.8 | 70.8 | |
Italy | 40.79 | 44.53 | 48.83 | 53.68 | 54.3899983 | 55.82999799 | 58.4593 | |
Jamaica | 21.1 | 23.6 | 24.3 | 27.67 | 37.43861341 | 33.79 | 37.8 | |
Japan | 74.3 | 75.4 | 78 | 78.21 | 79.05411352 | 86.25 | 86.25 | |
Jordan | 20 | 23 | 26 | 27.2 | 34.9 | 41 | 44.2 | |
Kazakhstan | 4.02 | 11 | 18.2 | 31.6 | 50.6 | 53.31566912 | 54 | |
Kenya | 7.95 | 8.67 | 10.04 | 14 | 28 | 32.1 | 39 | |
Malawi | 0.965864737 | 0.7 | 1.07 | 2.26 | 3.33 | 4.3506 | 5.4 | |
Malaysia | 55.7 | 55.8 | 55.9 | 56.3 | 61 | 65.8 | 66.97 | |
Mali | 0.81 | 1.57 | 1.8 | 1.9 | 2 | 2.1689 | 2.3 | |
Mauritius | 20.22 | 21.81 | 22.51 | 28.33 | 34.95 | 35.42 | 39 | |
Mexico | 20.81 | 21.71 | 26.34 | 31.05 | 37.17629541 | 39.75 | 43.46 | |
Morocco | 21.5 | 33.1 | 41.3 | 52 | 46.1074826 | 55.41605319 | 56 | |
Mozambique | 0.91 | 1.56 | 2.68 | 4.17 | 4.3 | 4.8491 | 5.4 | |
Myanmar | 0.217128445 | 0.22 | 0.22 | 0.25 | 0.98 | 1.0691 | 1.2 | |
Namibia | 4.835610778 | 5.329003772 | 6.5 | 11.6 | 12 | 12.9414 | 13.9 | |
Nepal | 1.41 | 1.73 | 1.97 | 7.93 | 9 | 11.1493 | 13.3 | |
Netherlands | 85.82 | 87.42 | 89.63 | 90.72 | 91.41999576 | 92.85999236 | 93.9564 | |
New Zealand | 69.76 | 72.03 | 79.7 | 80.46 | 81.23 | 82 | 82.78 | |
Nigeria | 6.77 | 15.86 | 20 | 24 | 28.43 | 32.8 | 38 | |
Norway | 86.93 | 90.57 | 92.08 | 93.39 | 93.48998265 | 94.64997805 | 95.0534 | |
Pakistan | 6.8 | 7 | 7.5 | 8 | 9 | 9.96 | 10.9 | |
Peru | 25.2 | 30.57 | 31.4 | 34.77 | 36.01 | 38.2 | 39.2 | |
Philippines | 5.97 | 6.22 | 9 | 25 | 29 | 36.2351 | 37 | |
Poland | 48.6 | 53.13 | 58.97 | 62.32 | 61.94999897 | 62.30999727 | 62.8492 | |
Portugal | 42.09 | 44.13 | 48.27 | 53.3 | 55.24999688 | 60.33999749 | 62.0956 | |
Qatar | 37 | 44.3 | 53.1 | 69 | 69 | 69.3 | 85.3 | |
Republic Of Korea | 78.8 | 81 | 81.6 | 83.7 | 83.75912015 | 84.0732265 | 84.77 | |
Russian Federation | 24.66 | 26.83 | 29 | 43 | 49 | 63.8 | 61.4 | |
Rwanda | 2.115387178 | 4.5 | 7.7 | 8 | 7 | 8.023854277 | 8.7 | |
Saudi Arabia | 30 | 36 | 38 | 41 | 47.5 | 54 | 60.5 | |
Senegal | 7.7 | 10.6 | 14.5 | 16 | 17.5 | 19.2036 | 20.9 | |
Sierra Leone | 0.239834699 | 0.25 | 0.26 | 0.58 | 0.9 | 1.3 | 1.7 | |
Singapore | 69.9 | 69 | 69 | 71 | 71 | 72 | 73 | |
South Africa | 8.065375174 | 8.43 | 10 | 24 | 33.97 | 41 | 48.9 | |
Spain | 55.11 | 59.6 | 62.4 | 65.8 | 67.6 | 69.80999994 | 71.5719 | |
Sweden | 82.01 | 90 | 91 | 90 | 92.76998606 | 93.17998801 | 94.7836 | |
Switzerland | 77.2 | 79.2 | 81.3 | 83.9 | 85.19302818 | 85.2 | 86.7 | |
Thailand | 20.03 | 18.2 | 20.1 | 22.4 | 23.66992562 | 26.46 | 28.94 | |
Tunisia | 17.1 | 27.53 | 34.07 | 36.8 | 39.1 | 41.4416 | 43.8 | |
Turkey | 28.63 | 34.37 | 36.4 | 39.82 | 43.06571043 | 45.13 | 46.25 | |
Uganda | 3.671965351 | 7.9 | 9.78 | 12.5 | 13.01354333 | 14.6896 | 16.2 | |
Ukraine | 6.55 | 11 | 17.9 | 23.3 | 28.70826284 | 35.27 | 41.8 | |
United Arab Emirates | 61 | 63 | 64 | 68 | 78 | 84.9999915 | 88 | |
United Kingdom Of Great Britain And Northern Ireland | 75.09 | 78.39 | 83.56 | 85 | 85.37999855 | 87.47999842 | 89.8441 | |
Tanzania | 1.6 | 1.9 | 2.4 | 2.9 | 3.5 | 3.95 | 4.4 | |
United States | 75 | 74 | 71 | 71.69 | 69.72946076 | 79.3 | 84.2 | |
Uruguay | 34 | 39.3 | 41.8 | 46.4 | 51.40466106 | 54.45376868 | 58.1 | |
Venezuela (Bolivarian Republic Of) | 20.83 | 25.88 | 32.7 | 37.37 | 40.22 | 49.05008307 | 54.9 | |
Viet Nam | 20.75544477 | 23.92 | 26.55 | 30.65 | 35.07 | 39.49 | 43.9 | |
Yemen | 5.01 | 6.89 | 9.96 | 12.35 | 14.905 | 17.4465 | 20 | |
Zambia | 4.87 | 5.55 | 6.31 | 10 | 11.5 | 13.4682 | 15.4 | |
Zimbabwe | 10.85 | 11.4 | 11.36 | 11.5 | 15.7 | 17.09 | 18.5 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment