D3 Examples - Country GDP Map

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <title>US Map</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.5.0/d3-legend.min.js" charset="utf-8"></script>
    <style type="text/css">
        body {
            background-color: white;
        }
​
        svg {
            background-color: white;
        }
​
        #container {
            width: 550px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            padding: 20px 20px 10px 40px;
            background-color: white;
            box-shadow: 2px 2px 7px 3px #E5E5E5;
        }
​
        h1 {
            font-size: 26px;
            margin: 0;
        }
​
        p {
            font-size: 14px;
            margin: 15px 0 10px 0;
        }
​
        p.title {
            font-size: 14px;
            margin: 5px 0 10px 0;
        }
    </style>
</head>
​
<body>
    <div id="container">
        <h1>Country GDP
        </h1>
        <p class="title"></p>
        <br>
        <div id="chart"></div>
        <p>
            <strong>Source:</strong> <a href="https://www.ggdc.net/maddison/maddison-project/data.htm"><i>Maddison Database</i></a></p>
​
    </div>
    <script type="text/javascript">
        //Width and height
        var w = 550;
        var h = 400;
​
​
        //Define map projection
        var projection = d3.geo.eckert4()
            .center([10, -5])
            .translate([w / 2, h / 2])
            .scale([w / 4]);
​
        //Define path generator
        var path = d3.geo.path()
            .projection(projection);
​
        //Create SVG
        var svg = d3.select("#chart")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
​
        //Load in GeoJSON data
        d3.json("ne_50m_admin_0_map_subunits.json", function(json) {
            var statesData = json.features
​
            //Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
            var color = d3.scale.quantize()
                .range(['#e5f5f9', '#99d8c9', '#2ca25f'])
                .domain([0, 15000000]);
​
​
​
            //Bind data and create one path per GeoJSON feature
            svg.selectAll("path")
                .data(json.features)
                .enter()
                .append("path")
                .attr("d", path)
                .attr("stroke", "white")
                .style("fill", function(d) {
​
                    //Get data value
                    var value = d.properties.gdp_md_est;
​
                    if (value) {
                        //If value exists…
                        return color(value);
                    } else {
                        //If value is undefined…
                        return "#ccc";
                    }
​
                });
​
            //          svg.append("g")
            //              .attr("class", "legendQuant")
            //              .attr("transform", "translate(350,350)");
​
            //          var legend = d3.legend.color()
            //              .labelFormat(d3.format(".2f"))
            //              .useClass(true)
            //              .scale(color);
​
            //          svg.select(".legendQuant")
            //              .call(legend);
​
​
            var rectangle = svg.append("rect")
                .attr("x", 345).attr("y", 300)
                .attr("width", 140)
                .attr("height", 70)
                .attr("fill", "white");
​
            svg.append("g")
                .attr("class", "legendLinear")
                .attr("transform", "translate(350, 300)");
​
            var legendLinear = d3.legend.color()
                .shapeWidth(30)
                .shapeHeight(20)
                .labels(["Less than 5 trillion", "5 to 10 trillion", "10 to 15 trillion"])
                .labelAlign("start")
                .orient("vertical")
                .title("")
                .ascending(false)
                .scale(color);
​
            svg.select(".legendLinear")
                .call(legendLinear);
​
​
​
        });
    </script>
</body>
​
</html>
​
    