Skip to content

Instantly share code, notes, and snippets.

@pierandrea
Last active August 29, 2015 14:19
Show Gist options
  • Save pierandrea/7a36c943fc080c246919 to your computer and use it in GitHub Desktop.
Save pierandrea/7a36c943fc080c246919 to your computer and use it in GitHub Desktop.
#KnightD3 - Exercise Module 4: Adding scales and axes
country year2013 year2014
United States 12598 14274
India 3598 5473
United Kingdom 1906 2366
Italy 1699 1774
Germany 1687 2132
France 1661 2094
Brazil 1165 1212
Australia 603 829
Spain 404 500
Argentina 278 482
Chile 230 288
Poland 220 305
Taiwan 193 204
Canada 174 279
Belgium 154 239
Portugal 148 305
Singapore 141 177
Israel 129 232
Turkey 129 165
Pakistan 126 100
Mexico 125 260
Greece 115 117
Sweden 89 213
Malta 81 93
New Zealand 80 139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>#KnightD3 - Exercise Module 4: Adding scales and axes</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;
}
rect:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<h1>Facebook Government Report</h1>
<p>Top 25 countries around the world for data requests to Facebook in 2013. Source: <a href="https://govtrequests.facebook.com/" target="_blank">Facebook</a>, 2013</p>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 30, 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("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("FacebookGovRep.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.year2013, +b.year2013);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.year2013;
}) ]);
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", function(d) {
return widthScale(d.year2013);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "steelblue")
.append("title")
.text(function(d) {
return d.year2013 + " " + d.country + "'s Government requests to Facebook";
});
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] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment