Playground — Choropleth Map — 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/choropleth-map

Choropleth Map Playground

Experiment with ChoroplethMap props on a real world map. The map uses built-in Natural Earth 110m data from world-atlas, joined to country statistics via mergeData. Try different color schemes, projections, and datasets.

Dataset:

Color

Color Scheme

Map

Show Graticule

Projection

Layout

Show Legend

Title

Interaction

Enable Hover

Enable Zoom/Pan

Generated Code

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

JSX

import { ChoroplethMap } from "semiotic" const data = // Resolve built-in world map, join GDP data by ISO numeric ID const world = await resolveReferenceGeography("world-110m") const areas = mergeData(world, gdpData, { featureKey: "id", dataKey: "id" }) <ChoroplethMap data={data} />