Created
April 3, 2015 02:48
-
-
Save emagee/83e8322d2f00eb92c328 to your computer and use it in GitHub Desktop.
US chocolate imports (and why must this title text be so bloody big?)
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
Source | 1999 | 2000 | 2001 | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Canada | 333.2 | 377.7 | 442.8 | 514.0 | 686.7 | 705.4 | 699.2 | 690.0 | 709.9 | 742.8 | 630.5 | 839.6 | 910.6 | 961.7 | 1011.9 | |
Mexico | 27.0 | 29.9 | 33.8 | 49.9 | 65.7 | 79.7 | 99.2 | 124.4 | 141.2 | 213.1 | 347.3 | 430.8 | 511.5 | 499.4 | 484.9 | |
Germany | 28.3 | 37.5 | 53.4 | 50.6 | 50.8 | 43.7 | 49.5 | 59.3 | 76.0 | 69.4 | 65.8 | 89.3 | 111.6 | 132.1 | 150.8 | |
Belgium-Lux. | 45.2 | 45.9 | 52.8 | 48.8 | 59.0 | 67.8 | 73.1 | 86.6 | 99.8 | 87.0 | 76.5 | 86.5 | 111.8 | 116.3 | 120.7 | |
Switzerland | 24.6 | 19.1 | 18.7 | 21.7 | 24.4 | 32.7 | 38.3 | 46.0 | 55.7 | 56.0 | 44.9 | 47.6 | 56.6 | 46.9 | 53.5 | |
Italy | 10.8 | 10.6 | 14.4 | 13.9 | 15.2 | 16.1 | 22.3 | 28.7 | 27.7 | 35.8 | 23.5 | 24.9 | 33.4 | 31.3 | 41.3 | |
France | 18.9 | 18.5 | 20.1 | 21.2 | 24.5 | 28.5 | 33.6 | 41.4 | 43.9 | 41.3 | 34.9 | 36.8 | 34.4 | 35.3 | 38.1 | |
Rest of world | 100.8 | 109.7 | 129.4 | 130.5 | 149.3 | 172.5 | 199.7 | 203.4 | 185.6 | 195.8 | 149.0 | 147.2 | 183.0 | 202.6 | 217.8 |
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>SVG, CSV, ETC</title> | |
<style> | |
body { | |
background-color: burlywood; | |
font-family: helvetica, sans-serif; | |
} | |
svg { | |
background-color: ivory; | |
margin: 12px 0 4px 12px; | |
border-radius: 25px; | |
} | |
.bar { | |
fill: sienna; | |
} | |
h1 { | |
margin: 24px 0 0 32px; | |
font-weight: normal; | |
font-size: 22px; | |
color: sienna; | |
} | |
.intro { | |
padding: 0; | |
margin: 10px 0 0px 1px; | |
font-size: 14px; | |
color: black; | |
} | |
.labels { | |
fill: black; | |
font-size: 12px; | |
text-anchor: end | |
} | |
.values { | |
fill: sienna; | |
font-size: 12px; | |
} | |
.source { | |
width: 630px; | |
margin: 0px 0 0 32px; | |
font-weight: normal; | |
font-style: italic; | |
font-size: 12px; | |
color: black; | |
text-align: right; | |
} | |
</style> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
</head> | |
<body> | |
<script> | |
/* | |
The addCommas function is from http://www.mredkj.com/javascript/nfbasic.html. It's used to format the dollar amounts in the titles/tooltips. | |
*/ | |
function addCommas(nStr) { | |
nStr += ''; | |
x = nStr.split('.'); | |
x1 = x[0]; | |
x2 = x.length > 1 ? '.' + x[1] : ''; | |
var rgx = /(\d+)(\d{3})/; | |
while (rgx.test(x1)) { | |
x1 = x1.replace(rgx, '$1' + ',' + '$2'); | |
} | |
return x1 + x2; | |
} | |
// sizing up display area | |
var margin = {top: 30, right: 0, bottom: 0, left: 100} | |
var width = 780 - margin.left - margin.right; | |
var height = 258 - margin.top - margin.bottom; | |
// adding title and subtitle | |
// did not want to nest subtitle in the title, but too lazy to fix it | |
d3.select("body") | |
.append("h1") | |
.text("US chocolate imports, 2013, in millions of dollars") | |
.append("p") | |
.attr("class", "intro") | |
.text("Import values of chocolate entering US ports and their origin of shipment"); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
// the main event . . . importing and charting the data | |
d3.csv("cocoa2_3-final.csv", function(data) { | |
data.sort(function(a,b) { | |
// thank you for the hint about forcing the strings! | |
return d3.ascending(+a["2013"], +b["2013"]); | |
}); | |
var bars = svg.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect"); | |
bars.attr("x", 110) | |
.attr("y", function(d, i) { | |
return i * 26 + 13; | |
}) | |
.attr ("width", function (d,i) { | |
return d[2013] / 2; | |
}) | |
.attr("height", 20) | |
.attr("class", "bar") | |
.append("title") | |
.text(function (d) { | |
var dollarAmount = d[2013] * 1000000; | |
dollarAmount = addCommas(dollarAmount); | |
return "$" + dollarAmount + " of chocolate was imported from " + d["Source"] + "."; | |
}); | |
// adding labels to the left of the bars | |
svg.selectAll("text") | |
.data(data) | |
.enter() | |
.append("text") | |
.text(function(d){ | |
return d.Source; | |
}) | |
.attr("class", "title") | |
.attr("x", 100) | |
.attr("y", function(d, i){ | |
return i * 26 + 28; | |
}) | |
.attr({ | |
"fill": "black", | |
"font-family": "sans-serif", | |
"font-size": "12px", | |
"text-anchor": "end" | |
}); | |
// adding values to the right of the bars | |
var values = svg.selectAll(".values") | |
.data(data) | |
.enter() | |
.append("text"); | |
values.attr("x", function(d) { | |
return d[2013]/2 + 115; | |
}) | |
.attr("y", function(d, i) { | |
return i * 26 + 28; | |
}) | |
.attr("class","values") | |
.text(function(d) { | |
return d[2013]; | |
}); | |
}); | |
// source line under chart | |
// the commented-out lines were part of an aborted attempt | |
// to try to add a link to the SVG text | |
d3.select("body") | |
.append("p") | |
.attr("class", "source") | |
//.append("a") | |
//.attr("xmlns", "http://www.w3.org/2000/svg") | |
//.attr(":xlink", "http://www.w3.org/1999/xlink") | |
//.attr("version","1.1") | |
.text("Source: USDA, www.fas.usda.gov/gats"); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment