Cartogram Chart

An interactive contiguous cartogram reusable chart for visualizing geographical data.

Given a TopoJson topology, renders its shapes with distorted areas according to a value associated with each feature. The geo projection to be used is configurable using the projection property.

Uses Shawn Allen's topogram for the algorithm computation.

Quick start

import Cartogram from 'cartogram-chart';

or using a script tag

<script src="//unpkg.com/cartogram-chart"></script>

then

const myChart = Cartogram();
myChart
  .topoJson(<myTopology>)
  (<myDOMElement>);

API reference

| Method | Description | Default | | --- | --- | --- | | width([number]) | Getter/setter for the chart width in px. | <window width> | | height([number]) | Getter/setter for the chart height in px. | <window height> | | topoJson([object]) | Getter/setter for the TopoJson topology. Without this property no shapes are rendered. | | | topoObjectName([string]) | Getter/setter for the object name in the topoJson.objects structure to use. | <first object> | | projection([object]) | Getter/setter for the geographical projection to use for rendering. | geoMercator (centered on prime meridian, slightly tilted towards the northern hemisphere) | | iterations([number]) | Getter/setter for the number of iterations to run the algorithm for. Higher numbers distorts the areas closer to their associated value, at the cost of performance. | 20 | | value([number, string or fn]) | Getter/setter for a feature's value accessor. The shape area size is distorted according to this property. Supports either a fixed numeric value, a string indicating the features's object attribute, or a function(feature) which should return a numeric value. | 1 | | color([string or fn]) | Getter/setter for a feature's color accessor, used to color the shapes. | lightgrey | | label([string or fn]) | Getter/setter for a feature's label accessor, used to display a shape's name on its tooltip. | | | valFormatter([function]) | Getter/setter for the number formatter function(n), to show values in the tooltip. | n => n | | units([string]) | Getter/setter for the value units, to include in the tooltip. | | | tooltipContent([string or fn]) | Getter/setter for a feature's tooltip content accessor. Use this to specify extra content in each of the shape's tooltips in addition to the feature label and value that is included by default. | | | onClick([function]) | Getter/setter for the callback function(feature) to trigger when clicking on a shape. | - |

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!