ChoroplethDiv

If you need to render the choropleth as an html element, you can use `ChoroplethDiv` providing the same props but `width` and `height`.

This will render the choropleth in a `div`.

You can add `title` (rendered as a `h2`), `padding` (a string defaulting to '10px') and `headerHeight` (a string defaulting to '2rem')

Choose an example

Usage

<ChoroplethDiv
  key='iso_a2'
  keyToColor={keyToColorWorld}
  padding='3em'
  theme={{backgroundColor: '#eee'}}
  title='Some world countries
  topojson={world_110m_iso_a2}
  topojsonId='countries'
/>

Props

key

    "iso_a2"

keyToColor

    ▶ { AM: "blue" ,AT: "blueviolet" ,AZ: "chartreuse" ,BY: "rgb(255, 69, 0)" ,BE: "brown" , … }
    • AM: "blue"
    • AT: "blueviolet"
    • AZ: "chartreuse"
    • BY: "rgb(255, 69, 0)"
    • BE: "brown"
    • BA: "aquamarine"
    • BG: "rgb(128, 128, 0)"
    • HR: "cadetblue"
    • CY: "deepskyblue"
    • CZ: "gold"
    • DK: "chocolate"
    • EE: "cornflowerblue"
    • FI: "dimgray"
    • FR: "firebrick"
    • GE: "rgb( 65, 105, 225)"
    • DE: "greenyellow"
    • GR: "darkgoldenrod"
    • HU: "darkmagenta"
    • IS: "dodgerblue"
    • IE: "crimson"
    • IT: "darkcyan"
    • KZ: "darkblue"
    • LV: "darkturquoise"
    • LI: "coral"
    • LT: "darkkhaki"
    • LU: "lightsalmon"
    • MT: "darkorchid"
    • MD: "darkolivegreen"
    • MC: "darkslategray"
    • ME: "darkslateblue"
    • NL: "rgb(216, 191, 216)"
    • MK: "tomato"
    • NO: "darksalmon"
    • PL: "rgb(238, 130, 238)"
    • PT: "darkred"
    • RO: "red"
    • RU: "green"
    • SM: "rgb(188, 143, 143)"
    • RS: "darkorange"
    • SK: "rgb( 0, 0, 128)"
    • SI: "darkseagreen"
    • ES: "lightblue"
    • SE: "mediumseagreen"
    • CH: "rgb(255, 255, 0)"
    • TR: "yellowgreen"
    • UA: "rgb(152, 251, 152)"
    • GB: "rgb(128, 0, 128)"

padding

    "3em"

theme

    ▶ { backgroundColor: "#eee" }
    • backgroundColor: "#eee"

title

    "Some world countries"

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"

Some world countries