choropleth-chart

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

example output

usage example

javascript
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:`javascript 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.|

usage example

javascript
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:

and

. Each function takes an object
whose keys are the 2 letter state or 2-letter ISO country
code, respectively.

Example:

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

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

Options may also be provided to customize the map display.