Skip to content

Instantly share code, notes, and snippets.

@uafrazier

uafrazier/index.html

Last active October 29, 2015 01:41
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 uafrazier/7aea9224cf1c0eb8f423 to your computer and use it in GitHub Desktop.
Save uafrazier/7aea9224cf1c0eb8f423 to your computer and use it in GitHub Desktop.
Download ZIP
D3: Bar Chart (Networked Readiness Index - 2014)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Knight D3 | Module 1</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Oswald:700,400);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #D3D3D3;
font-family: oswald, arial, sans-serif;
color: #333;
}
p {
font-family: open sans, arial, sans-serif;
}
a:link {
color: #3A96B7;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #3A96B7;
}
a:active {
color: steelBlue;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background: #FFF;
box-shadow: 0 0 5px #999999;
}
.source {
font-family: oswald, arial, sans-serif;
font-weight: bold;
font-size: .75em;
float: right;
}
svg {
background: #FFFFFF;
}
rect:hover {
fill: #0DDDFF;
}
.axis path,
.axis line {
fill: none;
stroke: #36435A;
shape-rendering: crispEdges;
}
.axis text {
font-family: oswald, arial, sans-serif;
font-size: 11px;
fill: #36435A;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
.tooltip {
background: #EEE;
box-shadow: 0 0 5px #999999;
color: #333;
padding: 8px;
position: absolute;
text-align: center;
visibility: hidden;
z-index: 10;
}
</style>
</head>
<body>
<div id='container'>
<h1>Networked Readiness Index - 2014</h1>
<p>The 25 most networked countries, on a scale from 1 (worst) to 7 (best), based on performance leveraging information and communications technologies to boost competitiveness and well-being.<span class='source'>Data Source: <a href='http://www.weforum.org/global-information-technology-report-2014-data-platform'>World Economic Forum</a></span></p>
</div>
<script type='text/javascript'>
var w = 700;
var h = 600;
var padding = [ 20, 50, 20, 120 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient('left');
var svg = d3.select('#container')
.append('svg')
.attr('width', w)
.attr('height', h);
var tooltip = d3.select('body')
.append('div')
.attr('class', 'tooltip');
var tooltipOn = function(d, i) {
var content = '<div>' + d.country + ' has a ' + d.score + ' score in network readiness.</div>';
tooltip.html(content)
.style('visibility', 'visible');
};
var tooltipMove = function(d, i) {
tooltip.style('top', (d3.event.pageY + 10) + 'px')
.style('left', (d3.event.pageX + 10) + 'px');
};
var tooltipOff = function() {
tooltip.style('visibility', 'hidden');
};
d3.csv('network.csv', function(dataLoad) {
var dataSorted = dataLoad.sort(function(a,b) {
return d3.descending(+a.score, +b.score);
})
var data = dataSorted.filter(function(d,i) {
if (i<25) {
return d;
}});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.score;
}) ]);
heightScale.domain(data.map(function(d) { return d.country; } ));
var rects = svg.selectAll('rect')
.data(data)
.enter()
.append('rect');
rects.attr('x', padding[3])
.attr('y', function(d) {
return heightScale(d.country);
})
.attr('width',0)
.attr('fill','#FFFFFF')
.transition()
.duration(2000)
.attr('width', function(d) {
return widthScale(d.score);
})
.attr('height', heightScale.rangeBand())
.attr('fill','#3A96B7');
rects.on('mouseover', tooltipOn)
.on('mousemove', tooltipMove)
.on('mouseout', tooltipOff);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + padding[3] + ',' + (h - padding[2]) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (padding[3] - 5) + ',0)')
.call(yAxis);
});
</script>
</body>
</html>
Raw
network.csv
rank country score
1 Finland 6.04
2 Singapore 5.97
3 Sweden 5.93
4 Netherlands 5.79
5 Norway 5.70
6 Switzerland 5.62
7 United States 5.61
8 Hong Kong SAR 5.60
9 United Kingdom 5.54
10 Korea, Rep. 5.54
11 Luxembourg 5.53
12 Germany 5.50
13 Denmark 5.50
14 Taiwan, China 5.47
15 Israel 5.42
16 Japan 5.41
17 Canada 5.41
18 Australia 5.40
19 Iceland 5.30
20 New Zealand 5.27
21 Estonia 5.27
22 Austria 5.26
23 Qatar 5.22
24 United Arab Emirates 5.20
25 France 5.09
26 Ireland 5.07
27 Belgium 5.06
28 Malta 4.96
29 Bahrain 4.86
30 Malaysia 4.83
31 Lithuania 4.78
32 Saudi Arabia 4.78
33 Portugal 4.73
34 Spain 4.69
35 Chile 4.61
36 Slovenia 4.60
37 Cyprus 4.60
38 Kazakhstan 4.58
39 Latvia 4.58
40 Oman 4.56
41 Puerto Rico 4.54
42 Czech Republic 4.49
43 Panama 4.36
44 Jordan 4.36
45 Brunei Darussalam 4.34
46 Croatia 4.34
47 Hungary 4.32
48 Mauritius 4.31
49 Azerbaijan 4.31
50 Russian Federation 4.30
51 Turkey 4.30
52 Montenegro 4.27
53 Costa Rica 4.25
54 Poland 4.24
55 Barbados 4.22
56 Uruguay 4.22
57 Macedonia, FYR 4.19
58 Italy 4.18
59 Slovak Republic 4.12
60 Georgia 4.09
61 Mongolia 4.07
62 China 4.05
63 Colombia 4.05
64 Indonesia 4.04
65 Armenia 4.03
66 Seychelles 4.02
67 Thailand 4.01
68 Bosnia and Herzegovina 3.99
69 Brazil 3.98
70 South Africa 3.98
71 Trinidad and Tobago 3.97
72 Kuwait 3.96
73 Bulgaria 3.96
74 Greece 3.95
75 Romania 3.95
76 Sri Lanka 3.94
77 Moldova 3.89
78 Philippines 3.89
79 Mexico 3.89
80 Serbia 3.88
81 Ukraine 3.87
82 Ecuador 3.85
83 India 3.85
84 Vietnam 3.84
85 Rwanda 3.78
86 Jamaica 3.77
87 Tunisia 3.77
88 Guyana 3.77
89 Cape Verde 3.73
90 Peru 3.73
91 Egypt 3.71
92 Kenya 3.71
93 Dominican Republic 3.69
94 Bhutan 3.68
95 Albania 3.66
96 Ghana 3.65
97 Lebanon 3.64
98 El Salvador 3.63
99 Morocco 3.61
100 Argentina 3.53
101 Guatemala 3.52
102 Paraguay 3.47
103 Botswana 3.43
104 Iran, Islamic Rep. 3.42
105 Namibia 3.41
106 Venezuela 3.39
107 Gambia, The 3.38
108 Cambodia 3.36
109 Lao PDR 3.34
110 Zambia 3.34
111 Pakistan 3.33
112 Nigeria 3.31
113 Suriname 3.30
114 Senegal 3.30
115 Uganda 3.25
116 Honduras 3.24
117 Zimbabwe 3.24
118 Kyrgyz Republic 3.22
119 Bangladesh 3.21
120 Bolivia 3.21
121 Liberia 3.19
122 Côte d'Ivoire 3.14
123 Nepal 3.09
124 Nicaragua 3.08
125 Tanzania 3.04
126 Swaziland 3.00
127 Mali 3.00
128 Gabon 2.98
129 Algeria 2.98
130 Ethiopia 2.95
131 Cameroon 2.94
132 Malawi 2.90
133 Lesotho 2.88
134 Sierra Leone 2.85
135 Benin 2.82
136 Burkina Faso 2.78
137 Mozambique 2.77
138 Libya 2.75
139 Madagascar 2.74
140 Yemen 2.73
141 Timor-Leste 2.69
142 Mauritania 2.61
143 Haiti 2.52
144 Angola 2.52
145 Guinea 2.48
146 Myanmar 2.35
147 Burundi 2.31
148 Chad 2.22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment