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. |