US chocolate imports (and why must this title text be so bloody big?)

<!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="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <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;
        }

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

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

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js