emagee/README.md

## README.md

      
    Raw
  

              README.md
            
          
    PROCESS NOTES

Research

Why, indeed, are Canada and Mexico  the chief exporters of chocolate to the United States, when quite different countries come to mind when we think of cocoa, cacao, and chocolate? When I started searching for this information, I readily came across the USDA article "Processed Product Spotlight: Chocolate Candy". Though this document reminded me of the existence of NAFTA, it did not directly claim that NAFTA was the reason for the high volume of Canadian and Mexican chocolate exports to the United States. But I had no clue how to proceed with my research. I would love to know, for example, where all this imported chocolate initially goes and what it's mostly used for.
Graphic design

In the spirit of the newspaper style guides made available this week (Thank you, Alberto!), I made last week's design less blocky and tried not to overstyle anything. To that end, I opted out of superfluous (but tempting) hover-crafting this week.
Web design

I'm learning responsive web design, so I'm trying to keep my use of absolute positioning to a minimum. But I couldn't help but rely on it to complete this exercise. Is there really a way to avoid absolute positioning when you're working with SVG, especially SVG text? It's all pixels, after all!
LESSONS LEARNED

Links

Appending an <a> element really does work when you're trying to add a link to SVG text.
Markdown

This is my first Markdown document. So far it seems that MacDown is a darned good Markdown editor, though I've only had a few minutes' experience with it so far.

  
## cocoa2_3-final.csv

          
            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

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Canadian Cacao?</title>
    <style>
        body {
            background-color: ivory;
            font-family: helvetica, sans-serif;
        }

        svg {
            margin: 12px 0 12px 12px;
        }


        .graphBlock {
            position: absolute;
            top: 110px;
        }


       #textBlock {
            position: absolute;
            top: 145px;
            left: 590px;
            border-left: 1px solid sienna;
            padding: 0px 12px 0px 16px;
        }

        .hangingindent {
            padding-left: 1px ;
            text-indent: -8px ;
        }

        .bar {
            fill: sienna;
        }

        h1 {
        	margin: 24px 0 0 32px;
        	padding-bottom: 2px;
        	font-weight: bold;
        	font-size: 30px;
        	border-bottom: 4px solid sienna;
        	color: sienna;
        }


        h2 {
        	margin: 24px 0 0 32px;
        	font-weight: bold;
        	font-size: 20px;
        	color: sienna;
        	min-width: 600px;
        }

        h3 {
            color:sienna;
            font-size: 16px;
            margin-bottom: -6px;
            margin-top: 0px;
            padding-top: 3px;
        }

        .intro {
            padding: 0;
            margin: 4px 0 0px 32px;
            font-size: 13px;
            color: black;
            min-width: 600px;
        }

        .sidenote {
            line-height: 120%;
            font-size:13px;
            margin-top: 10px;
        }

        .source {
            padding: 0;
            margin: 0px 0px 0px 32px;
            font-size: 11px;
            color: black;
            font-style: italic;
            position: absolute;
            top: 380px;
        }

        a {
            text-decoration: none;
            color: sienna;
        }

        .axis path,
			.axis line {
				fill: none;
				stroke: #ccc;
				shape-rendering: crispEdges;
			}

		.axis text {
				font-family: sans-serif;
				font-size: 10px;
		}

		.y.axis path,
		.y.axis line {
				opacity: 0;
		}

		.y.axis text {
			 fill: black;
			 font-size: 12px;
		}

    </style>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
    <header>
        <h1>Canadian Cacao?</h1>
    </header>

    <div id="textBlock">
        <h3 class="hangingindent">&ldquo;Chocolate&rdquo; defined</h3>
        <p class="sidenote">For this dataset, &ldquo;chocolate&rdquo; comprises preparations with sugar, milk, or other fats in bulk form (block, slab, or bar); and sweetened cocoa powder. </p>
        <h3>The power of NAFTA</h3>
        <p class="sidenote">The US Department of Agriculture 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 that doesn't necessarily mean that Canada's and Mexico's strong presence is <em>because</em> of NAFTA &mdash; does it? </p>
    </div>

    <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 = 600;
		var h = 250;
		var padding = [ 15, 60, 25, 110 ];  //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.15);


			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

			var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");

        d3.select("body").append("h2").attr("style","intro").text("US chocolate imports, 2013, in millions of dollars");

        d3.select("body").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", w)
						.attr("height", h)
						.attr("class", "graphBlock");


        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"]);
            });


            widthScale.domain([ 0, d3.max(data, function(d) {
					return +d[2013];
				}) ]);

            heightScale.domain(data.map(function(d) { return d.Source; } ));

            var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

			rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.Source);
					})
					.attr("width", function(d) {
						return widthScale(d[2013]);
					})
					.attr("height", heightScale.rangeBand())
					.attr("class", "bar")
					.append("title")
					.text(function (d) {
                    var dollarAmount = d[2013] * 1000000;
                    dollarAmount = addCommas(dollarAmount);
                    return  "$" + dollarAmount + " worth of chocolate was imported from " + d["Source"] + ".";
					});


				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);

			});


		 // 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, ")
     	.append("a")
     	.attr("href", "http://www.fas.usda.gov/gats")
     	.append("span")
     	.text("www.fas.usda.gov/gats");


    </script>
