SVGWorld

The simple and free to use SVGWorld npm package can be used to draw map based charts. The project is currently in an early alpha release and does not yet include many functions. However, it is highly flexible and can be expanded with other maps or plugins.

Install

Using Node.js install this package with the following command:

npm install svgworld

Example

import SVGWorld from './index.js';
import world from './maps/world.json' assert { type: 'json' };
import colorScale from './plugins/colorScale.js';

var chart = new SVGWorld( document.getElementById( 'map' ), {
    map: world,
    data: [
        { id: "af", y: 38928346 }, { id: "ax", y: 29013 },
        { id: "al", y: 2877797 }, { id: "dz", y: 43851044 },
        { id: "as", y: 55191 } ...
    ],
    options: {
        plugins: {
            colorScale: {
                minColor: '#2a0211',
                maxColor: '#e30b5c',
                scaleType: 'logarithmic',
                steps: 12
            }
        },
        callbacks: {
            afterAssignData: colorScale
        }
    }
} );

Documentation

Callback functions

Callback functions can be used to extend or modify the existing code. They are called from different spots and provide various arguments depending on their purpose. The last argument passed is always the SVGWorld class itself.

Callback	Arguments	Description
afterRedraw	svgworld	Fires after drawing map chart.
afterClearMap	items, svgworld	Fires after clearing map chart, provides map items.
createMapPath	item, path	Fires after creating SVG path element, provides map item and the SVG path itself.
mapLoadComplete	items, map, svg, svgworld	Fires after creating whole SVG map and all paths, provides map items, the map itself and the SVG element.
afterAssignData	items, svgworld	Fires after assigning map data to items, provides this items.

Plugins

SVGWorld can easily be extended through plugins. The following ones are included:

colorScale.js

The colorScale plugin generates a color scale based on minima and maxima. The script calculates color steps between two specified values (supports hexadecimal values and RGB colors) and adds them to the map items.

Option	Default	Description
minColor	[ 42, 2, 17 ]	Minimum color; hex or rgb values.
maxColor	[ 227, 11, 92 ]	Maximum color; hex or rgb values.
scaleType	linear	Color scale tyle; allowed values: linear, logarithmic, log, log10.
steps	10	Number of color steps,
approx	round	Date approximation; allowed values: round, floor, ceil.