NetPanorama: A Declarative Grammar for Network Construction, Transformation, and Visualization

TL;DR

NetPanorama proposes a declarative DSL and JSON-based grammar for interactive network visualizations, unifying data loading, network construction, transformations, metrics, layouts, visual encodings, and interactivity in a single framework. By enabling multivariate, temporal, and geographic networks through composable primitives, it supports a broad spectrum of visualizations and aims to replace ad hoc library stitching. The paper contributes a formal grammar, a TypeScript reference implementation with an interactive editor, and a rich set of examples illustrating non-standard designs and application use cases, promoting reuse and transparency in network visualization design. This approach can accelerate prototyping, enable end-to-end workflows, and foster an ecosystem of NetPanorama-based tools for data-driven storytelling and exploration.

Abstract

This paper introduces NetPanorama, a domain-specific language and declarative grammar for interactive network visualization design that supports multivariate, temporal, and geographic networks. NetPanorama allows users to specify network visualizations as combinations of primitives and building blocks. These support network creation and transformation, including computing metrics; orderings, seriations and layouts; visual encodings, including glyphs, faceting, and label visibility; and interaction for exploration and modifying styling. This approach allows the creation of a range of visualizations including many types of node-link diagrams, adjacency matrices using diverse cell encodings and node orderings, arc diagrams, PivotGraph, small multiples, time-arcs, geographic map visualizations, and hybrid techniques such as NodeTrix. NetPanorama aims to remove the need to use multiple libraries for analysis, wrangling, and visualization. Consequently, NetPanorama supports the agile development of applications for visual exploration of networks and data-driven storytelling. Documentation, source code, further examples, and an interactive online editor can be found online: https://netpanorama.netlify.app/.

Figures (10)

• Figure 1: Top-level constructs in NetPanorama (red); apart from vis, instances of these have a name and may point to the name of another object (dataRef) such as a network or a data array. Instances of data, network, and layout can be modified by transforms. As well as being defined at the top-level of a specification, instances of a vis, layout, and table can be nested within the definition of a vis instance. Gray text indicates alternative forms of a construct.
• Figure 2: Network construction and topological transformations. Different types of transformation are distinguished by their type, and accept different sets of parameters.
• Figure 3: Examples of network transformations specified in NetPanorama. These transforms are defined in a transform attribute of the definition for the corresponding network.
• Figure 4: Layout overview. Whether a dimension of a layout is discrete or continuous depends on what the scale or order that is used: an order will always lead to a discrete version, a scale can lead to either.
• Figure 5: Different link renderings and gaps.