Xiaodong Wang
CASE STUDY 03 SONX · Spatial Network Topology Suite

SONX

Turning a fragmented computational workflow into a clearer professional analysis product.

SONX brings street-network data collection, topology analysis, centrality analysis, resilience assessment, multi-area comparison, and publication-grade visualization into one cohesive, deterministic workflow.

Role Product Definition, UX/UI, System Architecture Data Visualization & Algorithmic Design
Users Urban Researchers & Planners Academic Labs, Municipal Strategy Teams
Technology Stack Python · OSMnx · NetworkX Flask REST API · HTML5 Canvas / WebGL
Validation Status verified Verified IP Software Copyright Registered (State Copyright Office)
SONX - Hero Visual Workstation Simulation
Screen 01 · Primary Multi-Scale Topology Workbench Interactive topological resilience diagnostic suite: Multi-order betweenness centrality and simulated road-closure percolation.
01 // CONTEXT & THE CHALLENGE

The analysis was possible. The workflow was not yet a product.

Street-network research often requires separate steps for acquiring data, preparing graphs, calculating indicators, comparing areas, generating visualizations, and organizing outputs. The technical methods exist, but the overall experience can remain fragmented and difficult to repeat.

FRICTION POINT 01 terminal

Fragmented Script Ecosystem

Researchers juggle isolated Python scripts, Jupyter notebooks, QGIS spatial joins, and ad-hoc CSV exports. Every project variation introduced fragile directory dependencies and unversioned parameter shifts.

Impact: Inconsistent reproducible results across spatial studies.
FRICTION POINT 02 hourglass_empty

Opaque Computation States

Heavy graph algorithms like all-pairs shortest paths or large-radius betweenness centrality run for minutes without clear progress feedback, memory warnings, or isolated execution boundaries.

Impact: Silent browser freezing and frequent computation aborts.
FRICTION POINT 03 tune

Cognitive Metric Overload

Mathematical engines dump dozens of raw topological scores (closeness, betweenness, circuity, edge density) without structuring them into communicative diagnostic tiers suitable for policy and planning.

Impact: High barrier for municipal decision-makers and planners.
FRICTION POINT 04 compare_arrows

Difficult Comparative Rigor

Contrasting multiple municipal districts or simulating pre/post disaster resilience required tedious manual data normalization, synchronized bounding box recalculations, and separate plot stitching.

Impact: High cost of cross-district spatial benchmarking.
Strategic Transformation

"Translate a multi-step computational process into a professional product that makes analytical structure, progress, comparison, and results easier to understand."

Design Core Predictable · Rigorous · Visual
01

Guided Pipeline

Replace brittle script chaining with a deterministic 8-step project lifecycle that validates state transitions between each phase.

02

Progressive Disclosure

Layer indicators from high-level resilience diagnostic scorecards down to raw edge-level graph matrices on demand.

03

Native Comparison

Make side-by-side benchmarking across divergent spatial bounding boxes a first-class citizen, synchronized in real time.

02 // COMPUTATIONAL PIPELINE

An 8-Stage End-to-End Analysis Workflow

The product formalizes the analytical method into eight sequential, reproducible stage gates. Each step enforces validation checks before feeding into subsequent algorithmic calculations.

STAGE 01 folder_special

Project Setup

Define study context, assign coordinate projection, and initialize metadata cache.

Input: CRS & Metadata
STAGE 02 public

Network Data

Ingest Overpass geometries, clean topological dead-ends, and build primal graph.

Engine: OSMnx Ingest
STAGE 03 hub

Topology Analysis

Calculate node degree, link circuity, clustering coefficients, and alpha/beta connectivity.

Engine: NetworkX Graph
STAGE 04 radar

Centrality Analysis

Compute multi-order betweenness, closeness, and eigenvector distribution.

Worker: Parallel Sparse
STAGE 05 broken_image

Resilience Assessment

Simulate targeted node attack, random link failures, and giant component percolation.

Diagnostic: Percolation Curve
STAGE 06 compare

Area Comparison

Align normalized spatial baselines and generate side-by-side indicator delta bars.

