emagee/cocoa2_3-final.csv

## 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>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>
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>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>