npm install canada-province-chart
Data must be encoded against the following province codes:
abroad
na
yt
nt
nu
bc
ab
sk
mb
on
onlessncr
qc
qclessncr
nl
ncr
nb
ns
pe
We call this type ProvCode
. Note that the use of onlessncr
, qclessncr
or ncr
cannot be combined with the use of on
or qc
.
Data must be provided in a Array<{value:number, provCode:ProvCode}>
format. Let's call this {value:number, provCode:ProvCode}
type Datum
property | required | type | example |
---|---|---|---|
data | yes | Array |
[{ provCode: "ab", value: 200 }, |
htmlForLabel | yes | (datum?: Datum, provCode: ProvCode) => html string |
(datum, provCode) => datum && `<div>${datum.value.toFixed(2)}</div>` |
colorScale | yes | (datum?: Datum, provCode: ProvCode) => color string Only SVG-compatible colors, e.g. not hsla |
(datum, provCode) => datum ? interpolateBlues(datum.value/MAX_VALUE) : "#ccc" |
lang | yes | "en" | "fr" |
"en" |
onMouseEnter | no | (datum?: Datum, provCode: ProvCode) => void |
|
onMouseLeave | no | (datum?: Datum, provCode: ProvCode) => void |
|
onClick | no | (datum?: Datum, provCode: ProvCode) => void |
You can skip our react layer and call our d3 layer, which has an identical API : CanadaD3Viz(container: HTMLElement, config: Props)
- The D3 layer does not partially update markup appropriately when data changes. It's recommended to wipe the container's innerHTML on each re-render (this is what our react layer does).
- The react API is very sensitive to prop changes. Make sure you
useMemo
oruseCallback
all relevant props or the chart rendering code will be called excessively. - The color-scale, html-label and event callbacks all take
(datum: Datum, provCode: ProvCode)
as arguments. For regions without data, the first argument will be undefined. The second argument gives you flexibility on how you color, label or respond to events for regions without any corresponding data. - Two special "provinces", Abroad and Not-available are only shown when they have data available.
- We don't currently support styling the label containers
- We don't support tooltips