Interactivity

autk-plot emits events when users interact with marks. You can listen through plot.events.on(event, handler) and respond by updating another UI elements.

Data model

AutkPlot expects a GeoJSON FeatureCollection as input. Each feature in collection.features becomes one data row, and feature.properties keys are mapped to visual channels through attributes.

Selections — whether from clicks, brushes, or setSelection — are always expressed as arrays of source feature indices, i.e., the positions of the selected features inside the original collection.features array.

chart.events.on(PlotEvent.CLICK, ({ selection }) => {
  // selection is [3, 12, 41], not feature ids
});

Same indices everywhere

Because autk-map also refers to features by their position in the loaded collection, a selection produced by a plot can be passed directly to map.setHighlightedIds(..., selection) and vice-versa.

Supported events

Event	Trigger	Available on
PlotEvent.CLICK	Click a mark	Bar chart, table
PlotEvent.BRUSH	Drag a 2D brush	Scatter plot, heat matrix
PlotEvent.BRUSH_X	Brush horizontally	Bar chart (binned), parallel coordinates
PlotEvent.BRUSH_Y	Brush vertically	Parallel coordinates

Every event payload contains a selection array with the source feature indices (positions in the input collection.features).

Enable the event you need

Events are only emitted if they are requested through the events array in the plot config. Some plots also emit them by default depending on type, but it is safest to declare them explicitly.

Click

Click selection is useful for bar charts and tables where the user picks a single category or row.

Bar chart click

Table click

Brush

Scatter plots and heat matrices support rectangular 2D brushes. The event fires while the user drags and again on release.

Scatter plot brush

Heat matrix brush

Axis brushes

Parallel coordinates support per-axis brushes. BRUSH_Y is emitted when the user brushes along any Y axis, and the current selection is the intersection of all active brushes.

Programmatic selection

You can highlight features from code with setSelection. This is the main mechanism for linked views: a map picking event becomes a chart highlight, and a chart brush becomes a map highlight.

plot.setSelection([0, 3, 7]);

To clear the selection, pass an empty array:

plot.setSelection([]);

Inspect the current selection

plot.selection returns the active selection as an array of source feature indices.

Updating data

Call updateCollection to replace the data and redraw in place:

plot.updateCollection(newGeojson);

This is useful when the chart is filtered by another view or when new data arrives from autk-db.

Next steps

• Overview — a complete linked map + plot example.