</body>
</html>
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
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Canadian Cacao?</title>
	<style>
	body {
	background-color: ivory;
	font-family: helvetica, sans-serif;
	}

	svg {
	margin: 12px 0 12px 12px;
	}


	.graphBlock {
	position: absolute;
	top: 110px;
	}


	#textBlock {
	position: absolute;
	top: 145px;
	left: 590px;
	border-left: 1px solid sienna;
	padding: 0px 12px 0px 16px;
	}

	.hangingindent {
	padding-left: 1px ;
	text-indent: -8px ;
	}

	.bar {
	fill: sienna;
	}

	h1 {
	margin: 24px 0 0 32px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 30px;
	border-bottom: 4px solid sienna;
	color: sienna;
	}


	h2 {
	margin: 24px 0 0 32px;
	font-weight: bold;
	font-size: 20px;
	color: sienna;
	min-width: 600px;
	}

	h3 {
	color:sienna;
	font-size: 16px;
	margin-bottom: -6px;
	margin-top: 0px;
	padding-top: 3px;
	}

	.intro {
	padding: 0;
	margin: 4px 0 0px 32px;
	font-size: 13px;
	color: black;
	min-width: 600px;
	}

	.sidenote {
	line-height: 120%;
	font-size:13px;
	margin-top: 10px;
	}

	.source {
	padding: 0;
	margin: 0px 0px 0px 32px;
	font-size: 11px;
	color: black;
	font-style: italic;
	position: absolute;
	top: 380px;
	}

	a {
	text-decoration: none;
	color: sienna;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 10px;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	.y.axis text {
	fill: black;
	font-size: 12px;
	}

	</style>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>

	<body>
	<header>
	<h1>Canadian Cacao?</h1>
	</header>

	<div id="textBlock">
	<h3 class="hangingindent">“Chocolate” defined</h3>
	<p class="sidenote">For this dataset, “chocolate” comprises preparations with sugar, milk, or other fats in bulk form (block, slab, or bar); and sweetened cocoa powder. </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 that doesn't necessarily mean that Canada's and Mexico's strong presence is <em>because</em> of NAFTA — does it? </p>
	</div>

	<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 = 600;
	var h = 250;
	var padding = [ 15, 60, 25, 110 ]; //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.15);


	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");

	d3.select("body").append("h2").attr("style","intro").text("US chocolate imports, 2013, in millions of dollars");

	d3.select("body").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", w)
	.attr("height", h)
	.attr("class", "graphBlock");


	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"]);
	});


	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d[2013];
	}) ]);

	heightScale.domain(data.map(function(d) { return d.Source; } ));

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.Source);
	})
	.attr("width", function(d) {
	return widthScale(d[2013]);
	})
	.attr("height", heightScale.rangeBand())
	.attr("class", "bar")
	.append("title")
	.text(function (d) {
	var dollarAmount = d[2013] * 1000000;
	dollarAmount = addCommas(dollarAmount);
	return "$" + dollarAmount + " worth of chocolate was imported from " + d["Source"] + ".";
	});


	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);

	});




	// 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, ")
	.append("a")
	.attr("href", "http://www.fas.usda.gov/gats")
	.append("span")
	.text("www.fas.usda.gov/gats");


	</script>
	</body>
	</html>