Last active
October 7, 2015 20:07
-
-
Save jadiehm/60dd05607af9e978d308 to your computer and use it in GitHub Desktop.
Fade in scatterplot
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 | dataRequests | userAccounts | dataProduced | contentRestrictions | |
---|---|---|---|---|---|
Afghanistan | 1 | 1 | 0 | 0 | |
Albania | 16 | 34 | 25 | 0 | |
Algeria | 1 | 1 | 0 | 0 | |
Andorra | 3 | 3 | 33 | 0 | |
Argentina | 482 | 708 | 49 | 1 | |
Armenia | 1 | 1 | 0 | 0 | |
Australia | 829 | 933 | 69 | 3 | |
Austria | 46 | 63 | 11 | 0 | |
Bahrain | 3 | 10 | 0 | 0 | |
Bangladesh | 5 | 5 | 0 | 0 | |
Belgium | 239 | 319 | 59 | 1 | |
Bos. & Herzegovina | 5 | 9 | 80 | 0 | |
Brazil | 1212 | 1967 | 34 | 3 | |
Canada | 279 | 355 | 58 | 0 | |
Chile | 288 | 410 | 61 | 0 | |
Colombia | 67 | 106 | 55 | 0 | |
Costa Rica | 1 | 2 | 0 | 0 | |
Croatia | 21 | 28 | 81 | 0 | |
Cyprus | 20 | 26 | 60 | 0 | |
Czech Republic | 22 | 132 | 55 | 0 | |
Denmark | 31 | 33 | 35 | 0 | |
Dominican Republic | 22 | 39 | 41 | 0 | |
Ecuador | 2 | 10 | 0 | 0 | |
Egypt | 5 | 5 | 0 | 0 | |
Estonia | 6 | 7 | 67 | 0 | |
Finland | 18 | 28 | 72 | 0 | |
France | 2094 | 2885 | 42 | 13 | |
Germany | 2132 | 2611 | 34 | 60 | |
Greece | 117 | 142 | 57 | 0 | |
Greenland | 1 | 1 | 100 | 0 | |
Hong Kong | 39 | 51 | 41 | 0 | |
Hungary | 128 | 167 | 34 | 0 | |
India | 5473 | 7281 | 45 | 5832 | |
Indonesia | 5 | 21 | 40 | 0 | |
Ireland | 34 | 34 | 71 | 0 | |
Israel | 232 | 310 | 47 | 15 | |
Italy | 1774 | 2696 | 46 | 1 | |
Japan | 9 | 9 | 11 | 0 | |
Jordan | 3 | 3 | 33 | 0 | |
Kazakhstan | 2 | 5 | 0 | 1 | |
Kenya | 2 | 3 | 0 | 0 | |
Kosovo | 2 | 7 | 50 | 0 | |
Kuwait | 4 | 6 | 0 | 0 | |
Liechtenstein | 2 | 3 | 50 | 0 | |
Lithuania | 12 | 21 | 42 | 0 | |
Luxembourg | 1 | 4 | 100 | 0 | |
Macau | 1 | 1 | 0 | 0 | |
Macedonia | 5 | 8 | 20 | 0 | |
Malaysia | 17 | 22 | 24 | 0 | |
Maldives | 3 | 3 | 67 | 0 | |
Malta | 93 | 112 | 71 | 0 | |
Mexico | 260 | 412 | 62 | 0 | |
Moldova | 4 | 4 | 25 | 0 | |
Montenegro | 4 | 4 | 25 | 0 | |
Myanmar | 0 | 0 | 0 | 5 | |
Nepal | 2 | 4 | 0 | 0 | |
Netherlands | 76 | 84 | 64 | 0 | |
New Zealand | 139 | 151 | 63 | 1 | |
Norway | 21 | 22 | 48 | 5 | |
Pakistan | 100 | 152 | 42 | 54 | |
Paraguay | 2 | 2 | 0 | 0 | |
Peru | 10 | 20 | 50 | 0 | |
Philippines | 7 | 27 | 86 | 0 | |
Poland | 305 | 349 | 30 | 0 | |
Portugal | 305 | 365 | 35 | 0 | |
Romania | 14 | 35 | 43 | 0 | |
Russia | 2 | 0 | 0 | 55 | |
Senegal | 1 | 1 | 0 | 0 | |
Serbia | 15 | 25 | 60 | 0 | |
Singapore | 177 | 194 | 75 | 0 | |
Slovakia | 5 | 5 | 20 | 0 | |
Slovenia | 3 | 3 | 33 | 0 | |
South Africa | 2 | 2 | 50 | 0 | |
South Korea | 14 | 29 | 43 | 0 | |
Spain | 500 | 1041 | 37 | 0 | |
Sudan | 2 | 2 | 0 | 0 | |
Sweden | 213 | 289 | 76 | 0 | |
Switzerland | 39 | 137 | 10 | 0 | |
Taiwan | 204 | 327 | 56 | 0 | |
Thailand | 3 | 3 | 0 | 30 | |
Tunisia | 2 | 2 | 0 | 0 | |
Turkey | 165 | 278 | 71 | 3624 | |
Ukraine | 1 | 1 | 0 | 0 | |
United Arab Emirates | 2 | 2 | 0 | 0 | |
United Kingdom | 2366 | 2890 | 75 | 3 | |
United States | 14274 | 21731 | 79 | 0 | |
Uruguay | 2 | 2 | 0 | 0 |
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>Facebook Data Requests by Country</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style type="text/css"> | |
h1 { | |
font-family: sans-serif; | |
font-size: 1.5em; | |
margin-bottom:0; | |
} | |
p { | |
font-family: sans-serif; | |
font-size: .75em; | |
color:gray; | |
margin-bottom:0; | |
} | |
svg { | |
background-color: white; | |
} | |
circle:hover { | |
fill: #00664C; | |
opacity: 1; | |
} | |
.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 User Data</h1> | |
<p>Number of requests for data by government officials vs. the percentage of those requests filled (July 2014 – Dec. 2014) | Source: <a href="https://govtrequests.facebook.com/">Facebook</a></p> | |
<script type="text/javascript"> | |
var w = 750; //sets the width variable | |
var h = 400; //sets the height variable | |
var padding = [25, 10, 40, 40]; //top, right, bottom, left | |
var xScale = d3.scale.linear() | |
//.domain([0,15000]) input values | |
.range([padding[3], w - padding[1]]); //pixel values | |
var yScale = d3.scale.linear() | |
//.domain([0,15000]) input values | |
.range([padding[0], h - padding[2]]); //pixel values | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(14); | |
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("FBGovernmentRequests.csv", function(data) { | |
data.sort(function(a, b) { | |
return d3.descending(+a.dataRequests, +b.dataRequests); | |
}); | |
xScale.domain([0, d3.max(data, function(d){ | |
return +d.dataRequests; | |
}) ]); | |
yScale.domain([ | |
d3.max(data, function(d){ | |
return +d.dataProduced; | |
}), | |
0 | |
]); | |
var circles = svg.selectAll("circle") | |
.data(data) | |
.enter() | |
.append("circle"); | |
circles.attr("cx", function(d){ | |
return xScale(d.dataRequests); | |
}) | |
.attr("cy", function(d){ | |
return yScale(d.dataProduced); | |
}) | |
.attr("r", 0.1) | |
.attr("opacity", .4) | |
.attr("fill", "#00CC99") | |
.append("title") | |
.text(function(d) { | |
return d.Country + " requested data from " + d.dataRequests + " users and received " + d.dataProduced + " percent of those requests."; | |
}); | |
circles.sort(function(a, b){ | |
return d3.ascending(+a.dataRequests, +b.dataProduced); | |
}) | |
.transition() //values after transition | |
.delay(function(d, i){ | |
return i * 20; | |
}) | |
.duration(1000) | |
.attr("r", 4.5); | |
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); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment