29:null 2a:["$","title",null,{"children":"05. Abstract Data Visualization | autarkjs | Observable"}] 2f:T46a,

Autark is a modular toolkit for building urban visual analytics applications in the browser. Its modules share a common data model, allowing data retrieved from a spatial database, processed by a computation pipeline, displayed on a map, and explored through charts to remain connected throughout an application.

This notebook introduces autk-plot, the module responsible for abstract data visualizations. It provides reusable charts for investigating distributions, relationships, categories, and temporal patterns in urban data. More importantly, charts are not isolated outputs: they can emit selections and react to selections produced by other charts or by an autk-map view.

The following sections introduce the data model used by autk-plot, create a first visualization, transform feature attributes into aggregated chart data, and finally connect multiple plots through interaction events.

30:T763,

autk-plot is a D3-based charting module for visualizing attributes stored in GeoJSON feature collections. A plot receives a container element and a configuration object describing the chart type, the input collection, the attributes to encode, and optional labels, dimensions, transformations, and interaction events.

The module currently supports several chart types, including scatter plots, bar charts, line charts, tables, heat matrices, and parallel-coordinates plots. Each chart maps properties from the input features to visual channels such as position, color, size, or category.

Rather than requiring a separate table or data-frame representation, autk-plot reads values directly from feature.properties. This makes it easy to use data returned by autk-db or data already loaded into autk-map.

A typical plot configuration specifies:

a chart type, such as "scatterplot" or "barchart";
a GeoJSON feature collection;
the feature-property names used as attributes;
human-readable labels for axes and titles;
optional transformations, such as binning or aggregation; and
optional events that enable clicks or brushing.

The next section explains why features are the common unit shared by Autark modules and how this design supports linked visualizations.

