A generic choropleth component for Svelte.
npm install @svizzle/choroplethA package containing choropleth components for Svelte:
- ChoroplethSVG
- ChoroplethDiv
Since these components can render different types of areas, here we're using the term "region" to refer to the geographic regions type we'll be representing (e.g. 'country', 'NUTS2', etc).
Here are the props in use by these components (depending on the components some might not be used).
The default fill color for polygons.
Type: string
Default: white
The background color.
Type: string
Default: white
The default stroke color for polygons.
Type: string
Default: grey
The stroke color for selected polygons.
Type: string
Default: white
The Topojson object of regions to be represented, with properties having the a field corresponding to the prop key.
Type: object
Default: undefined
The svg canvas height attribute.
Type: Number
Default: undefined
If true, emits events when interacting with the polygons, the payload being the value of the region key (see events below).
Type: boolean
Default: false
The key to be used in the features properties field as the region identifier.
For example the properties field might have the shape {iso_a2: String, iso_a3: String}: by passing iso_a3 we choose to identify features by the value in the iso_a3 field of their properties field.
Type: String
Default: undefined
You might provide a topojson where not all the features have the provided key.
For example if you provide key: 'iso_a2' (ISO Alpha 2 codes), disputed or partially recognised countries might not have that code (e.g. Kosovo).
For these cases you can provide a key_alt, equal to name by default.",
Type: String
Default: name
By providing an object mapping region key -> region color, you can control the regions colour.
Notice that the default color for keys not in keyToColor is black.
Type: object
Default: undefined
Example:
``js`
{
foo: 'yellow',
bar: '#ff0000',
}
The projection function.
Type: Function
Default: geoEquirectangular (see d3-geo).
The keys of the items to be highlighted.
Type: String[]
Default: []
The default stroke-width (unselected polygons).
Type: number
Default: 0.5
The stroke-width of selected polygons.
Type: number
Default: 1
The svg canvas width attribute.
Type: Number
Default: undefined
Event: click on a region
Payload: the clicked region id, based on the provided key.
Event: mouseenter on a region
Payload: the entered region id, based on the provided key.
Event: mouseleave on a region