Cartogram Chart
!NPM packagenpm-imgnpm-url
!Build Sizebuild-size-imgbuild-size-url
!NPM Downloadsnpm-downloads-imgnpm-downloads-url<a href="https://vasturiano.github.io/cartogram-chart/example/world-population/"><img width="70%" src="https://vasturiano.github.io/cartogram-chart/example/world-population/screenshot.png"></a>
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 thetopoJson.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. | - |