D3 Examples - The world's number one...

The world's number one...

The color intensities show how relatively many rankings a country had on the list, and hovering provides a list of all the ranking descriptions. Some curiosities: Venezuela makes beauty queens, and South Africa has lots of AIDS. No surprises: Afghanistan is a terrible place to be. Here is the raw country data in spreadsheet form.

Featured on graphme

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
    <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    </style>
</head>
​
<body>
  <div id="most" style="height: 500px; width: 100%; position: relative;">
  </div>
  <script>
    d3.json("rawcountries.json",function(rawCountries){
    var mostObjects = {};
    var fillColor = "#008100";
    var max = 0;
​
    rawCountries.forEach(function(c) {
        var currentISO = c.iso;
        var stat = [c.statistic," [",c.field,"] (",c.date,")"].join("");
​
        if (mostObjects[currentISO]) {
            mostObjects[currentISO].statistics.push(stat);
            count = mostObjects[currentISO].count++;
            if (count > max) max = count;
        } else {
            mostObjects[currentISO] = {
                country: c.country,
                statistics: [stat],
                count: 1,
                fillKey: currentISO,
            };
        }
    });
​
    var colorFills = {
        defaultFill: 'white'
    };
​
    var fill = d3.scale.linear()
    .domain([0, max])
    .range(["white", fillColor]);
​
    Object.keys(mostObjects).forEach(function(iso) {
        var count = mostObjects[iso].count;
        colorFills[iso] = fill(count);
    });
​
    var most = new Datamap({
        element: document.getElementById("most"),
        fills: colorFills,
        data: mostObjects,
        geographyConfig: {
            popupTemplate: function(geography, country) {
                return [
                    '<div class="hoverinfo">',
                    "<strong>",
                    country.country,
                    "</strong>",
                    " (",
                    country.count,
                    ")",
                    "</br>",
                    country.statistics.join("</br>"),
                    "</br>",
                ].join("");
            },
            borderColor: 'black',
            highlightOnHover: false,
        },
    });
​
});
​
​
  </script>
</body>
​
    