StreetWeave

A Declarative Grammar for the Visualization of Multivariate Data for Spatial Networks

Tools used: React, TypeScript, JavaScript, D3.js, Vega-Lite, Leaflet.js, HTML, CSS, Python, Pandas.

[Paper accepted in IEEE VIS 2025, soon to be published]. You can visit StreetWeave here: https://urbantk.org/streetweave/

Figure: Different street and pedestrian network visualizations generated with StreetWeave. (A) A multivariate line map, where different attributes, such as color and line width, effectively encode various data dimensions. (B) & (C) A pattern-based encoding approach for street overlays, utilizing dashed lines, variable opacities, and wave patterns to represent specific data attributes. (D) & (E) A bristle map and a line map that communicate data through variations in width, height, color, and opacity, with an additional alignment dimension integrating multiple encodings. (F) A multi-dimensional grid, where each cell decodes a distinct data value and the background map color can be customized. (G) & (H) Visual encodings applied directly to street intersections and segments, with an orientation dimension that allows for dynamic adjustments in plot direction.

Abstract

The visualization and analysis of street and pedestrian networks are important to various domain experts, including urban planners, climate researchers, and health experts. This has led to the development of new techniques for street and pedestrian network visualization, expanding possibilities for effective data presentation and interpretation. Despite their increasing adoption, there is no established design framework to guide the creation of these visualizations while addressing the diverse requirements of various domains. When exploring a feature of interest, domain experts often need to transform, integrate, and visualize a combination of thematic data (e.g., demographic, socioeconomic, pollution) and physical data (e.g., zip codes, street networks), often spanning multiple spatial and temporal scales. This not only complicates the process of visual data exploration and system implementation for developers but also creates significant entry barriers for experts who lack a background in programming. With this in mind, in this paper, we reviewed 45 studies utilizing street-overlaid visualizations to understand how they are applied in practice. Through qualitative coding of these visualizations, we analyzed three key aspects of street and pedestrian network visualization usage: their analytical purposes, the visualization approaches employed, and the data sources used in their creation. Building on this design space, we introduce StreetWeave, a declarative grammar for designing custom visualizations of multivariate spatial network data across multiple resolutions. We demonstrate how StreetWeave can be used to create various street-overlaid visualizations, enabling effective exploration and analysis of spatial data.