Skip to content

Instantly share code, notes, and snippets.

@pierandrea
Created April 27, 2015 12:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pierandrea/b46aca31aa1dfe14fdb0 to your computer and use it in GitHub Desktop.
Save pierandrea/b46aca31aa1dfe14fdb0 to your computer and use it in GitHub Desktop.
#KnightD3 - Exercise Module 6: Multiple lines
<!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>
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