Skip to content

Instantly share code, notes, and snippets.

@jadiehm
Last active October 7, 2015 20:07
Show Gist options
  • Save jadiehm/60dd05607af9e978d308 to your computer and use it in GitHub Desktop.
Save jadiehm/60dd05607af9e978d308 to your computer and use it in GitHub Desktop.
Fade in scatterplot
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
<!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