Skip to content

Instantly share code, notes, and snippets.

@pierandrea

pierandrea/FacebookGovReport20132014.csv

Last active August 29, 2015 14:19
Show Gist options
  • Save pierandrea/4c5428154cd991612c7a to your computer and use it in GitHub Desktop.
Save pierandrea/4c5428154cd991612c7a to your computer and use it in GitHub Desktop.
Download ZIP
#KnightD3 - Exercise Module 5: Scatterplot, transitions and delays
Raw
FacebookGovReport20132014.csv
country year2013 year2014 dataProduced2013 dataProduced2014
United States 12598 14274 81 79.1
India 3598 5473 53 44.7
United Kingdom 1906 2366 71.3 75.1
Germany 1687 2132 37.9 34.3
France 1661 2094 33.9 42.4
Italy 1699 1774 52.5 46.5
Brazil 1165 1212 33.8 34.3
Australia 603 829 65.5 68.6
Spain 404 500 39.6 37
Argentina 278 482 18.4 48.6
Poland 220 305 15.5 29.8
Portugal 148 305 25 34.8
Chile 230 288 64.4 61.5
Canada 174 279 50 57.7
Mexico 125 260 53.6 62.9
Belgium 154 239 64.9 59
Israel 129 232 51.2 47
Sweden 89 213 52.8 76.1
Taiwan 193 204 71.5 56.4
Singapore 141 177 70.9 74.6
Turkey 129 165 56.6 70.9
New Zealand 80 139 70 62.6
Hungary 38 128 29 34.4
Greece 115 117 50.4 57.3
Pakistan 126 100 47.6 42
Malta 81 93 61.7 71
Netherlands 23 76 36.4 64.5
Colombia 21 67 19.1 55.2
Austria 28 46 14.3 10.9
Hong Kong 25 39 88 41
Switzerland 34 39 17.7 10.3
Ireland 35 34 62.9 70.6
Denmark 12 31 33.3 35.5
Czech Republic 14 22 78.6 54.6
Dominican Republic 0 22 0 40.9
Croatia 7 21 42.9 81
Norway 15 21 13.3 47.6
Cyprus 3 20 100 60
Finland 11 18 63.6 72.2
Malaysia 16 17 18.8 23.5
Albania 6 16 83.3 25
Serbia 1 15 100 60
Romania 11 14 45.5 42.9
South Korea 1 14 0 42.9
Lithuania 9 12 44.4 41.7
Peru 2 10 0 50
Japan 0 9 0 11.1
Philippines 4 7 50 85.7
Estonia 6 6 33.3 66.7
Bangladesh 5 0 0
Bosnia and Herzegovina 4 5 50 80
Egypt 6 5 0 0
Indonesia 0 5 0 40
Macedonia 6 5 83.3 20
Slovakia 5 0 20
Kuwait 4 4 0 0
Moldova 0 4 0 25
Montenegro 0 4 0 25
Andorra 0 3 0 33.3
Bahrain 1 3 0 0
Jordan 0 3 0 33.3
Maldives 0 3 0 66.7
Slovenia 3 3 66.7 33.3
Thailand 2 3 0 0
Ecuador 2 2 0 0
Kazakhstan 2 2 0 0
Kenya 0 2 0 0
Kosovo 1 2 100 50
Liechtenstein 0 2 0 50
Nepal 2 2 0 0
Paraguay 0 2 0 0
Russia 1 2 0 0
South Africa 3 2 0 50
Sudan 4 2 0 0
Tunisia 0 2 0 0
United Arab Emirates 2 2 0 0
Uruguay 1 2 0 0
Afghanistan 0 1 0 0
Algeria 0 1 0 0
Armenia 1 1 0 0
Costa Rica 9 1 11.1 0
Greenland 2 1 0 100
Luxembourg 2 1 0 100
Macau 1 1 0 0
Senegal 0 1 0 0
Ukraine 0 1 0 0
Bhutan 1 0 0 0
Botswana 1 0 0 0
Bulgaria 2 0 50 0
Cambodia 1 0 0 0
Georgia 3 0 33.3 0
Ivory Coast 1 0 100 0
Lebanon 12 0 0 0
Myanmar 0 0 0 0
Oman 3 0 0 0
Palestine 4 0 0 0
Qatar 3 0 0 0
Sri Lanka 1 0 0 0
Uganda 1 0 0 0
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>#KnightD3 - Exercise Module 5: Scatterplot, transitions and delays</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;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Facebook Government Report 2014</h1>
<p>Government's data requests to Facebook and % of requests in which Facebook was required by law to disclose at least some data in 2014. Source: <a href="https://govtrequests.facebook.com/" target="_blank">Facebook</a>, 2014</p>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return d + "%";
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("FacebookGovReport20132014.csv", function(data) {
xScale.domain([
d3.min(data, function(d) {
return +d.year2014;
}),
d3.max(data, function(d) {
return +d.year2014;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.dataProduced2014;
}),
d3.min(data, function(d) {
return +d.dataProduced2014;
})
]);
var circles = svg.selectAll("circle")
.data(data.filter(function(d) {return d.year2014 > 20;}))
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.year2014);
})
.attr("cy", function(d) {
return yScale(d.dataProduced2014);
})
.attr("r", 0.1)
.attr("fill", "steelblue")
.append("title")
.text(function(d) {
return d.year2014 + " " + d.country + "'s Government requests to Facebook, and for " + d.dataProduced2014 + "% of requests Facebook was required by law to disclose some data";
});
circles.sort(function(a, b) {
return d3.ascending(+a.year2014, +b.year2014);
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(2000)
.attr("r", 5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment