D3 Examples - Shipping accidents in the Baltic Sea (1989-2013)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    </head>
    <body>
        <svg width="600", height="300">
            <rect x="100" y="100" width="20" height="30" style="fill:grey;"></rect>
            <rect x="100" y="130" width="150" height="70" style="fill:orange"></rect>
            <!--Crash!-->
            <polygon points="400,110 340,300 490,178 310,178 460,298" style="fill: red"></polygon>
            
            <polygon points="100,200 150,300 400,300 450,200" style="fill: orange"></polygon>
            <!--Smoke (kind of)-->
            <path d="M100,100 Q40,5 100,30 T150,3" fill="none" stroke="grey" stroke-width="1"></path>
        </svg>
​
    <p>When I learn to put labels we'll discover who has polluted the most :-)</p>
​
        <script type="text/javascript">
​
        var svg = d3.select("body")
                .append("svg")
                .attr("width", 500)
                .attr("height", 400);
​
​
            //Load in contents of CSV file
            d3.csv("ShippingAccidents_BalticSea_1989_2013.csv", function(data) {
                data.sort(function(a, b) {
                    return d3.descending(+a.Pollu_m3, +b.Pollu_m3);
                });
​
                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.Pollu_m3/10;
                    })
                    .attr("height", 20);
​
            });
​
​
        </script>
​
    </body>
</html>
    