Skip to content
A cartogram chart web component for visualizing geographical data by distorting a TopoJson topology
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
LICENSE
README.md
package.json
rollup.config.js
rollup.config.module.js

README.md

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.

NPM

Quick start

import Cartogram from 'cartogram-chart';

or

Cartogram = require('cartogram-chart');

or even

<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. -
You can’t perform that action at this time.