Skip to content

Instantly share code, notes, and snippets.

@apbryant

apbryant/index.html

Last active July 7, 2017 11:45
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
world happiness bar chart
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src='http://dimplejs.org/dist/dimple.v2.0.0.min.js'></script>
<style>
h2 {
text-align: center;
}
</style>
<script type='text/javascript'>
function draw(data) {
// margin setup
'use strict';
var margin = 25,
width = 1400 - margin,
height = 700 - margin;
// title
d3.select('body')
.append('h2')
.text('Net change in country happiness between 2015 and 2017');
// svg setup
var svg = d3.select('body')
.append('svg')
.attr('width', width + margin)
.attr('height', height + margin)
.append('g')
.attr('class', 'chart');
// chart construction
var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis('x', 'Country');
var y = myChart.addMeasureAxis('y', 'net_change');
var series = myChart.addSeries(['Country', 'net_change'], dimple.plot.bar);
/*
tooltip customization code adapted from: http://bit.ly/2txfgZN
via http://bit.ly/2swJ5rR
*/
series.getTooltipText = function(d){
return [
'Country: ' + d.aggField[0],
'Net change in happiness: ' + d.aggField[1]
]};
myChart.draw()
d3.selectAll('.dimple-series-0')
.attr('fill', '#81BEF7')
.attr('stroke', '#81BEF7')
.attr('fill-opacity', 0.8);
d3.selectAll('.tick')
.selectAll('text')
.style('font-size', '8px');
};
</script>
</head>
<body>
<script type='text/javascript'>
// load data
d3.csv('scores.csv', function(d) {
d['netScoreDiff'] = +d['netScoreDiff'];
return d;
}, draw);
</script>
</body>
</html>
Raw
scores.csv
score2015 score2016 score2017 net_change Country
1 3.575 3.36 3.36 -0.215 Afghanistan
2 4.959 4.655 4.655 -0.303999999999999 Albania
3 5.605 6.355 6.355 0.75 Algeria
4 4.033 3.866 3.866 -0.167 Angola
5 6.574 6.65 6.65 0.0760000000000005 Argentina
6 4.35 4.36 4.36 0.0100000000000007 Armenia
7 7.284 7.313 7.313 0.0289999999999999 Australia
8 7.2 7.119 7.119 -0.0810000000000004 Austria
9 5.212 5.291 5.291 0.0790000000000006 Azerbaijan
10 5.96 6.218 6.218 0.258 Bahrain
11 4.694 4.643 4.643 -0.0510000000000002 Bangladesh
12 5.813 5.802 5.802 -0.0110000000000001 Belarus
13 6.937 6.929 6.929 -0.00800000000000001 Belgium
14 3.34 3.484 3.484 0.144 Benin
15 5.253 5.196 5.196 -0.0570000000000004 Bhutan
16 5.89 5.822 5.822 -0.0679999999999996 Bolivia
17 4.949 5.163 5.163 0.214 Bosnia and Herzegovina
18 4.332 3.974 3.974 -0.358 Botswana
19 6.983 6.952 6.952 -0.0309999999999997 Brazil
20 4.218 4.217 4.217 -0.00100000000000033 Bulgaria
21 3.587 3.739 3.739 0.152 Burkina Faso
22 2.905 2.905 2.905 0 Burundi
23 3.819 3.907 3.907 0.0880000000000001 Cambodia
24 4.252 4.513 4.513 0.261 Cameroon
25 7.427 7.404 7.404 -0.0229999999999997 Canada
26 3.667 3.763 3.763 0.0960000000000001 Chad
27 6.67 6.705 6.705 0.0350000000000001 Chile
28 5.14 5.245 5.245 0.105 China
29 6.477 6.481 6.481 0.00399999999999956 Colombia
30 3.956 3.956 3.956 0 Comoros
31 3.989 4.236 4.236 0.247 Congo (Brazzaville)
32 4.517 4.272 4.272 -0.245 Congo (Kinshasa)
33 7.226 7.087 7.087 -0.139 Costa Rica
34 5.759 5.488 5.488 -0.271 Croatia
35 5.689 5.546 5.546 -0.143 Cyprus
36 6.505 6.596 6.596 0.0910000000000002 Czech Republic
37 7.527 7.526 7.526 -0.00100000000000033 Denmark
38 4.885 5.155 5.155 0.27 Dominican Republic
39 5.975 5.976 5.976 0.00100000000000033 Ecuador
40 4.194 4.362 4.362 0.168 Egypt
41 6.13 6.068 6.068 -0.0620000000000003 El Salvador
42 5.429 5.517 5.517 0.0880000000000001 Estonia
43 4.512 4.508 4.508 -0.00399999999999956 Ethiopia
44 7.406 7.413 7.413 0.00700000000000056 Finland
45 6.575 6.478 6.478 -0.0970000000000004 France
46 3.896 4.121 4.121 0.225000000000001 Gabon
47 4.297 4.252 4.252 -0.0449999999999999 Georgia
48 6.75 6.994 6.994 0.244 Germany
49 4.633 4.276 4.276 -0.357 Ghana
50 4.857 5.033 5.033 0.176 Greece
51 6.123 6.324 6.324 0.201 Guatemala
52 3.656 3.607 3.607 -0.0489999999999999 Guinea
53 4.518 4.028 4.028 -0.49 Haiti
54 4.788 4.871 4.871 0.0830000000000002 Honduras
55 5.474 5.458 5.458 -0.016 Hong Kong
56 4.8 5.145 5.145 0.345 Hungary
57 7.561 7.501 7.501 -0.0599999999999996 Iceland
58 4.565 4.404 4.404 -0.161 India
59 5.399 5.314 5.314 -0.085 Indonesia
60 4.686 4.813 4.813 0.127 Iran
61 4.677 4.575 4.575 -0.101999999999999 Iraq
62 6.94 6.907 6.907 -0.0330000000000004 Ireland
63 7.278 7.267 7.267 -0.0109999999999992 Israel
64 5.948 5.977 5.977 0.0289999999999999 Italy
65 3.655 3.916 3.916 0.261 Ivory Coast
66 5.709 5.51 5.51 -0.199 Jamaica
67 5.987 5.921 5.921 -0.0659999999999998 Japan
68 5.192 5.303 5.303 0.111 Jordan
69 5.855 5.919 5.919 0.0639999999999992 Kazakhstan
70 4.419 4.356 4.356 -0.0629999999999997 Kenya
71 5.589 5.401 5.401 -0.188000000000001 Kosovo
72 6.295 6.239 6.239 -0.056 Kuwait
73 5.286 5.185 5.185 -0.101 Kyrgyzstan
74 4.876 4.876 4.876 0 Laos
75 5.098 5.56 5.56 0.462 Latvia
76 4.839 5.129 5.129 0.289999999999999 Lebanon
77 4.571 3.622 3.622 -0.949 Liberia
78 5.754 5.615 5.615 -0.138999999999999 Libya
79 5.833 5.813 5.813 -0.0200000000000005 Lithuania
80 6.946 6.871 6.871 -0.0749999999999993 Luxembourg
81 5.007 5.121 5.121 0.114000000000001 Macedonia
82 3.681 3.695 3.695 0.0139999999999998 Madagascar
83 4.292 4.156 4.156 -0.136 Malawi
84 5.77 6.005 6.005 0.235 Malaysia
85 3.995 4.073 4.073 0.0780000000000003 Mali
86 6.302 6.488 6.488 0.186000000000001 Malta
87 4.436 4.201 4.201 -0.235 Mauritania
88 5.477 5.648 5.648 0.170999999999999 Mauritius
89 7.187 6.778 6.778 -0.409000000000001 Mexico
90 5.889 5.897 5.897 0.00800000000000001 Moldova
91 4.874 4.907 4.907 0.0330000000000004 Mongolia
92 5.192 5.161 5.161 -0.0310000000000006 Montenegro
93 5.013 5.151 5.151 0.138 Morocco
94 4.307 4.395 4.395 0.0879999999999992 Myanmar
95 4.514 4.793 4.793 0.279 Nepal
96 7.378 7.339 7.339 -0.0389999999999997 Netherlands
97 7.286 7.334 7.334 0.048 New Zealand
98 5.828 5.992 5.992 0.164 Nicaragua
99 3.845 3.856 3.856 0.0109999999999997 Niger
100 5.268 4.875 4.875 -0.393 Nigeria
101 5.695 5.771 5.771 0.0759999999999996 North Cyprus
102 7.522 7.498 7.498 -0.024 Norway
103 5.194 5.132 5.132 -0.0620000000000003 Pakistan
104 4.715 4.754 4.754 0.0389999999999997 Palestinian Territories
105 6.786 6.701 6.701 -0.085 Panama
106 5.878 5.538 5.538 -0.34 Paraguay
107 5.824 5.743 5.743 -0.0809999999999995 Peru
108 5.073 5.279 5.279 0.206 Philippines
109 5.791 5.835 5.835 0.0439999999999996 Poland
110 5.102 5.123 5.123 0.0209999999999999 Portugal
111 6.611 6.375 6.375 -0.236 Qatar
112 5.124 5.528 5.528 0.404 Romania
113 5.716 5.856 5.856 0.14 Russia
114 3.465 3.515 3.515 0.0500000000000003 Rwanda
115 6.411 6.379 6.379 -0.032 Saudi Arabia
116 3.904 4.219 4.219 0.315 Senegal
117 5.123 5.177 5.177 0.0539999999999994 Serbia
118 4.507 4.635 4.635 0.128 Sierra Leone
119 6.798 6.739 6.739 -0.0590000000000002 Singapore
120 5.995 6.078 6.078 0.0830000000000002 Slovakia
121 5.848 5.768 5.768 -0.0800000000000001 Slovenia
122 4.642 4.459 4.459 -0.183000000000001 South Africa
123 5.984 5.835 5.835 -0.149 South Korea
124 6.329 6.361 6.361 0.032 Spain
125 4.271 4.415 4.415 0.144 Sri Lanka
126 4.55 4.139 4.139 -0.411 Sudan
127 6.269 6.269 6.269 0 Suriname
128 7.364 7.291 7.291 -0.0729999999999995 Sweden
129 7.587 7.509 7.509 -0.0779999999999994 Switzerland
130 3.006 3.069 3.069 0.0630000000000002 Syria
131 6.298 6.379 6.379 0.0809999999999995 Taiwan
132 4.786 4.996 4.996 0.210000000000001 Tajikistan
133 3.781 3.666 3.666 -0.115 Tanzania
134 6.455 6.474 6.474 0.0190000000000001 Thailand
135 2.839 3.303 3.303 0.464 Togo
136 6.168 6.168 6.168 0 Trinidad and Tobago
137 4.739 5.045 5.045 0.306 Tunisia
138 5.332 5.389 5.389 0.0570000000000004 Turkey
139 5.548 5.658 5.658 0.11 Turkmenistan
140 3.931 3.739 3.739 -0.192 Uganda
141 4.681 4.324 4.324 -0.357 Ukraine
142 6.901 6.573 6.573 -0.327999999999999 United Arab Emirates
143 6.867 6.725 6.725 -0.142 United Kingdom
144 7.119 7.104 7.104 -0.0149999999999997 United States
145 6.485 6.545 6.545 0.0599999999999996 Uruguay
146 6.003 5.987 5.987 -0.016 Uzbekistan
147 6.81 6.084 6.084 -0.726 Venezuela
148 5.36 5.061 5.061 -0.299 Vietnam
149 4.077 3.724 3.724 -0.353 Yemen
150 5.129 4.795 4.795 -0.334 Zambia
151 4.61 4.193 4.193 -0.417000000000001 Zimbabwe
@apbryant
Copy link
Author

apbryant commented Jul 7, 2017

My first visualization of my exploration into the World Happiness Report's data on country happiness.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment