Skip to content

Instantly share code, notes, and snippets.

@emagee

emagee/chocolate_imports_1989-2014.csv

Created April 24, 2015 15:34
Show Gist options
  • Save emagee/e5d6ed0723e18c8be021 to your computer and use it in GitHub Desktop.
Save emagee/e5d6ed0723e18c8be021 to your computer and use it in GitHub Desktop.
Download ZIP
mod 6 test
Raw
chocolate_imports_1989-2014.csv
Source 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
Canada 100 115 127 151 164 178 222 262 316 348 346 390 456 525 705 721 712 709 726 758 647 872 941 989 1046 1177
Mexico 16 23 12 10 17 15 25 26 27 23 35 34 37 54 73 89 102 131 144 215 355 454 533 515 499 478
Indonesia 4 12 16 17 18 20 47 62 97 62 57 44 47 50 60 62 68 64 83 139 100 122 166 157 160 251
Malaysia 22 46 51 55 30 38 43 42 69 66 57 43 47 38 90 110 112 108 121 256 242 308 278 148 134 185
Cote d'Ivoire 37 35 33 28 23 31 30 26 23 39 30 24 13 30 60 62 78 79 67 91 136 176 129 154 146 179
Germany 18 17 18 22 24 21 25 29 29 29 30 40 54 52 58 53 58 64 82 78 79 150 166 182 174 178
Netherlands 71 80 53 54 66 67 66 67 73 75 71 79 101 124 175 163 134 122 107 132 163 250 297 267 202 169
Belgium-Luxembourg 19 24 22 23 25 23 25 27 35 40 51 48 55 50 61 70 76 89 103 96 80 93 115 120 124 131
France 7 6 7 9 9 11 12 11 15 17 26 21 24 31 42 46 47 55 61 56 52 71 73 63 64 62
Switzerland 19 21 17 19 17 20 22 23 21 26 28 22 22 25 30 37 44 52 64 67 57 51 60 50 57 61
Brazil 115 125 140 127 111 66 40 49 33 39 23 38 41 46 123 120 147 147 111 117 59 70 73 50 24 54
Italy 15 12 10 13 14 15 23 27 28 28 12 11 15 15 17 18 25 30 30 39 26 30 39 38 47 46
Ireland 5 7 7 7 7 7 4 5 7 9 11 10 13 14 12 15 21 29 23 30 24 13 25 30 29 37
Spain 2 3 2 1 2 3 3 3 4 3 4 5 5 10 16 15 13 13 21 18 17 39 55 63 52 36
India 1 2 - - - 1 1 - 1 - - - - - - - 1 1 1 4 4 7 4 3 7 36
Peru 13 11 13 8 6 4 - 1 13 11 11 9 5 4 3 4 4 8 5 14 17 8 15 11 23 29
United Kingdom 21 27 18 23 25 28 33 32 44 50 56 63 59 61 58 61 54 48 47 51 32 30 19 30 31 24
Singapore 18 26 17 24 14 23 23 19 18 34 14 18 11 17 26 13 17 36 59 67 61 57 53 28 22 24
Ecuador 27 42 42 27 21 20 22 30 41 17 18 22 12 5 14 13 10 3 2 22 12 10 12 7 18 21
Colombia 5 9 9 5 5 5 3 6 11 6 9 4 8 6 7 10 10 4 7 13 10 13 10 7 10 21
Sweden 3 2 2 3 2 3 3 3 3 3 3 3 3 4 4 4 5 5 5 5 6 11 22 9 12 17
Austria 1 1 - - - - - 1 1 1 2 - 4 7 5 6 7 6 6 8 8 10 12 12 11 13
Israel 3 3 2 3 4 2 3 5 6 6 5 5 8 4 5 5 6 7 7 8 8 12 12 14 10 12
Philippines 11 17 15 9 5 4 5 6 5 4 3 1 2 2 4 3 2 3 2 5 2 2 2 3 10 12
Cameroon 8 6 2 1 1 1 2 2 1 1 1 4 1 14 18 13 16 15 10 6 11 31 36 34 21 12
China 9 12 13 21 30 24 24 36 49 33 21 17 11 10 13 22 42 48 41 66 12 7 5 7 11 12
Dominican Republic 5 5 4 3 4 4 5 5 7 7 4 4 3 3 5 7 7 6 4 10 7 6 6 4 6 11
Denmark 1 1 1 1 1 1 1 0 1 1 1 3 3 4 5 5 6 5 5 4 3 2 3 3 3 7
Venezuela 2 2 1 2 2 2 2 3 3 2 1 1 1 2 3 4 3 2 2 3 2 2 2 1 5 5
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>US Imports of Chocolate</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: #FFFFFD;
font-family: helvetica, sans-serif;
max-width: 800px;
}
svg {
position: absolute;
left: 0px;
top: 120px;
margin: 12px 0 6px 12px;
}
.graphBlock {
border-radius: 15px;
}
#textBlock {
padding: 1px 10px 8px; 10px;
margin: 1px 6px 0px 6px;
position: absolute;
left: 118px;
top: 150px;
width: 270px;
border: 1px solid burlywood;
background-color: oldlace;
z-index: 30;
/*visibility: hidden;*/
}
#innerTextBlock{
margin-left: 0px;
margin-top: 24px;
width: 592px;
padding: 0px 15px 9px 15px;
border: 1px dotted darkkhaki;
background-color: oldlace;
}
.title {
position: absolute;
left: 5px;
top: 65px;
height: 20px;
line-height: 125%;
font-size:17px;
font-weight: bold;
color: sienna;
margin: 34px 0 10px 98px;
width: 855px;
}
.subtitle {
font-size: 14px;
width: 855px;
}
h1 {
margin: 24px 6px 4px 6px;
font-weight: bold;
padding-left: 8px;
padding-bottom: 2px;
font-size: 20px;
border-bottom: 3px solid darkgoldenrod;
color: sienna;
width: 855px;
}
h2 {
margin: 24px 0 0 0;
font-weight: bold;
font-size: 20px;
color: sienna;
width: 855px;
}
h3 {
color:sienna;
font-size: 13px;
line-height: 120%;
margin: 8px 0 0px 0;
padding-top:3px;
}
.intro {
font-size: 15px;
font-weight: bold;
color: black;
width: 855px;
margin-top: 2px;
margin-left: 6px;
padding-left: 8px;
}
.sidenote {
line-height: 125%;
font-size:12px;
margin: 3px 0 0px 0px;
}
.source {
position: absolute;
top: 935px;
left: 616px;
padding: 0 40px 0 0;
font-size: 11px;
color: black;
font-style: italic;
text-align: right;
margin-top: -5px;
line-height: 130%;
}
a {
text-decoration: none;
color: sienna;
}
.axis path,
.axis line {
fill: none;
stroke: darkkhaki;
stroke-dasharray:1, 2;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
.label {
fill: sienna;
font-size: 13px;
}
.noBold {
font-weight: normal;
}
/*
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
*/
g path {
opacity: 0.6;
}
g.canada path {
stroke: sienna;
stroke-width: 2;
opacity: 1;
}
g.mexico path {
stroke: darkolivegreen;
stroke-width: 2;
opacity: 1;
}
g.netherlands path {
stroke: darkslateblue;
stroke-width: 2;
opacity: 1;
}
g.brazil path {
stroke: crimson;
stroke-width: 2;
opacity: 1;
}
g.malaysia path {
stroke: goldenrod;
stroke-width: 2;
opacity: 1;
}
g.indonesia path {
stroke: steelblue;
stroke-width: 2;
opacity: 1;
}
g path:hover {
stroke: black;
stroke-width: 3;
}
</style>
</head>
<body>
<header>
<h1>Canada continues to be the major exporter of chocolate to the United States.</h1>
<p class="intro">Mexico is a distant second; once-mighty Brazil, Netherlands, and other countries are no longer big players.<p>
</header>
<p class="title">Import values of chocolate entering US ports from selected countries, 1989&ndash;2014<br /><span class="noBold subtitle">Hover over the greyed-out lines to see what some of the other chocolate-exporting countries are.</span></p>
<div id="textBlock">
<h3>This chart represents mostly wholesale chocolate for the food-service and food-manufacturing industries.</h3>
<p class="sidenote">Here &ldquo;chocolate&rdquo; comprises chocolate bars and slabs weighing more than two kilograms each, cocoa paste, cocoa butter, and cocoa powder. Popular sweets such as Mars Bars, Kit Kats, and Hershey's Kisses are <em>not</em> included in the data. </p>
<h3>The power of NAFTA</h3>
<p class="sidenote">The USDA says that &ldquo;North American Free Trade Agreement partners Canada and Mexico are not only the main destinations for US exports but also the main suppliers of chocolate candy to the US market.&rdquo; </p>
<p class="sidenote">But does that doesn't necessarily mean that Canada's and Mexico's stronger presence is <em>because</em> of NAFTA&mdash;does it? (NAFTA was passed in December 1993.) </p>
</div>
<svg class="graphBlock">
<p class="source">Values adjusted for inflation. <br />
Source: USDA, <a href ="http://www.fas.usda.gov/gats"">www.fas.usda.gov/gats</a>
<script type="text/javascript">
//Dimensions and padding
var w = 870;
var h = 800;
var padding = [ 20, 80, 50, 90 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ 0, w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
/*var sideScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.15); */
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(-(h-padding[0]-padding[2]))
.outerTickSize(0)
.tickPadding(6)
.ticks(16)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize(-(w-padding[3]-padding[1]))
.outerTickSize(0)
.tickPadding(6);
var svg = d3.select("svg")
.attr("width", w)
.attr("height", h);
var naftaLine = svg.append("line")
.attr("x1", 134.98466761581426 + padding[3])
.attr("y1", 700 + padding[2])
.attr("x2", 134.98466761581426 + padding[3])
.attr("y2", padding[0])
.attr("stroke-width", 1)
.attr("stroke", "peru")
.style("opacity", "0.8");
var recessionArea = svg.append("rect")
.attr("x", 527 + padding[3])
.attr("y", padding[0])
.attr("width", 44)
.attr("height", 730)
.attr("fill", "wheat")
.style("opacity", "0.4");
/*var referenceLabelNafta = svg.append("text")
.attr("x", 236)
.attr("y", 375)
.text("<-- NAFTA")
.attr("font-family", "Helvetica, sans-serif")
.attr("font-size", "14px")
.attr("fill", "dimgray"); */
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year)) + padding[3];
})
.y(function(d) {
return yScale(+d.amount);
})
.interpolate("monotone");
//Load data
d3.csv("chocolate_imports_1989-2014-2.csv", function(data) {
//Data is loaded in, but we need to restructure it.
//Remember, each line requires an array of x/y pairs;
//that is, an array of arrays, like so:
//
// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
//
//We, however, are using 'year' as x and 'amount' as y.
//We also need to know which country belongs to each
//line, so we will build an array of objects that is
//structured like this:
/*
[
{
country: "Australia",
emissions: [
{ year: 1961, amount: 90589.568 },
{ year: 1962, amount: 94912.961 },
{ year: 1963, amount: 101029.517 },
…
]
},
{
country: "Bermuda",
emissions: [
{ year: 1961, amount: 176.016 },
{ year: 1962, amount: 157.681 },
{ year: 1963, amount: 150.347 },
…
]
},
…
]
*/
//Note that this is an array of objects. Each object
//contains two values, 'country' and 'emissions'.
//The 'emissions' value is itself an array, containing
//more objects, each one holding 'year' and 'amount' values.
//New array with all the years, for referencing later
var years = ["1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
//I only want to use the first ten rows
for (var i = 0; i < 11; i++) {
//Create new object with this country's name and empty array
dataset[i] = {
sourceName: data[i].Source,
exports: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the emissions data array
//for this country
var origValue = data[i][years[j]];
//console.log(origValue);
var adjustRate = 1;
var adjustedValue = origValue * adjustRate;
//console.log(adjustedValue);
if (years[j] == "1989") {
adjustRate = 1.909;
}
if (years[j] == "1990") {
adjustRate = 1.811;
}
if (years[j] == "1991") {
adjustRate = 1.738;
}
if (years[j] == "1992") {
adjustRate = 1.687;
}
if (years[j] == "1993") {
adjustRate = 1.638;
}
if (years[j] == "1994") {
adjustRate = 1.553;
}
if (years[j] == "1995") {
adjustRate = 1.509;
}
if (years[j] == "1996") {
adjustRate = 1.509;
}
if (years[j] == "1997") {
adjustRate = 1.475;
}
if (years[j] == "1998") {
adjustRate = 1.452;
}
if (years[j] == "1999") {
adjustRate = 1.421;
}
if (years[j] == "2000") {
adjustRate = 1.375;
}
if (years[j] == "2001") {
adjustRate = 1.337;
}
if (years[j] == "2002") {
adjustRate = 1.316;
}
if (years[j] == "2003") {
adjustRate = 1.287;
}
if (years[j] == "2004") {
adjustRate = 1.253;
}
if (years[j] == "2005") {
adjustRate = 1.212;
}
if (years[j] == "2006") {
adjustRate = 1.174;
}
if (years[j] == "2007") {
adjustRate = 1.142;
}
if (years[j] == "2008") {
adjustRate = 1.100;
}
if (years[j] == "2009") {
adjustRate = 1.103;
}
if (years[j] == "2010") {
adjustRate = 1.086;
}
if (years[j] == "2011") {
adjustRate = 1.052;
}
if (years[j] == "2012") {
adjustRate = 1.031;
}
if (years[j] == "2013") {
adjustRate = 1.016;
}
adjustedValue = origValue * adjustRate;
dataset[i].exports.push({
year: years[j],
amount: adjustedValue
});
}
}
}
//Uncomment to log the original data to the console
// console.log(data);
//Uncomment to log the newly restructured dataset to the console
// console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.exports, function(d) {
return +d.amount * 1.01;
});
}),
0
]);
//sideScale.domain(data.map(function(d) { return d.Source; } ));
//Make a group for each country
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("class", function(d){
if (d.sourceName == "Canada") {
return "canada";
}
if (d.sourceName == "Mexico") {
return "mexico";
}
if (d.sourceName == "Netherlands") {
return "netherlands";
}
if (d.sourceName == "Brazil") {
return "brazil";
}
if (d.sourceName == "Malaysia") {
return "malaysia";
}
if (d.sourceName == "Indonesia") {
return "indonesia";
}
})
;
//Append a title with the country name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.sourceName;
});
//Within each group, create a new line/path,
//binding just the emissions data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.exports ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "lightgray")
.attr("stroke-width", 2);
//Axes
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);
svg.append("text")
.attr("class", "label")
.attr("y", (h - padding[2]/2))
.attr("x", w/2)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Year");
svg.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", padding[3]-60)
.attr("x",0 - (h/2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Value of imported chocolate, in millions of US dollars");
var referenceLabelNafta = svg.append("foreignObject")
.attr("x", 220)
.attr("y", 375)
.attr("width", 120)
.attr("height", 50)
.append("xhtml:body")
.style("font", "12px Helvetica, sans-serif")
.style("color", "darkred")
.html("<p>&larr; NAFTA passed</p>");
var referenceLabelRecession = svg.append("foreignObject")
.attr("x", 460)
.attr("y", 375)
.attr("width", 160)
.attr("height", 100)
.append("xhtml:body")
.style("font", "12px Helvetica, sans-serif")
.style("color", "darkred")
.style("text-align", "right")
.html("<p>The Great Recession &rarr; </p>");
// Borrowing Ruben V's code for data labels. Thanks, Ruben!!!
var datalabel = svg.selectAll(".lineLabel")
.data(dataset.filter(function(d) {
console.log(d.sourceName);
return (d.sourceName == "Canada" ||
d.sourceName == "Mexico" ||
d.sourceName == "Netherlands" ||
d.sourceName == "Brazil" ||
d.sourceName == "Malaysia" ||
d.sourceName == "Indonesia");
}))
.enter()
.append("text")
.attr("class", "lineLabel");
datalabel.attr("x", [w - padding[1] - padding[3] + 95])
.attr("y",(function(d) {
return yScale( d.exports[25].amount ) + 2; // year [25] -> 2014
}))
.attr("fill", "black")
.attr("font-size", "11px")
.attr("font-family", "Helvetica, sans-serif")
.text(function(d) {
return d.sourceName;
});
});
//End USA data load function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment