Geo Shape Mark

geoShape renders GeoJSON through a projection created for the final responsive plot bounds. It is available only from the geographic capability subpath:

import { geoShape } from '@tanstack/charts/geo'

The subpath owns d3-geo path generation and centroid calculation. The application still chooses and configures the D3 projection.

geoShape

function geoShape<TDatum extends GeoPermissibleObjects>(
  source: Iterable<TDatum>,
  options: GeoShapeOptions<TDatum>,
): ChartMark<TDatum, number, number>

The required projection factory receives a GeoProjectionContext containing the final chart bounds and materialized data. Return a D3 GeoProjection, GeoStreamWrapper, or null.

geoShape(features, {
  key: (feature) => feature.properties.id,
  projection: ({ chart, data }) =>
    geoEqualEarth().fitExtent(
      [
        [chart.x, chart.y],
        [chart.x + chart.width, chart.y + chart.height],
      ],
      { type: 'FeatureCollection', features: data },
    ),
})

GeoShapeOptions

Option	Type	Default	Meaning
id	string	Layer-derived	Stable mark ID
className	string	None	Class added beside ts-chart__geo
projection	(GeoProjectionContext) => projection	Required	Builds the D3 projection from final plot bounds
key	Channel<TDatum, ChartKey>	Unique id, then index	Stable feature identity
color	Channel<TDatum, ChartKey?>	No group	Color-scale input and interaction group
r	number \| Channel<TDatum, number?>	4.5	Point and MultiPoint radius in pixels
rScale	(value: number) => number	Identity	Maps a quantitative value to a pixel radius
fill	VisualChannel<TDatum, string>	Resolved color	Feature fill
fillOpacity	number	SVG default	Fill opacity
stroke	VisualChannel<TDatum, string>	'none'	Boundary stroke
strokeOpacity	number	SVG default	Boundary opacity
strokeWidth	number	SVG default	Boundary width
strokeDasharray	string	SVG default	Boundary dash pattern
opacity	number	SVG default	Whole-feature opacity
anchor	(datum, index, data) => [lon, lat]	geoCentroid()	Semantic longitude/latitude for the interaction point

Each drawable feature becomes one SVG path. geoPath(projection).centroid() sets the point's screen position. anchor, or geoCentroid() when omitted, sets its semantic x/y values. Nonfinite centroids do not emit an interaction point.

For Point and MultiPoint geometry, r is passed to D3 geoPath().pointRadius() for each datum. Add rScale when the channel carries a magnitude rather than a pixel radius; invalid or negative results are omitted.

GeoProjectionContext, GeoShapeOptions, and the geoShape implementation are exported from @tanstack/charts/geo. Keep both chart axes null and normally disable guides because the mark does not materialize Cartesian scale channels. Boundary datasets are deliberately not part of this entry point; convert application-owned TopoJSON to GeoJSON before passing features to the mark. See Maps and Spatial Charts.

geoShape#

GeoShapeOptions#

geoShape

GeoShapeOptions