@fox world choropleth

fox-world-choropleth.markdown

@fox world choropleth

A Pen by Jason Yamada-Hanff on CodePen.

License.

index.html

<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

script.js

function fakeCountryData(count) {
  const fake = () => ({ 'country': faker.address.country(),
                        'clicks': getRandomInt(16556),
                      });
  return new Promise((resolve, reject) => {
    resolve(Array(count).fill(undefined).map(fake));
  });
}

DEFAULT_COLOR = "#ABDDA4";

fakeCountryData(10)
  .then((data) => {
    const colors = d3.scale.category20b();
    console.log(colors(40));
  
    const fills = {
      defaultFill: DEFAULT_COLOR,
    };
    
    function intToColor(integer) {
      const key = "color" + _.toString(integer)
      fills[key] = colors(integer)
      return key
    }

        function convertDataToDatamapData(jsonData) {

            // Have a map of 20 possible options

            var h = {}
            _.each(jsonData, function(el) {
                const clicks = _.toInteger(el["Stat"]["clicks"])
                const countryCode = el["Stat"]["country_code"]
                h[countryCode] = {
                    fillKey: intToColor(clicks)
                }
            })
            return h
        }
        var data = convertDataToDatamapData(jsonData)

        var basic_choropleth = new Datamap({
            element: document.getElementById("container"),
            projection: 'mercator',
            fills: fills,
            data: data
        });
});

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.world.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script>