Scope: Dual/Triple View
STAGE 07 palette

Visualization

Interactive thematic heatmaps, custom choropleths, and topological radar charting.

Renderer: WebGL / 2D Canvas
STAGE 08 file_download

Export & Deliver

Package academic vector figures (SVG/PDF), GeoJSON layers, and analytical summary CSVs.

Output: Multi-Format Package
03 // STRATEGIC DECISIONS

Key Design Choice Points

Editorial examination of foundational trade-offs resolved during product architecture. We balanced programmatic power against cognitive clarity.

CHOICE POINT 01 · WORKFLOW PARADIGM STAGE-GATE vs SCRIPT ORCHESTRATION

Expose raw scripts - or design a guided analytical workflow?

The Situation: Scripts offer expert flexibility but require users to manage local environment dependencies, parameters, unlinked files, and visualization formats across disparate tools. Conversely, an overly simplified "black-box wizard" deprives researchers of rigorous parametric tuning.

The Strategic Decision: SONX organizes the work as a connected project workflow while preserving the analytical logic and algorithmic parameters behind each stage. Users advance through structured validation steps, with raw mathematical hyper-parameters (e.g., search radiuses, decay exponents, solver iterations) exposed in docked control drawers.

Design Principle: "Productize the sequence, not only the calculation."
Paradigm Assessment
Option A: Script Terminal Flexible for engineers; high syntax friction and unversioned outputs.
Option B: Wizard with 0 Overrides Fails academic credibility; no control over mathematical constraints.
Selected: Guided Stage-Gate Pipeline Enforces reproducible dataflow while retaining explicit algorithmic parameters.
CHOICE POINT 02 · INFORMATION ARCHITECTURE COGNITIVE COMPRESSION

Show every metric at once - or build layers of interpretation?

The Situation: Network topology analysis can compute 30+ indicators simultaneously. Presenting all outputs in flat data tables makes the system technically complete but cognitively exhausting and difficult to translate into spatial insight.

The Strategic Decision: We formulated a three-tiered metric hierarchy. Macro diagnostic indicators (Resilience Index, Structural Efficiency) sit on top. Secondary dimensional clusters (Connectivity, Hierarchy, Circuity) provide middle-ground analysis, while raw mathematical graph primitives remain inspectable at the node and edge level.

Design Principle: "Information hierarchy is part of analytical accuracy."
Three-Tiered Metric Model
TIER 1 · Macro Resilience Index Executive Level
TIER 2 · Dimensional Clusters Efficiency / Redundancy
TIER 3 · Raw Graph Primitives Betweenness / Degree
Progressive drilling eliminates chart clutter
CHOICE POINT 03 · SYSTEM CAPABILITY SPATIAL BENCHMARKING

Analyze one area in isolation - or make comparison a first-class workflow?

The Situation: Standard academic scripts treat each geographic area as an independent execution loop. Comparing how district A responds to disruption versus district B required manual copy-pasting of values into Excel sheets.

The Strategic Decision: Multi-area comparison is treated as a foundational product feature. Projects, indicators, and visual viewports are coordinated so users can benchmark up to 5 spatial zones side-by-side with synchronized zoom, normalized radar scales, and automatic delta calculation.

Design Principle: "Spatial insight emerges from relational context."
Synchronized Comparative Canvas
map Zone A: Futian CBD E_glob: 0.74
map Zone B: Luohu Old Town E_glob: 0.58
Pan & zoom viewports lock synchronously
04 // INTERFACE SYSTEM

The Professional Analysis Experience

Eight coordinated workstation views structured for repeatability, diagnostic speed, and mathematical rigor.

SONX case study - Stage 1
STAGE 01 folder_special

Project Setup

Define study context, assign coordinate projection, and initialize metadata cache.

Input: CRS & Metadata
SONX case study - Stage 2
STAGE 02 public

Network Data

Ingest Overpass geometries, clean topological dead-ends, and build primal graph.

Engine: OSMnx Ingest
SONX case study - Stage 3
STAGE 03 hub

Topology Analysis

