Add a Geo/map chart with Choropleth, points, pie, arc and path layers - #271
Open
IPWright83 wants to merge 1 commit into
Open
IPWright83 wants to merge 1 commit into
IPWright83 wants to merge 1 commit into
Conversation
Adds <Geo>, a composition root (like <XYChart>) for map charts. Rather than a single fixed plot, it composes any combination of new layers as children, all sharing one d3-geo projection fitted to the plot area: - <Choropleth> shades each region of a GeoJSON/TopoJSON geography by a quantized color scale, joined against the chart's data by a region key. - <GeoPoints> plots a marker per row at its lat/lon, optionally sized by a value field. - <GeoPie> plots a small Pie/Donut glyph per location, summarizing that location's rows by category (e.g. energy mix per country). - <GeoArcs> draws a great-circle flow line between a source/target lat/lon pair per row (e.g. migration or trade between regions). - <GeoPaths> connects each group's rows into a single ordered route across the map (e.g. a tracked animal's migration path). Any combination of layers can be composed onto one <Geo>. Supports both GeoJSON and TopoJSON (via the new topojson-client dependency) for `features`, any standard d3-geo projection or a custom factory, and Canvas rendering via useCanvas alongside a new renderGeoPath Canvas primitive (registered under the "geo" path type) shared by every layer that draws an arbitrary projected shape. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SHs98Edsbh6eZLEKKhJMS3
🦋 Changeset detectedLatest commit: 15c0009 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
IPWright83
marked this pull request as ready for review
August 26, 2026 19:41
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
<Geo>, a map/choropleth chart family. It's a composition root like<XYChart>- self-contained, but rather than a single fixed plot it composes any combination of new layers aschildren, all sharing oned3-geoprojection fitted to the plot area:<Choropleth>- shades each region of a GeoJSON/TopoJSON geography by a quantized color scale, joined against the chart's data by a region key (e.g. population by country/continent).<GeoPoints>- plots a marker per row at its lat/lon, optionally sized by a value and colored by category.<GeoPie>- plots a small Pie/Donut glyph per location, summarizing that location's rows by category (e.g. energy mix per city).<GeoArcs>- draws a great-circle flow line between a source/target lat/lon pair per row (e.g. migration or trade between regions).<GeoPaths>- connects each group's rows into a single ordered route across the map (e.g. a tracked animal's migration path).Any combination of layers can be composed onto one
<Geo>- see theComposedstory/Composing layersdoc section.Supports both GeoJSON and TopoJSON (via the new
topojson-clientdependency) forfeatures, any standardd3-geoprojection (equalEarth/mercator/naturalEarth1/orthographic/albersUsa/albers/azimuthalEqualArea) or a custom projection factory, and Canvas rendering viauseCanvas.Implementation notes
renderGeoPathCanvas primitive in@chart-io/core(registered under the"geo"path type inrenderElements), shared by every layer that draws an arbitrary projected shape (regions, arcs, routes). It replays the SVGdstring'sM/L/Zcommands directly rather than depending on thePath2Dglobal, which isn't available in every Canvas host environment (e.g. jsdom's canvas polyfill).normalizeGeoFeaturescore util converts either a plain GeoJSONFeature/FeatureCollectionor a TopoJSONTopologyinto one consistentFeatureCollection.<ShapesPlot>generic React primitive (alongside the existingNodesPlot/RectsPlot/LinksPlot/LabelsPlot) renders arbitrary filled/stroked shapes from adaccessor - powers<Choropleth>'s regions,<GeoArcs>'s flow lines and<GeoPaths>'s routes.GeoContextprovided by an internalGeoLayer(the real direct child of<Chart>, carrying theisPlot/requiresVirtualCanvasflags<VirtualCanvas>looks for) - not the Redux store, to keep this contained to the react package.world_map_dataset.jsStorybook dataset - deliberately low-resolution, hand-authored continent bounding regions (not real coastlines), so the Storybook/Chromatic build has no external basemap dependency.Test plan
pnpm --filter @chart-io/core test/lint/types/buildpnpm --filter @chart-io/react test/lint/types/buildpackages/react/src/lib/components/Plots/Geo/Geo.unit.tsx)normalizeGeoFeatures(packages/core/src/utils/geo/normalizeGeoFeatures.unit.ts)🤖 Generated with Claude Code
https://claude.ai/code/session_01SHs98Edsbh6eZLEKKhJMS3
Generated by Claude Code