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.

| Parameter | Description | | --- | --- | | construct | Initiate a builderInstance with the necessary parameters. | | render | Render an svg map on the configured container element | | colorizeRdYlGn | Color pathElements with a Red-Yellow-Green pallete based on a 10-quantil, or decil. | | colorizeCategories | Color pathElements with a 10 colors pallete proper for categorical data types, non ordinal. | | togglePath | Add the selected class or remove it if already selected. | | clearAllSelectedPaths(builderInstance) | Remove the selected class from all pathElements. | | clearSelectedPaths(builderInstance, codes) | Remove the selected class from a list of pathElements. | | selectPaths(builderInstance, codes) | Add the selected class to a list of pathElements. |

mapBuildingTools.construct

Initialize an object with the states of the builder.

| Parameter | Type | Description | | --- | --- | --- | | builderInstance | BuilderInstance | States of the builder. | | configParams | ConfigParams | Base configurations. |

mapBuildingTools.colorizeRdYlGn

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

| Parameter | Type | Description | | --- | --- | --- | | pathElementsMap | HTMLElement[code: string] | Object with key-values of all path elements of the map. | | codesAndValues | Array<{code: string, value: any}> | Values that will base colors. |

mapBuildingTools.colorizeCategories

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

| Parameter | Type | Description | | --- | --- | --- | | pathElementsMap | HTMLElement[code: string] | Object with key-values of all path elements of the map. | | codesAndValues | Array<{code: string, value: any}> | Values that will base colors. | | optionalConfig | { customPallete: string[] } | Accepts a custom list of colors. |

mapBuildingTools.togglePath

Add the selected class or remove it if already selected.

| Parameter | Type | Description | | --- | --- | --- | | builderInstance | BuilderInstance | States of the builder. | | code | string | Code of the selected path. |

mapBuildingTools Types

BuilderInstance

| Property | Type | Description | | --- | --- | --- | | rendered | boolean | Set to true if the map renders successfully. | | containerSelector | string | CSS selector where the svg element will be appended. | | selectedPathClass | string | CSS class to style a path element with a selected state. | | onPathClick | function(details: {code: string, pathElement: HTMLElement}) | Event triggered on click. The code is the key of the element. | | pathElementsMap | HTMLElement[code: string] | Object with key-values of all path elements of the map. | | currentData | Array<{code: string, value: any}> | Array of codes and values that will base the colors of the map. | | selectedCodes | Array | List of codes with selected state. | | codeAttribute | string | HTML element attribute that represents the code. Ex: 'id', 'citycode' | | svgResolver | string | Promise | function(): Promise | string> | String type is read as an URL, Promises will be resolved as innerHTML, same for functions returning Promises and strings. |

ConfigParams

| Property | Type | Description | | --- | --- | --- | | containerSelector | string | CSS selector where the svg element will be appended. | | selectedPathClass | string | CSS class to style a path element with a selected state. | | onPathClick | function(details: {code: string, pathElement: HTMLElement}) | Event triggered on click. The code is the key of the element. |