D3 Examples - 20b9c13e833709b8ca1c

xxxxxxxxxx
 
<!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>
    