The Urban Toolkit: A Grammar-based Framework for Urban Visual Analytics

TL;DR

The paper presents the Urban Toolkit (UTK), a grammar-based, open-source framework designed to democratize urban visual analytics by unifying the integration of thematic and physical data through knots. It details a declarative grammar for composing views, layering data, and plotting via Vega-Lite, with a backend for data management and a frontend for JSON-driven visualization. Through use-case demonstrations and expert interviews, UTK is shown to reduce development friction, enable multi-scale analysis, and support reproducible, shareable urban visualizations. The work signals a path toward extensible, community-driven urban analytics tools, while outlining ongoing work to scale performance and temporal capabilities.

Abstract

While cities around the world are looking for smart ways to use new advances in data collection, management, and analysis to address their problems, the complex nature of urban issues and the overwhelming amount of available data have posed significant challenges in translating these efforts into actionable insights. In the past few years, urban visual analytics tools have significantly helped tackle these challenges. When analyzing a feature of interest, an urban expert must transform, integrate, and visualize different thematic (e.g., sunlight access, demographic) and physical (e.g., buildings, street networks) data layers, oftentimes across multiple spatial and temporal scales. However, integrating and analyzing these layers require expertise in different fields, increasing development time and effort. This makes the entire visual data exploration and system implementation difficult for programmers and also sets a high entry barrier for urban experts outside of computer science. With this in mind, in this paper, we present the Urban Toolkit (UTK), a flexible and extensible visualization framework that enables the easy authoring of web-based visualizations through a new high-level grammar specifically built with common urban use cases in mind. In order to facilitate the integration and visualization of different urban data, we also propose the concept of knots to merge thematic and physical urban layers. We evaluate our approach through use cases and a series of interviews with experts and practitioners from different domains, including urban accessibility, urban planning, architecture, and climate science. UTK is available at urbantk.org.

Figures (8)

• Figure 1: UTK supports the integration of thematic and physical layers at multiple scales through grammar-defined knots. For example, sunlight access aggregated at a grid (a), ZIP code (b), and street level (c). It also supports thematic data over building surfaces (d).
• Figure 2: Integration between thematic and physical layers. (a) A knot is defined as the combination of a thematic and a physical layer through a spatial relation (e.g., nearest, contains) and an aggregation operator (e.g., sum, mean) if the relationship is $1:n$. Each thematic data point will be mapped to an individual physical layer coordinate (e.g., grid) and/or object. (b) For example, thematic data that is defined at a regular grid can be linked with a grid defined at the building level. Aggregations can then be performed at a building cell level (c) or building footprint level (d). (e) The concept of knots also allows for more complex data operations, such as the comparison between alternate planning scenarios.
• Figure 3: UTK abstracts spatial joins through the use of knots. Top: Knot integrating thematic and physical layers. Bottom: Knot integrating a thematic layer with the average per building.
• Figure 4: Different types of physical and thematic layers integration. Left: linked view showing the distribution of sunlight access. Middle: embeddedsurface plots showing the distribution of sunlight access over building surfaces. Right: embeddedfootprint plots showing horizontal cross-section distribution of sunlight access.
• Figure 5: UTK's frontend has a built-in JSON editor, and modifications to the JSON file are visualized in the map view. Here, we visualize the spatial distribution of noise complaints in Manhattan, with a linked parallel coordinate plot showing other urban datasets.