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