D3 Examples - Ship accidents vs pollution in the Baltic Sea

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;
            }
​
            /* Creates a small triangle extender for the tooltip */
            .d3-tip {
              line-height: 1;
              font-weight: bold;
              padding: 12px;
              background: rgba(0, 0, 0, 0.8);
              color: #fff;
              border-radius: 2px;
            }
              
            .d3-tip:after {
              box-sizing: border-box;
              display: inline;
              font-size: 10px;
              width: 100%;
              line-height: 1;
              color: rgba(0, 0, 0, 0.8);
              content: "\25BC";
              position: absolute;
              text-align: bottom;
            }
​
            /*.y.axis path,
            .y.axis line {
                opacity: 0;
            }*/
​
            circle:hover {
                fill: orange;
            }
​
        </style>
    </head>
<!--    <body  style="text-align:center;"> -->
<body>
    
    <div id="header">
    There are many ship accidents in the Baltic Sea every year...
    </div>
​
    <div id="subheader">
    ...but not all cause pollution to the sea. Fortunately for the environment, there is no correlation between number of accidents and pollution.
    </div>
​
    
​
        <script type="text/javascript">
​
        var w = 600;
        var h = 400;
        var padding = [20, 50, 50, 100]; //Top, right, bottom, left
​
        var xScale = d3.scale.linear()
                            .range ([padding[3], w - padding[1] - padding[3] ]);
​
        var yScale = d3.scale.linear()
                            .range([ padding[0], h - padding[2] ]);
​
        var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(5);
​
        var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .ticks(5);
​
        var tipBar = d3.tip()
                .attr('class', 'd3-tip')
                // .offset([xScale, yScale])
                .html(function(d) {
                  return "<strong>In " + d.Years + "</strong> <span style='color:red'>" + d.Accidents + "</span> accidents polluted <span style='color:red'>" + d.Pollu_m3 + " m3</span>";
                  // return "<strong>Accidents:</strong> <span style='color:red'>" + d.Accidents + "</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("AccidentsVSPollution.csv", function(data) {
​
            data.sort(function(a, b) {
                return d3.ascending(+a.Accidents, +b.Accidents);
            });
​
            xScale.domain([0, d3.max(data, function(d) {
                return +d.Accidents;
            }) ]);
​
            yScale.domain([d3.max(data, function(d) {
                return +d.Pollu_m3
            }) ,0 ]);
​
            var circles = svg.selectAll("circle")
                        .data(data)
                        .enter()
                        .append("circle");
​
            circles.attr("cx", function(d){
                return xScale(d.Accidents);
            })
                .attr("cy", function(d) {
                    return yScale(d.Pollu_m3);
                })
                .attr("r", 0)
                .transition()
                .duration(2000)
                .attr("r", 5);
​
                circles.attr("fill", "blue")
                .on('mouseover', tipBar.show)
                .on('mouseout', tipBar.hide);
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0 " + (h - padding[2]) + ")")
                    // .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ",0)")
                    .call(yAxis);
​
                svg.append("text")
                    .attr("class", "label")
                    .attr("text-anchor", "left")
                    .attr("x",w/2)
                    .attr("y", h)
                    .text("Number of accidents");
​
                 svg.append("text")
                    .attr("class", "label")
                    .attr("text-anchor", "end")
                    // .attr("y", 0)
                    .attr("dy", "2.75em")
                    .attr("dx", "-8.75em")
                    .attr("transform", "rotate(-90)")
                    .text("Pollution in m3");
​
​
            });
​
        </script>
​
    </body>
</html>
    