svg-colored-maps v1.0.5

svg-colored-maps

A toolkit to color svg maps based on data.

Install

npm install svg-colored-maps

Examples

Built-in maps

This lib include some built-in maps of Brazil, BrazilMunicipalitiesBuilder, BrazilStatesBuilder, SaoPauloMunicipalitiesBuilder, cosuming the main toolkit 'mapBuildingTools'.

<div class="map-container">
  <div id="municipalities-map"></div>
</div>

import { BrazilMunicipalitiesBuilder } from 'svg-colored-maps'

const buildParameters = {
  containerSelector: '#municipalities-map', 
  selectedPathClass: 'path--selected',
  onPathClick: (details) => {
    console.log('custom click details:', details)
  }, 
}

const mapBuilder = new BrazilMunicipalitiesBuilder(buildParameters);
mapBuilder
  .render()
  .then(() => colorWithGdp())

const colorWithGdp = async () => {
  // Fetch data and map to code and value.
  // In this built-in map the code is the IBGE city code.
  const sampleData = (await fetch('./sample-data/gdp-per-capita-2019.json')
    .then(res => res.json()))
    .map(d => ({
      code: d.code,
      value: d.gdpPerCapitaBrl2019
    }))
  // Color svg paths with a Red-Yellow-Green pallete.
  mapBuilder.colorizeRdYlGn(sampleData)
}

mapBuildingTools Functions

The functions support implementing a builder class without restrictions of a base class. For that reason the functions often receive a builderInstance parameter.

• Check the built-in classes to see the functions in use.

mapBuildingTools.construct

Initialize an object with the states of the builder.

mapBuildingTools.colorizeRdYlGn

Colorize pathElements with a Red-Yellow-Green pallete based on a 10-quantil, or decil.

mapBuildingTools.colorizeCategories

Color pathElements with a 10 colors pallete proper for categorical data types, non ordinal.

mapBuildingTools.togglePath

Add the selected class or remove it if already selected.

mapBuildingTools Types

BuilderInstance

ConfigParams