autk-plot

autk-plot is a D3-based chart library that takes a GeoJSON FeatureCollection as input and turns feature.properties into interactive charts. Because it shares the same data model as autk-db and autk-map, it is straightforward to build coordinated visualizations where charts and maps selection stay in sync.

The library is also extensible. It exposes base classes such as PlotBaseData, PlotBaseInteractive, and PlotStyle, so custom plot types can reuse the same GeoJSON input, event model, and selection mechanism.

What it covers

• Overview: a complete map + plot linked example using a bar chart with a binning transform.
• Chart types: scatter plots and parallel coordinates work directly on raw GeoJSON properties.
• Transformations: bar charts, line charts, tables, and heat matrices combined with sorting, binning, and aggregation.
• Interactivity: click, brush, and programmatic selection.
• Linked views: react to map picking and drive map highlights from the chart.

Installation

npm install @urban-toolkit/autk-plot

Basic usage

Every chart is created through the unified AutkPlot constructor. Pass the host element as the first argument and a configuration object as the second:

import { AutkPlot } from '@urban-toolkit/autk-plot';

const plot = new AutkPlot(div, {
  type: 'scatterplot',
  collection: geojson,
  attributes: { axis: ['shape_leng', 'shape_area'] },
  labels: {
    axis: ['Perimeter', 'Area'],
    title: 'Neighborhood area vs perimeter',
  },
  width: 800,
  height: 420,
});

The collection is a standard GeoJSON FeatureCollection. Each feature becomes one data row, and property names are mapped to visual channels through attributes.

Property names are just strings

attributes.axis accepts the property keys found in feature.properties. There is no data-frame abstraction — the chart reads directly from GeoJSON.

Linked map + plot example

The example below loads the same neighborhood layer into a map and a histogram. The bars are created with a binning-1d transform; clicking or brushing a bin highlights every neighborhood that falls inside that area range on the map.

Common configuration

Option	Type	Description
type	string	Chart type: scatterplot, parallel-coordinates, barchart, linechart, table, heatmatrix.
collection	FeatureCollection	Source GeoJSON.
attributes.axis	string[]	Property names mapped to axes.
attributes.color	string	Optional property mapped to the color channel.
labels	object	Human-readable axis labels, title, and color legend label.
margins	object	Pixel margins around the drawing area.
width / height	number	Canvas size in pixels.
events	PlotEvent[]	Events the plot should emit.
transform	object	Optional pre-render transform such as sorting or binning.
domainSpec	ColorMapDomainSpec	Numeric range or explicit categories used for color encoding.
colorMapInterpolator	ColorMapInterpolator	Palette for numeric color values.
categoricalColorMapInterpolator	ColorMapInterpolator	Palette for string color values; defaults to CAT_OBSERVABLE10.
tickFormats	string[]	D3 number-format strings, one per axis.

Categorical vs numeric axes

Scatter plots and parallel coordinates require numeric axes. Bar charts expect a categorical first axis and a numeric second axis.

Colors and axis formatting

Choose the palette according to the color attribute's values, not the axis types. Numeric color values use colorMapInterpolator; string categories use categoricalColorMapInterpolator.

~s formats compact SI values, while ,.0f formats integers with thousands separators. These are D3 format strings, not JavaScript format expressions.

MIN_MAX derives a numeric range from the data; PERCENTILE can limit it to percentile bounds such as params: [5, 95]. USER accepts explicit numeric bounds or category strings. Share the same numeric domain and interpolator across charts (or a thematic map) to keep equal values the same color.

For a string property such as category, configure a categorical palette and an explicit category order:

The named properties must exist in your input collection. Use the same category domain/order across related views instead of inferring a different order from each subset. See PlotConfig for all options.

Margins

Default margins work for most cases, but long labels or rotated tick text often need more room. Override them in the constructor:

new AutkPlot(div, {
  ...
  margins: { left: 80, right: 20, top: 50, bottom: 80 },
});

What’s next

• Chart Types — scatter plots and parallel coordinates.
• Transformations — bar charts, line charts, tables, and heat matrices with transforms.
• Interactivity — click, brush, and programmatic selection.