D3 Examples - A sea of s**t

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A sea of s**t</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            body {
                background-color: rgb(208, 208, 208);
                margin-left: 150px;
                margin-right: 50px;
                margin-bottom: 10px;
                margin-top:10px;
                
            }
            #container {
                width: 700px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 50px;
                padding: 50px;
                background-color: white;
                box-shadow: 3px 3px 5px 6px #ccc;
            }
​
            #header {
                font-size: 40px;
                font-family: Rockwell, Helvetica;
                text-align: left;
            }
​
            #subheader {
                font-size: 20px;
                font-family: Rockwell, Helvetica;
                text-align: left;
            }
​
            g.bar text {
                font-size: 15px;
                font-weight: bold;
                text-anchor: end;
                opacity: 0;
            }
​
            g.bar:hover rect {
                fill: orange;
            }
​
            g.bar:hover text {
                opacity: 1;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 16px;
            }
​
            .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="container">
    
        <div id="header">
        A sea of s**t
        </div>
​
        <div id="subheader">
        Marine litter is not only an aesthetic problem – it also threatens human health and safety and has harmful impacts on marine organisms. This chart shows the main sources of marine litter in the Baltic Sea. Source: <a href ="https://www.helcom.fi/Lists/Publications/BSEP146.pdf">HELCOM Activities report 2014</a>
        </div>
    </div>
​
    
​
        <script type="text/javascript">
​
        var w = 600;
        var h = 400;
        var padding = [20, 50, 20, 215];
​
        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 svg = d3.select("#container")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
        
​
        //Load in contents of CSV file
        d3.csv("MarineLitter.csv", function(data) {
​
            data.sort(function(a, b) {
                return d3.descending(+a.Value, +b.Value);
            });
​
            widthScale.domain([0, d3.max(data, function(d) {
                return +d.Value;
            }) ]);
​
            heightScale.domain(data.map(function(d) {return d.MarineLitterSource} ));
​
            //Bind data to groups (not bars directly)
            var groups = svg.selectAll("g")
                            .data(data)
                            .enter()
                            .append("g")
                            .attr("class", "bar");
​
            //Add a rect to each group
            var rects = groups.append("rect")
                .attr("x", padding[3])
                .attr("y", function(d) {
                    return heightScale(d.MarineLitterSource);
                })
                .attr("width", 0)
                .attr("height", heightScale.rangeBand())
                .attr("fill", "steelblue");
​
            groups.append("text")
                .attr("x", function(d) {
                    return padding[3] + widthScale(d.Value) - 3;
                })
                .attr("y", function(d) {
                    return heightScale(d.MarineLitterSource) + 15;
                })
                .text(function(d) {
                    return d.Value+"%";
                });
​
            rects.transition()
            .delay(function(d, i) {
                //return i * 50;
                return (data.length - i) * 50;
            })
​
            .duration(1500)
            .attr("width", function(d) {
                return widthScale(d.Value);
​
            });
​
            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>
    