31:[{"id":"95953c71e02f097c316898e50848803a6910a86cd08e7e58b97ee379300a491bb9f10d2cbe73b6f0a4c168f71fc904fc43f4211128f5f3a8abded623830a1f24","href":"https://static.observableusercontent.com/files/95953c71e02f097c316898e50848803a6910a86cd08e7e58b97ee379300a491bb9f10d2cbe73b6f0a4c168f71fc904fc43f4211128f5f3a8abded623830a1f24","name":"feature.png","type":"image/png","lastModified":1787767703400.418,"size":285733},{"id":"a3356a645d3a303bfac3918053919809e49e0a6edbf2f3474c11ddcbe5c576941449761645f49603d2f318a165abb0b55bacf1acc0b6b57db32a50bdbc884d91","href":"https://static.observableusercontent.com/files/a3356a645d3a303bfac3918053919809e49e0a6edbf2f3474c11ddcbe5c576941449761645f49603d2f318a165abb0b55bacf1acc0b6b57db32a50bdbc884d91","name":"mnt_neighs.geojson","type":"application/geo+json","lastModified":1787848741776.535,"size":1534111}] 2d:{"id":"f0de5fb1ed4de556","slug":"05-abstract-data-visualization","title":"05. Abstract Data Visualization","thumbnail":"614cef3f4c45e429b58872a7846fef8d510241559dc4018874a483143235c7b1","access_level":"public","create_time":"$D2026-08-26T17:27:47.013Z","update_time":"$D2026-09-21T18:42:01.042Z","view_time":null,"first_public_time":"$D2026-09-26T13:36:33.333Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"da0708b4e2e72fbf","login":"autarkjs","name":"autarkjs","avatar_url":"https://avatars-next.observableusercontent.com/3e39bfb8c362b4cd667de182cfadb92766615a4805b8e6bf35cf1aca1f963943","tier":"pro_2024"},"version":350,"publish_version":350,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c9fd3702a791124","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":null}],"members":[{"type":"team","id":"da0708b4e2e72fbf","login":"autarkjs","name":"autarkjs","avatar_url":"https://avatars-next.observableusercontent.com/3e39bfb8c362b4cd667de182cfadb92766615a4805b8e6bf35cf1aca1f963943","tier":"pro_2024","role":"editor"},{"type":"individual","id":"9c9fd3702a791124","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"993a74142b1b1344","slug":"urban-computing-with-autark","title":"Urban Analytics with Autark","owner":{"id":"da0708b4e2e72fbf","login":"autarkjs","name":"autarkjs"}},"type":"notebook","body":{"title":"05. Abstract Data Visualization","cells":[{"id":0,"value":"# 05. Abstract Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## About\n\n

\n This notebook was produced for the Urban Data Analytics with Autark tutorial, presented at SIBGRAPI 2026 by:\n

\n\n- João Lucas Rulff da Costa (FGV, [jlrulff@gmail.com](mailto:jlrulff@gmail.com))\n- Lucas Alexandre (UFF, [lucasalexandre@id.uff.br](mailto:lucasalexandre@id.uff.br))\n- Talisson Souza (UFF, [talissonsouza@id.uff.br](mailto:talissonsouza@id.uff.br))\n- Gustavo Moreira (UIC, [gmorei3@uic.edu](mailto:gmorei3@uic.edu))\n- Daniel Oliveira (UFF, [danielcmo@ic.uff.br](mailto:danielcmo@ic.uff.br))\n- Harish Doraiswamy (MSR, [harish.doraiswamy@microsoft.com](mailto:harish.doraiswamy@microsoft.com))\n- Fabio Miranda (UIC, [fabiom@uic.edu](mailto:fabiom@uic.edu))\n- Claudio Silva (NYU, [csilva@nyu.edu](mailto:csilva@nyu.edu))\n- Marcos Lage (UFF, [mlage@ic.uff.br](mailto:mlage@ic.uff.br))\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## Table of contents\n\n\n\n

Introduction\n
1. Autark Plot (autk-plot)
2. Feature centric model
3. First example
\n
Data transformation

@transform placeholder

Interactions\n
1. Mouse events
2. Linked visualizations
\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"## 1 Introduction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"### 1.1. Autark Plot (autk-plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"$30","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"### 1.2. Feture centric model","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"

\n Autark uses a feature-centric model as its architectural choice, making the geographical feature the atomic unit of the toolkit. In fact, many urban visual analytics systems become complex because data and interaction operate at different levels of abstraction:\n

A database may return rows;
A renderer may consume buffers;
A user interaction may produce a pixel coordinate or a brush box.

\n Autark collapses these levels into a single principle: all modules operate on features.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"As illustrated in the figure above, a **feature** is a triple `f = (g, A, id)` where:\n\n- `g` is the feature **geometry**;\n- `A` is the set of **named attributes** of the features;\n- `id` is the **unique identifier** of the feature.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"

\n A collection is C = {f1, f2, ..., fn} and a selection is a subset of feature identifiers S drawn from that collection.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"This is why the same conceptual objects can flow across modules:\n\n- `autk-db` returns a feature collection\n- `autk-map` renders feature geometries\n- `autk-plot` binds to feature properties\n- `autk-compute` consumes features to produce data\n- interactions return selections of features","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"### 1.3. First example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"

\n As discussed, creating a plot with autk-plot begins by loading a dataset in the GeoJSON FeatureCollection format. In this example, we use Manhattan’s neighborhoods as the feature collection of\n interest.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"mnt_neighs = FileAttachment(\"mnt_neighs.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"

\n Let's assume that one wants to create a scatteplot based on the neighborhoods perimeter and area. Inspecting a feature of the collection, we see that two properties are available: shape_leng and shape_area.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"feat = Object.keys(mnt_neighs.features[0].properties)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"

\n\nWe can map these properties to the scatterplot’s x- and y-axes, as shown below.\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"plot01 = html`

`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"scatter = new AutkPlot(plot01, {\n type: \"scatterplot\",\n collection: mnt_neighs,\n attributes: {\n axis: [\"shape_leng\", \"shape_area\"]\n },\n labels: {\n axis: [\"Perimeter\", \"Area\"],\n title: \"Perimeter Vs Area\"\n },\n width: 800,\n height: 420,\n margins: { left: 25, right: 20, top: 50, bottom: 64 },\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"

\n To create a chart, autk-plot uses the AutkPlot constructor. It receives two arguments: an HTML container, which determines where the chart is rendered, and a configuration object, which defines the chart.\n

\n

\n\n

\n The configuration begins with type, which specifies the chart to create. Here, \"scatterplot\" creates a scatterplot. The collection supplies the GeoJSON FeatureCollection to\n visualize. The attributes.axis array maps feature-property names to the x- and y-axes: shape_leng is used for the x-axis and shape_area for the y-axis. The labels object defines\n readable axis labels and the chart title. Finally, width and height set the chart dimensions in pixels.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"## 2. Data transformation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"

\n autk-plot may need to pre-process a FeatureCollection before rendering. For example, a bar chart often cannot consume the raw collection directly, since it may require binned, sorted, or aggregated values\n rather than one mark per feature.\n

\n

\n\n

\n To do so, you can use the transform configuration, which let you bin, sort, aggregate arrays, and reduce time series without leaving the charting API.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"### 2.1. `@transform` placeholder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"

\n The @transform placeholder tells autk-plot where the output of a transformation should be placed in the chart configuration. When a transform computes new values, those values need to be connected to one of\n the visual channels used by the plot. Instead of naming a property from the original FeatureCollection, you use @transform to indicate that this channel should receive the derived result produced by the\n transform.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"

\n For example, when using binning-1d, the transform creates aggregated numeric values for each bin, so @transform should be placed in attributes.axis[1], where the bar height will read those\n computed values.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"plot02 = html`

`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"bar = new AutkPlot(plot02, {\n type: 'barchart',\n collection: mnt_neighs,\n attributes: { axis: ['shape_area', '@transform'] },\n labels: {\n axis: ['Area range', 'Count'],\n title: 'Area histogram',\n },\n transform: {\n preset: 'binning-1d',\n options: { bins: 12, reducer: 'count' },\n },\n width: 800,\n height: 420,\n margins: { left: 25, right: 20, top: 50, bottom: 64 },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"## 3. Interactions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"

\n\n`autk-plot` supports coordinated views through interaction events. A plot emits an event when the user selects marks, and other plots, maps, or interface elements can react to that selection.\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"### 3.1. Mouse events","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"

\n Enable the interactions required by a plot through its `events` option:\n\n

`PlotEvent.CLICK`: emitted when the user clicks a mark.
`PlotEvent.BRUSH`: emitted while drawing a rectangle selection.
`PlotEvent.BRUSH_X`: emitted when brushing horizontally.
`PlotEvent.BRUSH_Y`: emitted when brushing vertically.

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":" plot03 = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"barDiv = plot03.querySelector(\"#bar\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"scatterDiv = plot03.querySelector(\"#scatter\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"p01 = new AutkPlot(scatterDiv, {\n type: \"scatterplot\",\n collection: mnt_neighs,\n attributes: {axis: [\"shape_leng\", \"shape_area\"]},\n labels: {\n axis: [\"Perimeter\", \"Area\"],\n title: \"Brush points to select neighborhoods\"\n },\n width: 500,\n height: 420,\n margins: {left: 25, right: 10, top: 50, bottom: 70},\n events: [PlotEvent.BRUSH]\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"p02 = new AutkPlot(barDiv, {\n type: \"barchart\",\n collection: mnt_neighs,\n attributes: {axis: [\"shape_area\", \"@transform\"]},\n labels: {\n axis: [\"Area range\", \"Neighborhood count\"],\n title: \"Click or brush bars to select neighborhoods\"\n },\n transform: {\n preset: \"binning-1d\",\n options: {bins: 12, reducer: \"count\"}\n },\n width: 500,\n height: 420,\n margins: {left: 25, right: 10, top: 50, bottom: 70},\n events: [PlotEvent.CLICK]\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"### 3.2. Linked visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"

\n\nRegister a callback with plot.events.on(event, callback). The callback receives an object containing selection, an array of indices for features in the original GeoJSON collection.\n\n

\n\n ```js\n p01.events.on(PlotEvent.BRUSH, ({selection}) => {\n console.log(selection);\n });\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"

\n\nBecause both plots use the same neighborhood collection, the selection generated by one plot can be applied directly to the other with setSelection().\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"{\n p01.events.on(PlotEvent.BRUSH, ({selection}) => {\n p02.setSelection(selection);\n });\n\n p02.events.on(PlotEvent.CLICK, ({selection}) => {\n p01.setSelection(selection);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":" autk = await import(\"https://esm.sh/@urban-toolkit/autk?bundle\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"AutkPlot = {\n return autk.plot.AutkPlot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"PlotEvent = autk.plot.PlotEvent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"2","titling":"auto"}} 2e:"$2d:body"