react-dorling-map

A simple widget to have a Dorling Cartogram that also animates into a regular map.

Basic Usage

Clone the repo : npm i react-dorling-map.

Docs

In the docs folders is an example SimpleDorling.js that has the settings. More docs coming at some point but for now:

DorlingCartogram

A React component that takes the following properties and produces either a map or a dorling cartogram.

• cartogram: Set to true to display geodata as a dorling cartogram
• mapData: A geojson file. Features should have a neighbors property that gives the array position of any neighboring features (in other words if feature 9 borders features 0, 5 and 43 it should have a neighbors: [0, 5, 43] in its properties. While this isn't strictly required it will make things easier. Labeling by default is the id value of the feature. There is a world.json file in the docs folder that doesn't have Antarctica but does have neighbors and isocodes.
• data: An array of objects that will be joined onto the mapData features based on shared id values.
• projectionType: A d3-geo projection. Default projection is the horrible Mercator projection so good luck sailing ships in the 18th century you goons.
• transitionSeconds: How many seconds the animation from dorling to map takes.
• size: An array of [width, height] in pixels
• sizeBy: A string (if a property name) or function that takes a feature and returns a value to base the sizes on. There is no internal scaling so make sure this is a scaled value suitable for your cartogram size.
• geoStyle: An React style object or a function that returns a React style object to style the map features when in map mode.
• circleStyle: An React style object or a function that returns a React style object to style the map features when in map mode. Defaults to the geoStyle setting if no value is sent.
• zoomToFit: Zoom the dorling cartogram so that it fits the display area otherwise it will be closer to the centroids of the features in the map mode.
• label: Set to true to show simple labels based on the id property of the features or set to a function that takes the feature and returns a string or SVG JSX.
• onHover: Takes a function that is passed the hovered feature (uses the path in map mode or a voronoi of centroids in cartogram mode) like d => {console.info(d)}. There's no built-in tooltips but the passed element has x and y information for you to generate tooltips. Passed undefined onMouseLeave.