Playground — Distance Cartogram — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/distance-cartogram

Distance Cartogram Playground

Experiment with DistanceCartogram props in real time. Distance cartograms distort a map so that distance reflects cost (travel time, shipping cost, network latency) rather than physical distance. Drag the strength slider between 0 (geographic) and 1 (full distortion) to see the transformation. Try both datasets and different projections.

Dataset:

Cartogram

Strength

Points

Point Radius

Map

Projection

Layout

Show Legend

Title

Interaction

Enable Hover

Generated Code

The link restores this exact configuration; the config is a portable ChartConfig artifact.

JSX

import { DistanceCartogram } from "semiotic" const data = [ { id: "Rome", lon: 12.5, lat: 41.9, travelDays: 0 }, { id: "Athens", lon: 23.7, lat: 37.9, travelDays: 7 }, { id: "Londinium", lon: -0.1, lat: 51.5, travelDays: 30 }, // ...10 cities with travel days from Rome ] <DistanceCartogram data={data} />