ScatterChart

One point per row: x against y, for correlations and clusters. The rows come straight from SQL.

Loading…

<ScatterChart
  data="db.iris"
  x="sepal_length"
  y="petal_length"
  xTitle="sepal length (cm)"
  yTitle="petal length (cm)"
/>

Color and size the points

A hue column colors points by category, and a size column scales each point, a fourth dimension on the same plot.

Loading…

<ScatterChart
  data="db.iris"
  x="sepal_length"
  y="petal_length"
  hue="species"
  size="petal_width"
  xTitle="sepal length (cm)"
  yTitle="petal length (cm)"
  legend="bottom"
/>

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`x` / `y`	column	Point coordinates.
`hue`	column	Color points by a category.
`size`	column	Scale point area by a numeric column.
`xTitle` / `yTitle`	`string`	Axis titles.
`xFormat` / `valueFormat`	d3-format spec	How the axis and `y` values render.
`legend`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"none"`	Legend placement.

Expressions in query and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

ScatterChart ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // ScatterChart, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}