Chocolate bars! And axes!

<!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="d3.v3.js"></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 https://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");

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", "https://www.w3.org/2000/svg")
     	//.attr(":xlink", "https://www.w3.org/1999/xlink")
     	//.attr("version","1.1")
     	.text("Source: USDA, ")
     	.append("a")
     	.attr("href", "https://www.fas.usda.gov/gats")
     	.append("span")
     	.text("www.fas.usda.gov/gats"); 	
            
            
    </script>
</body>
</html>