@byu-oit/choropleth-chart

choropleth-chart

Generate a choropleth chart in svg format to be used as an API response.

example output

svg output

svg output

usage example

import {usMap} from '@byu-oit/choropleth-chart'

const populations = {
'AK': 28612,
'AL': 22961,
'AR': 2742,
'AZ': 28968,
'CA': 10838,
'CO': 3912,
'CT': 4346,
'DE': 7092,
'FL': 11324,
'GA': 29688,
'HI': 6060,
'IA': 23746,
'ID': 23104,
'IL': 27326,
'IN': 28071,
'KS': 24592,
'KY': 20297,
'LA': 29848,
'MA': 3720,
'MD': 28204,
'ME': 7675,
'MI': 25490,
'MN': 11956,
'MO': 15340,
'MS': 16302,
'MT': 8802,
'NC': 31497,
'ND': 29888,
'NE': 21640,
'NH': 9146,
'NJ': 9528,
'NM': 11543,
'NV': 14122,
'NY': 14116,
'OH': 26886,
'OK': 6374,
'OR': 30670,
'PA': 20437,
'RI': 25357,
'SC': 27932,
'SD': 14865,
'TN': 10741,
'TX': 25741,
'UT': 125,
'VA': 16695,
'VT': 3510,
'WA': 6644,
'WI': 183,
'WV': 11706,
'WY': 31894
}
const chartSvg = usMap(populations)

usage

There are 2 functions provided by the library: usMap and worldMap. Each function takes an object whose keys are the 2 letter state or 2-letter ISO country code, respectively.

Example:

statePopulations = {
    ...
    'UT': 100,
    ...
}

countryPopulations = {
    ...
    'CA': 1000,
    'GB': 800,
    'FR': 900,
    'US': 1000,
    ...
}

Options may also be provided to customize the map display.

Key	Type	Default
strokeWidth	String	0.75	The stroke-width of the lines between countries / states
strokeColor	String	#666	The color of the lines between countries / states
paintLegend	Boolen	true	If false, the legend will not be painted
overlay	String		SVG content to overlay on top of the map
transform	String		If provided, will be applied to the map
colors	Array of Strings	[...]	The colors to use to display the map. The number of colors determine the number of groups to divide the populations into. Colors will be used in order, from smallest populations to largest.