@graphique/geom-point

For points, scatterplots, and bubbles in Graphique.

Install

npm install @graphique/geom-point # @graphique/graphique is a peer dependency

pnpm add @graphique/geom-point # @graphique/graphique is a peer dependency

yarn add @graphique/geom-point # @graphique/graphique is a peer dependency

bun add @graphique/geom-point # @graphique/graphique is a peer dependency

Examples

Basics

Categorical fill

Continuous fill

Sized points

API

`GeomPoint(props: GeomProps) => React.JSX.Element`

`GeomPropsinterface`

name	description
`data?`	data used by this Geom This will overwrite top-level `data` passed to `GG` as it relates to mappings defined in `aes`. `Datum[]`
`aes?`	functional mapping applied to `data` for this Geom This extends the top-level `aes` passed to `GG`. Any repeated mappings defined here will take precedence within the Geom. `GeomAes`
`attr?`	attributes passed to the underlying SVG elements `React.SVGAttributes`
`showTooltip?`	should this Geom have a tooltip associated with it (default: `true`) `boolean`
`brushAction?`	determines what happens when brushing (clicking and dragging) over the drawing area `BrushAction.ZOOM`
`entrance?`	where elements should start as they enter the drawing area (default: `Entrance.BOTTOM`) `Entrance`
`isClipped?`	should elements be strictly clipped at the bounds of the drawing area (default: `false`) `boolean`
`focusedKeys?`	array of keys (of the kind that are generated by `aes.key`) used to programmatically focus associated points `string[]`
`focusedStyle?`	styles applied to focused elements `React.CSSProperties`
`unfocusedStyle?`	styles applied to unfocused elements `React.CSSProperties`
`onDatumFocus?`	callback called for mousemove events on the drawing area when focusing data `(data: Datum[], index: number[]) => void`
`onDatumSelection?`	callback called for click events on the drawing area when selecting focused data `(data: Datum[], index: number[]) => void`
`onExit?`	callback called for mouseleave events on the drawing area `() => void`
`isAnimated?`	should elements enter/update/exit with animated transitions (default: `true`) `boolean`

`Legend(props: LegendProps) => React.JSX.Element | null`

`LegendPropsinterface`

name	description
`title?`	title of legend `React.ReactNode`
`orientation?`	determines vertical/horizontal orientation of categorical legend members (default: `LegendOrientation.V`) `LegendOrientation`
`format?`	function for formatting legend member labels (categorical) or tick labels (continuous) `(v: string, i: number) => string`
`width?`	width of continuous legend in pixels (default: `320`) `number`
`numTicks?`	approximate number of ticks for continuous legend (default: `width / 64`) `number`
`onSelection?`	callback called for click events on legend members `(v: string) => void`
`style?`	additional styles passed to legend container `React.CSSProperties`

`SizeLegend(props: SizeLegendProps) => React.JSX.Element | null`

`SizeLegendPropsinterface`

name	description
`title?`	title of legend `React.ReactNode`
`labelDirection?`	which side of legend to draw labels (default: `SizeLabelDirection.R`) `SizeLabelDirection`
`numCircles?`	number of circles to use as references in legend (default: `3`) `2 \| 3`
`radiiVals?`	fixed breakpoints within size range for circle references (takes precedence over `numCircles`) `[number, number, number] \| [number, number]`
`format?`	function for formatting labels `(v: number, i: number) => string`
`width?`	width of legend in pixels (default: `120`) `number`
`style?`	additional styles passed to legend container `React.CSSProperties`

GeomLine GeomTile