StreetWeave: Declarative Spatial Network Visualizations

• StreetWeave is a declarative framework that uses a formal grammar to specify multivariate visualizations over street and pedestrian networks.
• It integrates thematic and physical data layers via spatial relations like buffer and nearest neighbor, supporting urban planning and public health analytics.
• Its implementation with React.js, Leaflet.js, and D3.js enables interactive, scalable SVG overlays with embedded chart capabilities for actionable insights.

StreetWeave is a declarative framework for the specification and creation of multivariate, spatial network visualizations over street and pedestrian networks, intended to support analysts in domains such as urban planning, climate research, and public health. Its design centers on a grammar that enables high-level, human-readable specification of visualization configurations—removing the need for procedural coding and facilitating rapid development of custom, multi-layered network maps. The framework addresses key technical and methodological demands identified through an extensive design space analysis of prior street-overlaid visualization research.

1. Declarative Visualization Grammar

StreetWeave’s core innovation is its formal, declarative grammar, which abstracts the visualization specification to a concise, structured notation. The grammar allows users to define (i) the base map properties (such as street color and width), (ii) the spatial units of analysis (segment, node, point) and their graphical representations (line, rect, matrix), (iii) the data layers imported (thematic or physical), (iv) spatial relations linking data to streets (e.g., buffer aggregation, nearest neighbor, containment), and (v) optional queries for local filtering.

The grammar structure is exemplified by the formal pattern:

$$\text{StreetWeave} := (\text{map}^+, \text{unit}^+, \text{data}^+, \text{relation}^{?}, \text{query}^{?})$$

where each element is itself parameterized by visual and geometric attributes:

• $$\text{unit} := \text{type}, \text{density}^{?}, \text{method}, \text{opacity}^{?}, \text{color}^{?}, \dots$$
• $$\text{type} := \text{"segment"} \mid \text{"node"} \mid \text{"point"}$$
• $$\text{method} := \text{"line"} \mid \text{"rect"} \mid \text{"matrix"}$$

Visual channels (width, color, opacity, dash pattern, squiggle modulation, orientation, alignment) can be arbitrarily remixed and even connected to external visualization grammars such as Vega-Lite—enabling embedded charts at the street unit level with a single JSON snippet. The grammar is implemented in JavaScript, parsed via JSON schema validation, and executed as an SVG overlay atop interactive street maps.

2. Design Space Foundations and Analysis

Prior to the grammar’s construction, the authors systematically coded 45 studies employing street-overlaid visualizations, identifying categorical axes along which such systems operate:

• Analytical Purpose: Visualizations primarily address identification, comparison, and pattern analysis tasks. For example, hotspot detection (e.g., crime clusters), comparative assessment (e.g., curb ramp availability across blocks), and spatiotemporal trend exploration (e.g., pollution or traffic evolution).
• Visualization Approach: Studies exploit a broad spectrum of graphical encodings. Color gradients, line width, opacity, dashing, and glyph overlays are used to support multivariate mapping. Compositional methods such as superposition, juxtaposition, and multi-channel encoding are common, often with consideration for overwhelming overplotting.
• Data Sources: Data fall into direct observations (GPS tracks, sensor networks, manual audits) and derived metrics (aggregated accessibility, traffic means, or health indicators). Thematic (e.g., socioeconomic) and physical (e.g., street geometry) layers are often linked via spatial relations.

This systematic mapping of visualization practice clarified both technical barriers for non-programmers and the requirements for flexibility and extensibility in analytic use.

3. Framework Components and Computational Pipeline

StreetWeave’s processing pipeline is segmented into configurable components, each corresponding directly to grammar primitives:

• General Map Setup: Users specify high-level map parameters (background color, base street styling).
• Unit Specification: User-defined units select both the spatial granularity (street segment, intersection node, arbitrary point) and the method of graphical rendering. Subdivision via density parameters enables micro-scale analysis; orientation and alignment parameters adjust the positioning of glyphs and lines for multi-layered representations.
• Data Integration and Spatial Relations: The framework supports direct ingestion of both thematic and physical data. Thematic layers (e.g., incident counts, accessibility scores) are linked to street units via spatial join operators (buffer, nearest, containment) and aggregation functions (mean, sum, median).
• Query Operations: Analysts may inject location-based filters (address, radius) for focus or for localized style transformation.
• Chart Embedding: Vega-Lite specifications can be included at the unit level for richer, compound visualizations.

The SVG-based rendering engine translates JSON grammar configurations into interactive, scalable overlays, with zoom-dependent rendering to manage visual complexity.

4. Implementation and Accessibility Features

StreetWeave is implemented on top of React.js, Leaflet.js, and D3.js, with grammar specifications enforced via JSON schema. The web interface provides a text editor for live grammar editing and a map panel for network rendering. Built-in defaults and schema validation facilitate rapid onboarding for non-programmers.

Accessibility is further amplified through the declarative grammar’s capacity to:

• Abstract away imperative code; users only need to specify “what” to display, not “how.”
• Integrate external grammars (e.g., Vega-Lite), supporting reuse and composition.
• Enable scale-adaptive rendering based on zoom, ensuring network maps remain intelligible at macroscopic and microscopic levels.

5. Case Studies and Application Scenarios

Several practical scenarios demonstrate StreetWeave’s analytic value:

• Sidewalk Accessibility Analysis: Mapping absence of curb ramps, surface condition, and obstacles onto segments using multi-line, multi-color encodings (e.g., Project Sidewalk data). Segment alignment channels (center, left, right) encode condition types.
• Sub-Segment Granularity Visualizations: Segment subdivision and perpendicular bristle orientation elucidate fine-grained variation, aiding targeted infrastructure diagnosis.
• Urban Incident Data Mapping: Crime and 311 service call records are aggregated at street nodes and segments, with embedded charts visualizing multivariate incident patterns for public safety analytics.

The rapid prototyping capability and flexible reconfiguration lower the technical barrier for iterative analysis and stakeholder engagement.

6. Future Prospects and Extensibility

Ongoing and planned improvements include:

• Empirical Usability Studies: To calibrate design defaults and encoding strategies based on user preferences and formal evaluation.
• Rendering Optimization: Exploration of WebGL/WebGPU for large-scale SVG overlays to sustain interactive responsiveness.
• Plugin Architecture: Modular extensibility is anticipated, enabling advanced users to contribute bespoke visual components.
• Integration with GIS and Urban Analytics Platforms: Plans exist for interoperability with platforms such as QGIS, ArcGIS, UTK, and Curio.
• Advanced Analytical Features: Prospects for incorporating “what-if” simulation layers to model interventions (e.g., road widening) and track their projected impacts.
• Workflow and Provenance Enhancements: Strengthening reproducibility and data provenance tracking within analytic workflows.

7. Significance and Technical Contributions

StreetWeave advances the practice of street and pedestrian network visualization by systematizing multivariate spatial mapping in a domain-agnostic, extensible grammar. The framework provides an authoritative reference implementation for declarative spatial network visualization:

• It democratizes network analysis for domain experts lacking programming expertise.
• It operationalizes design space insights into a coherent computational tool.
• By encoding both thematic and physical spatial relations, it supports composite, analytically rich maps suited to decision-making contexts.
• Its extensible architecture and modular specification enable adaptation to emergent analytic needs and data sources.

A plausible implication is that StreetWeave, by abstracting the specification of multivariate street-overlaid visualizations, could become a foundation for reproducible, analytically rigorous methods across urban analytics research and practice (Srabanti et al., 10 Aug 2025).