Finanical Secrecy index 2015

A simple map with a default Mercator projection, diverging color scale visualising the 2015 FSI. Bad guys in red, good guys in green.

FSI Score Legend

    Code Example

    new Map()
      .data(data)
      .geoData(world)
      .color(colors)
      .zoomResetOnOceanClick(true)
      .showToolTipOn(false)
      .backgroundgColor('#006994');

    Data source: http://www.financialsecrecyindex.com/introduction/fsi-2015-results

    EFTA and bilateral investment treaties (BiTS)

    A map with a default geoWinkel3 projection, custom patterns and multi-color patterns, zoom control buttons and threshold country labels. Depicts Norwegian bilaterale investment trade agreements in combination with EFTA-countries.

    Code Example

    new Map()
      .data(data)
      .geoData(world)
      .margin(10)
      .higlightOnHover(true)
      .zoomMax(20)
      .color(colors)
      .texture(textures)
      .countryIsoCodeMap('properties.countryCode')
      .projection('geoWinkel3')
      .showToolTipOn('click')
      .assetsUrl('docs/')
      .backgroundgColor('#6C7C7C')
      .zoomControls(true)
      .zoomGestures(true)
      .showLabels(true);

    Data source: http://www.handelskampanjen.no/handelskartet

    World Migration

    new Map()
      .data(data)
      .geoData(world)
      .projection('geoAzimuthalEqualArea')
      .color(colors)
      .showLabels(3)
      .zoomResetOnOceanClick(true)
      .showToolTipOn('hover')
      .backgroundgColor('#6C7C7C');

    Data source: http://www.un.org/en/development/desa/population/migration/data/estimates2/estimates15.shtml

    World By Income

    Legend

    • High income
    • Upper middle income
    • Lower middle income
    • Low & middle income
    • Low income
    new Map()
      .data(data)
      .geoData(world)
      .projection('geoEckert4')
      .color(colors)
      .zoomResetOnOceanClick(true)
      .showToolTipOn(false)
      .backgroundgColor('#006994');

    d3by5-map

    Options

    Basics

    Option Type Default Desciption
    width Number 960
    height Number 500
    aspectRatio Number 500 / 960
    margin Number 20 for now single value
    offSetX Number 0 shifts the entire map horisointally in pixels
    offSetY Number 0 shifts the entire map veritcaly in pixels
    showLabels Boolean or String 0 Bboolean or integer] false/0 = off, true/1 = on, 2 - 20 = zoomLevelTreshold
    higlightOnHover Boolean false higlight country (or group of countries) on hover
    showToolTipOn String 'hover' [click, hover, none]
    toolTipTemplate Function [See below] A function that returns the markup four your tooltip.
    assetsUrl String '/' base path to asset files
    classPrefix String 'd3x5_'
    debug Boolean false Toggles debug messages (warning and such) to the console.

    Map

    Option Type Default Desciption
    geoData object {} topoJson (only for now)
    projection String 'geoMercator' projection
    scale float 0.85 not quiter sure about this one
    responsive Boolean false
    graticule Boolean false graticules; a uniform grid of meridians and parallels for showing projection distortion
    projectionFit Boolean true tries to fit the map inside container. Todo; rename ??

    Data Visualization

    Option Type Default Desciption
    data object {} data to visualize
    color Function null
    texture Function null
    colorKey String null
    textureKey String null
    countryIsoCodeMap String 'properties.countryCode' If the topojson does not store the ISO code in "geometries.id", use this to map the correct attribute (uses dot notation, eg "properties.countryCode")

    Zoom

    Option Type Default Desciption
    zoomMin Number 1 min zoom level
    zoomMax Number 20 max zoom level
    zoomGestures Boolean true "Free zoom" (mouse scroll wheel, touch gestures)
    zoomControls Boolean false toggle zoomButtons
    zoomResetOnOceanClick Boolean false reset zoom on background area click

    Colors

    Option Type Default Desciption
    baseColor String '#F8EBCB'
    backgroundgColor String 'none' 'none' for transparent or #HEX
    accentColor String '#FF6B6B'
    borderColor String '#9DBFB1'

    Tool Tip Template

    function(d, data) { 
        return '<h3 class="d3x5_tooltip__header">' + d.properties.name + '</h3>'; 
    }
    

    Data Schema

    CSV

    Must include one column referencing the country. This could be: 'id', 'countrycode', 'countryCode', 'country', 'Country', 'countryName', 'countryname'. Or it can be set as an option 1

    Example

    "country","id","immigration","emmigration","netmigration"
    "Afghanistan","4","382365","4843117","-4460752"
    "Albania","8","57616","1122910","-1065294"
    "Algeria","12","242391","1763771","-1521380"
    

    Note: Numeric Country codes are padded. So in the example above id 4 is read as 004.

    JSON array

    You can present the data as an array of objects. Each object must include one property referencing the country. This could be: 'id', 'countrycode', 'countryCode', 'country', 'Country', 'countryName', 'countryname'. Or it can be set as an option 1

    Example

    [
        {
            id: "ABW",
            iso2Code: "AW",
            name: "Aruba",
            region: {
                id: "LCN",
                value: "Latin America & Caribbean "
                },
            adminregion: {
                id: "",
                value: ""
            },
            incomeLevel: {
                id: "HIC",
                value: "High income"
            },
            lendingType: {
                id: "LNX",
                value: "Not classified"
            },
            capitalCity: "Oranjestad",
            longitude: "-70.0167",
            latitude: "12.5167"
        },
        {
            id: "AFG",
            iso2Code: "AF",
            name: "Afghanistan",
            ...
        }
        ...
    ]
    

    JSON object

    Countries group by iso-3166 country codes (alpha2, alpha3 of numeric). Optional porperties can be included and referenced in the options. Spesicifcally complex mapping of colors and/or textures.

    Example

    {
      "countries": {
        "ALB": {
          "groups": [
            "industry",
            "tradd"
          ],
          "fillColorMapKey": [
            "efta",
            "bits"
          ]
        },
        "BIH": {
          "groups": [
            "patents",
            "medicin"
          ],
          "fillColorMapKey": [
            "efta"
          ]
        },
        ...
    }
    

    [1]: See option

    On my Todo list

    • Re-write in ES6
    • Replace budo/browserify with better dev tooling
    • Minify basic functionality and move extras to optional extensions / plugins. E.g textures and projections
    • Move d3 out of bundle
    • Remove lodash dependency
    • Replace iso-3166-1 dependency

    Contribution

    Please fork freely, submit pull requests bravely and raise issues friendly.

    Credits

    All is dependent on d3 and topojson. Additional projections uses d3-geo-projection. Textures uses [textures.js] (https://riccardoscalco.github.io/textures/), country codes uses iso-3166-1. Inspired by DataMaps.

    Code copyright 2017 Svale Fossåskaret / Kartoteket . Code released under the MIT license.

    Fork me on GitHub