Calculate node degree, link circuity, clustering coefficients, and alpha/beta connectivity.

Engine: NetworkX Graph
SONX case study - Stage 4
STAGE 04 radar

Centrality Analysis

Compute multi-order betweenness, closeness, and eigenvector distribution.

Worker: Parallel Sparse
SONX case study - Stage 5
STAGE 05 broken_image

Resilience Assessment

Simulate targeted node attack, random link failures, and giant component percolation.

Diagnostic: Percolation Curve
SONX case study - Stage 6
STAGE 06 compare

Area Comparison

Align normalized spatial baselines and generate side-by-side indicator delta bars.

Scope: Dual/Triple View
SONX case study - Stage 7
STAGE 07 palette

Visualization

Interactive thematic heatmaps, custom choropleths, and topological radar charting.

Renderer: WebGL / 2D Canvas
SONX case study - Stage 8
STAGE 08 file_download

Export & Deliver

Package academic vector figures (SVG/PDF), GeoJSON layers, and analytical summary CSVs.

Output: Multi-Format Package
05 // TECHNICAL REALIZATION

A system architecture built for heavy computation and low UI latency.

The product bridges high-performance spatial algorithms in Python with a fluid, lightweight browser canvas. Decoupled execution guarantees that heavy matrix inversions never freeze interface interactions.

Topology Dataflow Pipeline ARCHITECTURE DIAGRAM · v3.1
web Browser Canvas UI React / Canvas2D
sync_alt REST API & WS Flask / Socket.io
psychology Compute Core OSMnx · NetworkX
database Deterministic Cache GeoPackage / SQLite
download_for_offline Vector Artifacts GeoJSON / SVG
ASYNC WORKER ISOLATION Zero UI Blocking

Graph algorithms run inside detached Celery worker processes. WebSocket streams return incremental calculation progress every 250ms.

DETERMINISTIC SPATIAL CACHING Instant Replay

Bounding polygons and parameter sets generate SHA-256 state hashes. Re-evaluating previously calculated zones renders in under 12ms.

VECTOR CANVAS ACCELERATION 60 FPS Viewport Pan/Zoom

Graph primitives render via an offscreen HTML5 Canvas context, handling 50,000+ nodes and edges without browser thread degradation.

06 // VERIFIABLE DELIVERY

Product Deliverables & Milestones

Concrete outcomes achieved through systematic software execution and academic verification.

verified_user

Registered Software IP

Officially granted Computer Software Copyright by the National Copyright Administration, confirming original architecture, UI workflows, and computational pipelines.

Status: Fully Registered & Protected
~7 min

End-to-End Cycle

Standardized topological evaluation from raw OpenStreetMap bounding box ingestion to publication-ready vector figures from several hours of ad-hoc scripting down to minutes.

Speedup: 8x Faster Iteration Loops
5 Area

Benchmarking Matrix

Native comparative module enables concurrent evaluation of up to 5 urban metropolitan zones with normalized indicator deltas and synchronized percolation curves.

Feature: Native Dual/Multi-Viewport
07 // EVALUATION & HORIZON

Reflection & What's Next

Translating computational scripts into a coherent design tool taught us that product discipline does not mean hiding algorithmic complexity - it means orchestrating it with purpose.

school 01. Cross-Discipline Terminology

Test terminology and result interpretation across differing tiers of user expertise - from pure academic graph theorists to municipal municipal transit operators.

view_agenda 02. Progressive Control Tiers

Further separate primary spatial indicators from advanced algorithmic tuning drawers to provide zero cognitive distraction for rapid evaluations.

rule 03. Data Quality Transparency

Improve user-facing visibility around OpenStreetMap data hygiene, topological assumptions, and boundary truncation effects in dense urban areas.

slideshow 04. Academic Presentation Modes

Build specialized export presets formatted directly for peer-reviewed paper layouts, conference slide decks, and live classroom teaching demonstrations.

NEXT CASE STUDY - 04

Investment & Operations Model

A scenario-based financial simulation and decision support tool for urban asset development, operating cashflows, and socioeconomic impact forecasting.

VIEW CASE STUDY →