D3 Examples - The Baltic Sea

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The Baltic Sea</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
​
            body {
                background-color: rgb(234, 231, 231);
                margin-left: 150px;
                margin-right: 50px;
                margin-bottom: 10px;
                margin-top:10px;
            }
​
            h1 {
                font-size: 34px;
                margin: 0;
            }
​
            p {
                font-size: 18px;
                margin: 10px 10px 50px 0px;
            }
​
            path {  
                stroke: #fff  ;
                stroke-width: .9px;
                fill: #AFA9A8; 
            }
            path:hover{
                fill: #6B7C6B;
            }
​
            .container {
                display: block;
                margin: auto;
                width: 75%;
                vertical-align: top;
            }
​
            #map {
                float: left;
                width: 0;
                height: 100%;
                margin: 1px;
            }
​
            #tooltip {
                z-index: 1;
                position: absolute;
                width: auto;
                height: auto;
                padding: 6px;
                background-color: white;
                opacity: 1;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                pointer-events: none;
            }
            
            #tooltip.hidden {
                display: none;
            }
    
​
            #tooltip p {
                margin: 0;
                font-family: 'Helvetica', sans-serif;
                font-size: 1em;
                line-height: 1;
                }
​
        </style>
    </head>
    <body>
        <div class="container">
            <h1>The Baltic Sea</h1>
            <p>This is the Baltic Sea, one of the most polluted and trafficked seas in the world. Source: <a href="https://helcom.fi">HELCOM</a></p>
        <div id="map"></div>
        <div id="tooltip" class="hidden">
            <p>
                <span id="NAME">name</span>
            </p>
        </div>
        <script type="text/javascript">
​
            //Width and height
            var w = 800;
            var h = 500;
​
            //Define map projection
            var projection = d3.geo.mercator()
                                   .center([ 0, 60 ])
                                   .translate([ w/5, h/2 ])
                                   .scale([ w/0.8]);
​
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
​
            //Create SVG
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            //Load in GeoJSON data
            d3.json("BalticCountriesMapShaper.json", function(json) {
                
                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   //.style("fill", "#AFA9A8")
                   //.on('click', function(d) { console.log(d.properties.soverignt)}
                   .on("mousemove", function(d) {
                        var xPosition = parseFloat(d3.select(this).attr("cx"));
                        var yPosition = parseFloat(d3.select(this).attr("cy"));
                        var currentCountry = this;
                        d3.select(this).style('fill-opacity', 1);
                 
                       //Update the tooltip position and value
                       d3.select("#tooltip")
                        .style("left", (d3.event.pageX+20) + "px")           
                        .style("top", (d3.event.pageY ) + "px")
                        .select("#NAME")
                        .text(d.properties.sovereignt);
​
                       // //Show the tooltip
                       d3.select("#tooltip").classed("hidden", false);
                       })
​
                        .on("mouseout", function() {
                         d3.selectAll('path')
                            .style({ 'fill-opacity':10});
                       //Hide the tooltip
                       d3.select("#tooltip").classed("hidden", true);
                       });
        
            });
        
        </script>
    </body>
</html>
    