Interactive Visualisation of Complex Street Network Graphs from OSM in New Zealand

Street network graphs model interconnected land transport infrastructure, including roads and intersections, enabling traffic analysis, route planning, and network optimization. Directed network graphs (digraphs) add directionality to these connections, reflecting one-way streets and complex traffic flows. While OpenStreetMap (OSM) offers extensive data, visualizing large-scale directed networks with complex junctions remains computationally challenging for browser-based tools. This paper presents an interactive visualization tool integrating OSM data with the New Zealand Transport Agency’s National Network Performance (NNP) analysis toolbox using PyDeck and WebGL. We introduce a directional offset algorithm to resolve edge overlaps and a geometry-aware node placement method for complex intersections. Experimental results demonstrate that our PyDeck implementation significantly outperforms existing solutions like Bokeh and OSMnx. On standard datasets, the system achieves up to 238× faster processing speeds and a 93% reduction in output file size compared to Bokeh. Furthermore, it successfully renders metropolitan-scale networks (∼1.3 million elements) where traditional visualisation tools fail to execute. This visualisation approach serves as a critical debugging instrument for NNP, allowing transport modellers to efficiently identify connectivity errors and validate the structural integrity of large-scale transport models.