GeographicGenerated from the public API

GeoScatterChart

Plot positions and routes on a plane whose bounds and coordinate meaning you declare.

@luc/ui/charts

What it shows

Place point observations on a registered map and size them by a supplied value.

Live preview

Point locations on the same registered map, sized by the value the caller supplied.

<GeoScatterChart
  mapName="luc-showcase-grid"
  points={[
    { name: "R2C3", coordinates: [-30, 45], value: 42 },
    { name: "R2C5", coordinates: [90, 45], value: 28 },
  ]}
  valueFormat={{ kind: "integer" }}
  ariaLabel="Readings on a grid map"
/>

Usage

The values are prepared by the caller: this component draws the points it is given and computes no statistic of its own, so units, scaling and any summary have to be settled before the data reaches it.

It is drawn by the ECharts engine.

Worked examples with real data are on the family overview: Geographic

import { GeoScatterChart } from "@luc/ui/charts";

<GeoScatterChart
  mapName="luc-showcase-grid"
  points={[
    { name: "R2C3", coordinates: [-30, 45], value: 42 },
    { name: "R2C5", coordinates: [90, 45], value: 28 },
  ]}
  valueFormat={{ kind: "integer" }}
  ariaLabel="Readings on a grid map"
/>

Data contract

`mapName` must reference a registered map; each `point` supplies `name`, map `coordinates` and a numeric `value`. Coordinates use the map's declared coordinate system.

Important configuration

Use `valueFormat` for the point measure, state the map registration and coordinate convention, and keep point size tied to a meaningful domain.

Guidelines

When not to use

Do not treat screen distances as geographic distances without accounting for the map's projection and bounds.

Configuration

Exported symbols
Export	Kind	Signature
`GeoScatterChart`	17 documented props	`({ mapName, points, valueFormat, maxSymbolSize, showRegions, boundingCoords, variant, title, description, state, height, className, ariaLabel, ariaDescription, onReady, onEvent, eager, }: GeoScatterC…`