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

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>
        <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <style type="text/css">
            body {
                background-color: rgb(208, 208, 208);
                margin-left: 50px;
                margin-right: 50px;
                margin-bottom: 10px;
                margin-top:10px;
                
            }
​
            #header {
                font-size: 40px;
                font-family: Rockwell, Helvetica;
                text-align: left;
            }
​
            #subheader {
                font-size: 20px;
                font-family: Rockwell, Helvetica;
                text-align: left;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
​
            .y.axis path,
            .y.axis line {
                opacity: 0;
            }
​
            rect:hover {
                fill: orange;
            }
​
        </style>
    </head>
<!--    <body  style="text-align:center;"> -->
<body>
    
    <div id="header">
    Ship accidents are increasing in the Baltic Sea
    </div>
​
    <div id="subheader">
    The number of accidents in the Baltic Sea is increasing dramatically. But this graph doesn't show how serious they are or if any kind of pollution spill occurs in each accident.
    </div>
​
        <script type="text/javascript">
​
        var w = 600;
        var h = 400;
        var padding = [20, 50, 20, 50];
​
        var widthScale = d3.scale.linear()
                            .range ([0, w - padding[1] - padding[3] ]);
​
        var heightScale = d3.scale.ordinal()
                            .rangeRoundBands([ padding[0], h - padding[2] ], .3);
​
        var xAxis = d3.svg.axis()
                    .scale(widthScale)
                    .orient("bottom");
​
        var yAxis = d3.svg.axis()
                    .scale(heightScale)
                    .orient("left");
​
        var tipBar = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .html(function(d) {
                  return "<strong>Accidents:</strong> <span style='color:red'>" + d.NumberOfAccidents + "</span>";
                  });
​
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
        
        svg.call(tipBar);
​
​
        //Load in contents of CSV file
        d3.csv("ShippingAccidents_BalticSea_1989_2013_v2.csv", function(data) {
​
            data.sort(function(a, b) {
                return d3.ascending(+a.NumberOfAccidents, +b.NumberOfAccidents);
            });
​
            widthScale.domain([0, d3.max(data, function(d) {
                return +d.NumberOfAccidents;
            }) ]);
​
            heightScale.domain(data.map(function(d) {return d.Year} ));
​
            var rects = svg.selectAll("rect")
                        .data(data)
                        .enter()
                        .append("rect");
​
            rects.attr("x", padding[3])
                .attr("y", function(d) {
                    return heightScale(d.Year);
                })
                .attr("width", function(d) {
                    return widthScale(d.NumberOfAccidents);
                })
                .attr("height", heightScale.rangeBand())
                .attr("fill", "blue")
                .append("title")
                // .text(function(d) {
                //  return "This accident in " + d.Year +" happened " + d.Date + "and polluted " + d.NumberOfAccidents + " m3";
                // })
                .on('mouseover', tipBar.show)
                .on('mouseout', tipBar.hide);
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ",0)")
                    .call(yAxis);
​
            });
​
        </script>
​
    </body>
</html>
    