Focused region

You can highlight one specific region using `focusedKey` and specify a style for it.

If the focused region is also one of the selected regions, the focused style takes precedence.

You also have to pass `key` or `key_alt` (see basic props for an examplation of these)

Choose an example

Usage

<ChoroplethG
  {height}
  {keyToColorFn},
  {width}
  focusedKey='BR',
  key='iso_a2'
  selectedKeys=['TD', 'US', 'RU', 'CN', 'BR']
  theme={{
    selectedStrokeWidth: 2
  }}
  topojson={world_110m_iso_a2}
  topojsonId='countries'
/>

Props

`focusedKey`

"BR"

`key`

"iso_a2"

`keyToColorFn`

▶ ƒ scale(d)

length: 1
name: "scale"
prototype: { constructor: ƒ }
[[Function]]: function scale(d) { let i = index.get(d); if (i === undefined) { if (unknown !== implicit) return unknown; index.set(d, i = domain.push(d) - 1); } return range[i % range.length]; }
[[Prototype]]: ƒ ()

`selectedKeys`

▶ (5) [ "TD" ,"US" ,"RU" ,"CN" ,"BR" ]

0: "TD"
1: "US"
2: "RU"
3: "CN"
4: "BR"
length: 5

`theme`

▶ { selectedStrokeWidth: 2 }

selectedStrokeWidth: 2

`topojson`

▶ { type: "Topology" ,objects: {…} ,arcs: Array(595) ,bbox: Array(4) ,transform: {…} }

type: "Topology"
objects: { countries: {…} ,land: {…} }
arcs: (595) [ Array(9) ,Array(11) ,Array(5) ,Array(11) ,Array(9) , … ]
bbox: (4) [ -180 ,-85.60903777459771 ,180 ,83.64513000000001 ]
transform: { scale: Array(2) ,translate: Array(2) }

`topojsonId`

"countries"