|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
|
|
<meta charset="utf-8" /> |
|
<title>U.S. imports of chocolate</title> |
|
<style> |
|
body { |
|
background-color: #FFFFFD; |
|
font-family: helvetica, sans-serif; |
|
max-width: 800px; |
|
} |
|
|
|
svg { |
|
margin: 12px 0 6px 12px; |
|
} |
|
|
|
|
|
.graphBlock { |
|
border-radius: 15px; |
|
} |
|
|
|
|
|
#textBlock { |
|
padding: 10px 10px 0 10px; |
|
margin: 1px 6px 0px 6px; |
|
} |
|
|
|
#innerTextBlock{ |
|
margin-left: 94px; |
|
margin-top: 24px; |
|
width: 592px; |
|
padding: 0px 15px 9px 15px; |
|
border: 1px dotted darkkhaki; |
|
background-color: oldlace; |
|
} |
|
|
|
.hangingindent { |
|
padding-left: 1px ; |
|
text-indent: -8px ; |
|
} |
|
|
|
|
|
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; |
|
} |
|
|
|
h2 { |
|
margin: 24px 0 0 0; |
|
font-weight: bold; |
|
font-size: 20px; |
|
color: sienna; |
|
min-width: 600px; |
|
} |
|
|
|
h3 { |
|
color:sienna; |
|
font-size: 14px; |
|
line-height: 125%; |
|
margin: 8px 0 0px 0; |
|
padding-top:3px; |
|
} |
|
|
|
.intro { |
|
font-size: 15px; |
|
font-weight: bold; |
|
color: black; |
|
min-width: 600px; |
|
margin-top: -6px; |
|
} |
|
|
|
.sidenote { |
|
line-height: 125%; |
|
font-size:12px; |
|
margin: 3px 0 0px 0px; |
|
} |
|
|
|
.title { |
|
line-height: 125%; |
|
font-size:14px; |
|
font-weight: bold; |
|
color: sienna; |
|
margin: 34px 0 -10px 98px; |
|
} |
|
|
|
|
|
.source { |
|
padding: 0 40px 0 0; |
|
font-size: 11px; |
|
color: black; |
|
font-style: italic; |
|
text-align: right; |
|
margin-top: -5px; |
|
|
|
} |
|
|
|
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; |
|
} |
|
|
|
</style> |
|
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
</head> |
|
<body> |
|
|
|
<header> |
|
<h1>Canada continues to be the major exporter of chocolate to the United States.</h1> |
|
</header> |
|
|
|
<div id="textBlock"> |
|
<p class="intro">Mexico is a distant second; once-mighty Brazil and other countries are no longer big players.<p> |
|
|
|
<div id="innerTextBlock"> |
|
|
|
<h3>The charted values cover mostly wholesale chocolate for the food-service and food-manufacturing industries.</h3> |
|
<p class="sidenote">Here “chocolate” 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 US Department of Agriculture says that “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.” </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—does it? NAFTA took effect in 1994; perhaps a line chart covering the years 1989 through 2014 would reveal some clues. Stay tuned!</p> |
|
</div> <!-- end innerTextBlock--> |
|
|
|
<p class="title">Import values of chocolate entering US ports and their origin of shipment, 1989 and 2014 |
|
<br /><span class="noBold">(1989 values were adjusted for inflation.)</span></p> |
|
</div> |
|
<svg class="graphBlock"> |
|
<p class="source">Source: USDA, <a href ="http://www.fas.usda.gov/gats"">www.fas.usda.gov/gats</a> |
|
|
|
<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; |
|
} |
|
|
|
|
|
var w = 800; |
|
var h = 550; |
|
var padding = [ 10, 60, 60, 100 ]; //Top, right, bottom, left |
|
|
|
var xScale = d3.scale.linear() |
|
.range([ 0, w - padding[1] - padding[3] ]); |
|
|
|
var yScale = d3.scale.linear() |
|
.range([ padding[0], h - padding[2] ]); |
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.tickSize(-(h-padding[0]-padding[2])) |
|
.outerTickSize(0) |
|
.tickPadding(6) |
|
.orient("bottom") |
|
.ticks(15); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.tickSize(-(w-padding[3]-padding[1])) |
|
.outerTickSize(0) |
|
.tickPadding(6) |
|
.orient("left") |
|
.ticks(12); |
|
|
|
var svg = d3.select("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
|
|
|
|
d3.csv("chocolate_imports_1989-2014.csv", function(data) { |
|
|
|
/** data.sort(function(a,b) { |
|
// thank you for the hint about forcing the strings! |
|
return d3.ascending(+a["2014"], +b["2014"]); |
|
}); **/ |
|
|
|
|
|
xScale.domain([ 0, d3.max(data, function(d) { |
|
return +d[2014] + (+d[2014])*0.05; |
|
}) ]); |
|
|
|
yScale.domain([ |
|
d3.max(data, function(d) { |
|
return +d[1989] * 1.9340 + (+d[1989])*0.05; |
|
}), 0 |
|
]); |
|
|
|
var circles = svg.selectAll("circle") |
|
.data(data) |
|
.enter() |
|
.append("circle"); |
|
|
|
circles.attr("cx", function(d) { |
|
return xScale(+d[2014]) + padding[3]; |
|
}) |
|
.attr("cy", function(d) { |
|
return yScale(+d[1989] * 1.93) ; |
|
}) |
|
.attr("r", 625) |
|
.style("opacity", 0.6) |
|
.style("fill", "oldlace") |
|
.attr("class", "bar") |
|
.append("title") |
|
.text(function (d) { |
|
var dollarAmount1989 = d[1989] * 1.9340 * 1000000; |
|
dollarAmount1989 = addCommas(dollarAmount1989); |
|
var dollarAmount2014 = d[2014] * 1000000; |
|
dollarAmount2014 = addCommas(dollarAmount2014); |
|
var country = d.Source; |
|
var countryCaps = country.toUpperCase(); |
|
return "$" + dollarAmount1989 + " worth of chocolate was imported from " |
|
+ countryCaps + " in 1989; " + "$" + dollarAmount2014 |
|
+ " was imported in 2014."; |
|
}); |
|
|
|
circles.transition() |
|
.delay(800) |
|
.duration(2000) |
|
.attr("r", 4) |
|
.style("opacity", 0.7) |
|
.style("fill", "sienna"); |
|
|
|
var labels = svg.selectAll("text") |
|
.data(data) |
|
.enter() |
|
.append("text"); |
|
|
|
labels.attr("x" , function(d) { |
|
return xScale(+d[2014]+ padding[3] +110); |
|
}) |
|
.attr("y" , function(d) { |
|
return yScale(+d[1989] * 1.9340 - 2 ); |
|
}) |
|
.text (function(d) { |
|
if (+d[2014] > 140 || +d[1989] > 30) { |
|
return d["Source"]; |
|
} |
|
}) |
|
.attr("opacity", 0) |
|
.attr("fill", "oldlace") |
|
.attr("text-anchor", "start") |
|
.attr("font-size", "12px") |
|
.transition() |
|
.delay(1300) |
|
.duration(3500) |
|
.attr("opacity", 1) |
|
.attr("fill", "saddlebrown"); |
|
|
|
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("Value of imported chocolate, in millions, 2014"); |
|
|
|
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, 1989"); |
|
|
|
}); |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |
