20b9c13e833709b8ca1c

<!DOCTYPE html>
<html lang="en">
	<head>
		  <meta charset="utf-8">
		  <title>Baltic Container Traffic</title>
            <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	       <style type="text/css">
			
			body {
				background-color: white;
			}

svg {
				background-color: white;
			}
            </style>
    </head>
    <body>

<p>  
        	  	 <svg width="220" height="190">
                   
                    <polygon points="62,1 147,43 105,64 21,21" fill="indianred" />
                    <polygon points="21,21 21,72 105,114 105,64 " fill="darkred" />
                    <polygon points="105,114 105,64 147,43 147,93 " fill="red" />
                    <text x="1" y="130" fill="indigo" font-size="14" font-weight="bold" 
                          font-family="Helvetica">TRANSPORT OF CONTAINERS </text>
                    <text x="1" y="150" fill="indigo" font-size="14" font-weight="bold" 
                          font-family="Helvetica">BALTIC SEA COUNTRIES 2013 </text>
                    <text x="1" y="170" fill="indigo" font-size="10" font-weight="bold" 
                          font-family="Helvetica">volume in TEU carried by sea </text>
                    <text x="1" y="182" fill="indigo" font-size="10" font-weight="bold" 
                          font-family="Helvetica">OECD and national statistics </text>
 
 
                </svg>

</p>  
        <p>
                <script type="text/javascript">

var svg = d3.select("body")
						.append("svg")
						.attr("width", 400)
						.attr("height", 100);

d3.csv
                     ("balticcontainers2.csv", function(data) 
                         {data.sort(function(a, b) {return d3.descending(+a["2013"], +b["2013"]);});

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

rects.attr("x", 0)
                               .attr(
                                    "y", function(d, i) 
                                     {return i * 10;}
                                    )
                               .attr("width", function(d) 
                                        {return d["2013"] / 100000 * 1.33;}
                                    )
                               .attr("height", 8)
                                .attr("fill", "indianred")
                               .append("title")
                               .text(function(d) 
                                        {return d.Country + "'s container traffic in 2013 was " + d["2013"] +  " TEU";}
                                    );

}
                        );

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

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

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