C4D3: A View-Level Abstraction and Coordination Library for Building

Coordinated Multiple Views with D3

Omkar S. Chekuri

and Chris Weaver

The University of Oklahoma, Norman, Oklahoma, U.S.A.

Keywords:

Coordinated and Multiple Views, Visualization Systems and Tools, Visualization Toolkits.

Abstract:

D3 is a popular and effective library for the development and deployment of visualizations in web pages.

Numerous applications testify to its accessibility and expressiveness for representing and manipulating page

content. By eschewing toolkit-speciﬁc abstraction, D3 gains representational transparency, but at a cost of

modularity. Relatively few D3 applications compose multiple views or support coordinated interaction be-

yond basic navigation and brushing. Rather than relegate view composition to custom integration code, we

overlay D3 with a view-level abstraction that utilizes a general parameter sharing model to offer simple yet

ﬂexible composition of coordinated multiple views (CMV) while preserving the expressiveness of individual

D3 components. Coupling of event handling to shared parameters recasts modeling of interactive state and

simpliﬁes the declarative speciﬁcation of interactive dependencies between views. We present an example of

an extensively coordinated visualization, illustrative code to show CMV construction in C4D3, and demon-

strate how view-level abstraction can reduce the code needed to compose complex D3 visualizations.

1 INTRODUCTION

Web-based interactive visualizations are increasingly

used for data exploration and analysis. While a sin-

gle interactive view is often sufﬁcient to present one

perspective on a data set, coordinated multiple views

(CMV) with interactive capabilities are usually re-

quired to support multifaceted perspectives for com-

prehensive analysis. Yet, it remains challenging to

build CMV in popular low-level web-based libraries

due to their lack of coordination abstractions (Chen

et al., 2022). Higher-level design tools like Tableau

and Power BI are conversely limited to predeﬁned sets

of relatively simple coordination templates.

Data-Driven Documents (D3) has emerged as a

widely adopted library for embedding visualizations

within web pages (Bostock et al., 2011). D3 offers an

accessible, expressive, declarative language for repre-

senting and transforming data in the Document Ob-

ject Model (DOM) of a web page. Furthermore, it en-

ables manipulation of that data by associating interac-

tion events with transformations, thereby supporting a

wide variety of interaction visualization designs.

The tendency in web-based visualization design

https://orcid.org/0009-0002-7197-7954

https://orcid.org/0000-0002-6713-093X

is to favor simpler designs suited for communica-

tion and explanation. Composite designs, like those

with CMV constructions commonly utilized in explo-

ration and analytical applications, are relatively rare.

This is not exclusive to visualizations built using D3.

Visualizations built using other libraries and toolk-

its (Fekete, 2004; Bostock and Heer, 2009; Satya-

narayan et al., 2014; Satyanarayan et al., 2017) ex-

hibit the same tendency. This scarcity can generally

be attributed to limitations in language and feature

support, as well as to the inherently more complex

nature of designs comprising multiple views.

The scarcity of complex CMV constructions us-

ing D3 may arise from its goal to avoid imposing

a toolkit-speciﬁc abstraction of visual representation.

Unlike many visualization libraries, D3 does not ex-

plicitly deﬁne the concept of a “view”; rather, it leaves

the deﬁnition of a view largely to developer discre-

tion. This ﬂexibility allows D3 to transform page

structure and styling in ways that may not align with

commonly recognized view types. However, D3’s

constraints on interaction handling and encapsula-

tion of event processing make it challenging to com-

bine different interaction channels that rely on the

same events, especially when conﬂicting events oc-

cur (Satyanarayan et al., 2017) (such as how D3 re-

lies on mouse click and drag for both brushing and

Chekuri, O. S. and Weaver, C.

C4D3: A View-Level Abstraction and Coordination Library for Building Coordinated Multiple Views with D3.

DOI: 10.5220/0013322000003912

Paper published under CC license (CC BY-NC-ND 4.0)

In Proceedings of the 20th International Joint Conference on Computer Vision, Imaging and Computer Graphics Theory and Applications (VISIGRAPP 2025) - Volume 1: GRAPP, HUCAPP

and IVAPP, pages 955-966

ISBN: 978-989-758-728-3; ISSN: 2184-4321

955

panning). Composite visualizations typically involve

not only multiple views, but also multiple coordinated

interactions between those views to support diverse

manipulations of data and how it appears. As the

number of views and the complexity of interactions

increase, so does the challenge of managing depen-

dencies between D3 fragments corresponding to each

“view” and its associated portion of the DOM. Vega-

lite (Satyanarayan et al., 2017) and the interaction se-

mantics introduced in Reactive Vega (Satyanarayan

et al., 2014; Satyanarayan et al., 2016) seek to ad-

dress these concerns, but do not directly address the

issue of composability of CMV in visualization de-

signs. Selection parameters in Vega-Lite convert user

interactions into data queries that share state between

views. However, these selection interactions are re-

stricted to point and intervals, limiting expressiveness

when trying to design custom selection interactions,

such as selection of arbitrary data points in views,

or when implementing non-selection-based complex

data queries that depend on navigation.

C4D3 contributes a view encapsulation and inter-

action abstraction library implemented on top of D3.

It aims to support expressive design and elegant spec-

iﬁcation of coordinated multiple views by adopting

the three main design principles of the Live Proper-

ties architecture in the Improvise visualization sys-

tem (Weaver, 2004). First, modular view implemen-

tation facilitates the design and reuse of common and

custom view types in CMV constructions. Second,

clean separation of view implementation and coor-

dination design makes building and modifying com-

plex CMV constructions simpler and easier than with

monolithic approaches. Third, lifting the storage and

management of interaction state from view-local to

visualization-global, while keeping the interpretation

of state and changes to it view-centric, facilitates ﬂex-

ible and meaningful sharing of state to implement

expressive and understandable coordination designs.

We followed these principles to develop C4D3 with

the objectives of increasing transparency, extensibil-

ity, modularity, composability, consistency, and con-

sonance of web-based CMV visualization design.

In this paper, we present C4D3’s coordination ar-

chitecture based on Live Properties, a JavaScript im-

plementation of that architecture, the design and im-

plementation of a view wrapper to adapt D3 rendering

and interaction handling code for coordination, and

several common view types implemented as D3 code

within the wrapper. We demonstrate C4D3’s capabili-

ties via a reproduction of a classic CMV visualization

with extensive navigation and selection coordinations,

illustrate the process of implementing a simple CMV

design with C4D3, and assess our progress toward

achieving our objectives for C4D3. We conclude that

C4D3 can support an incrementally expanding collec-

tion of D3 components as view modules that can be

quickly and easily instantiated and interconnected to

implement expressive CMV patterns. While imple-

menting particular views for use in a multiple view vi-

sualization design in C4D3 does usually require writ-

ing at least some custom D3 code for each view, the

effort is similar to writing different components in D3

without C4D3, and the modularity of the C4D3 view

wrapper amortizes the effort needed by allowing sub-

stantial code reuse between similar views, much like

how D3 designers often modify existing D3 examples

rather than start from scratch.

Supplementary material and the code for the

C4D3 examples in this paper can be found online at

https://omkarchekuri.github.io/c4d3/.

2 RELATED WORK

C4D3 introduces a view abstraction and a general pur-

pose coordination layer adapted from the Improvise

architecture (Weaver, 2004) for specifying and build-

ing coordinated visualizations as data ﬂow graphs. As

an implemented library, C4D3 provides coordination

capabilities that build on the existing visual represen-

tation capabilities of D3, thus applying a separation of

concerns between D3’s visualization rendering code

and C4D3’s coordination management. This separa-

tion allows for swapping out D3 code with other li-

braries or combining visual representations from mul-

tiple libraries to compose a CMV visualization.

Research on coupled interaction have been piv-

otal in the evolution of information visualization.

Constraint-based UIs like Garnet (Myers et al., 1990)

and Rendezvous (Hill et al., 1994), and seminal visu-

alization systems such as Tioga-2 (Aiken et al., 1996),

Visage (Roth et al., 1996) Spotﬁre (Ahlberg, 1996),

and XGobi (Buja et al., 1996), heavily inﬂuenced

work on CMV systems including IVEE (Ahlberg

and Wistrand, 1995), DEVise (Livny et al., 1997),

Snap-Together Visualization (North and Shneider-

man, 2000), GeoVISTA Studio (Takatsuka and Gahe-

gan, 2002), CViews (Boukhelifa and Rodgers, 2003),

and Improvise (Weaver, 2004). This long history un-

derscores the persistent challenge of balancing design

accessibility and expressiveness and bridging capabil-

ities of visualization systems (Fekete et al., 2011).

More recently, Nebula (Chen et al., 2022) pro-

vides an abstraction layer for constructing coordi-

nated visualizations using macros to abstract coordi-

nation speciﬁcations. It offers efﬁcient CMV design

through textual speciﬁcation of supported coordina-

IVAPP 2025 - 16th International Conference on Information Visualization Theory and Applications

956

Figure 1: Reproduction of various coordinations in the Improvise cubic ion trap visualization (Weaver, 2004) with 12 C4D3

views: (A) three time series plots synchronize scrolling horizontally; (B) independent vertical scrolling in those plots; (C)

shared selection between scatter plots and the table; (D) overview SPLOM showing three sides of the cube; (E) detail SPLOM

zoomed to ranges selected in the overview; (F) a selected range in a color slider ﬁlters items in a parallel coordinate plot.

tion patterns. The extensibility of coordinations and

implementation of complex coordination patterns be-

comes challenging when users are restricted to the

existing natural language patterns backed by higher-

level language parsers. Text speciﬁcation allows one-

way binding from the source visualization that ac-

cepts the interaction to the destination that shows the

result. This makes speciﬁcation accessible and more

natural, but limits design expressiveness. The archi-

tecture is also limited to interactions that trigger up-

dates only upon completion. Nebula is similar to

C4D3 in how it separates coordination from visual

representation, despite their substantial differences in

coordination speciﬁcation and expressiveness.

User interface frameworks like React offer a

component-based architecture in which UI elements

are treated as self-contained components organized in

a hierarchy. React uses a combination of strategies to

coordinate view components in the component hier-

archy. It uses props, callbacks, and context to coordi-

nate the parent component with the child component.

Additionally, libraries like Redux offer a pattern for

organizing global state and ensuring predictable state

management for JavaScript applications built on Re-

act. Although these libraries together support state

management for building views (as UI components)

that can be coordinated using shared state, they do

not provide an abstraction layer for specifying coor-

dination between views. They rely on developers to

implement custom logic to manage complex view in-

teractions and state changes across coordinated views.

CViews (Boukhelifa and Rodgers, 2003) offers a

coordination model in which objects in a coordina-

tion space are directly linked to views through transla-

tion functions. Use-Coordination (Keller et al., 2024)

provides a reactive library based on this coordina-

tion model, implemented in the ReactJS library. One

shortcoming of the coordination abstraction layer in

this model is that views are directly dependent on

coordination objects; the translation functions tightly

couple coordination objects to view implementations.

In contrast, Live Properties (Weaver, 2004) provides a

level of indirection such that coordination objects are

not directly coupled to views but instead are linked

to properties of the views. Coordination objects can

provide information of any type for views to share and

translate for individual use. This indirection expands

coordination to allow sharing not only of interaction

characteristics, but also of behavior and appearance,

thereby providing an abstraction layer that is ﬂexible

enough to express a wide variety of view couplings

far beyond those usually encountered.

C4D3 builds on D3’s capabilities to make coordi-

nation capabilities accessible to the wide community

of D3 users with implementation cost at or below that

of D3 on its own. It provides ﬂexible coordination

between views by abstracting the coordination from

the visual representation and interaction with it, while

still maintaining the ﬂexibility and expressiveness to

author open-ended coordination patterns. It also opti-

mizes view updates in response to interaction by only

updating the affected parts of the DOM, thereby al-

lowing intermediate updates during protracted inter-

actions and with it a sense of interactive immediacy

(depending on the latency of the updates themselves).

3 EXAMPLE

Figure 1 shows a reproduction of the Improvise cu-

bic ion trap visualization comprising 12 coordinated

views created with C4D3. The C4D3 library pro-

vides a variety of view modules, each tailored to ex-

hibit distinct behaviors and appearances using D3 in-

C4D3: A View-Level Abstraction and Coordination Library for Building Coordinated Multiple Views with D3

957

ternally for visual representation and interaction han-

dling. The example employs two types of scatter plot

module: one to provide an overview, and the other

to present a detailed view. It also employs a parallel

coordinate plot module, a table view module, and a

gradient plot module. A signiﬁcant portion of a view

module consists of D3 code for constructing and up-

dating the view, while other code sections pertain to

methods for updating the view’s internal state stored

in the view wrapper. To create new types of views

as view modules in C4D3, one makes a copy of the

wrapper template and customizes it to include the de-

sired D3 code in the functions in those sections.

In C4D3, the code for CMVs is written in a

declarative manner by supplying input data and view-

speciﬁc parameters to the view modules and binding

coordination objects between them. Arbitrary sub-

sets of views can share appearances and behaviors by

binding different objects that store and manage the

desired appearance and behavior states of the visu-

alization as a whole. For instance, it is possible to

select a subset of views with similar or dissimilar ap-

pearances, such as scatter plots and a table view, to

highlight the same data point when hovered over with

a mouse in any of these views. In another scenario,

the same or different subsets of views can be selected

and coordinated by having selected items in one view

highlighted in other views. A more complex exam-

ple, shown in Figure 1, coordinates a range selection

in the gradient view with an item highlighting ﬁlter

applied in the parallel coordinate plot. Views can also

be instantiated from the same view module to be co-

ordinated through common design elements. For ex-

ample, scatter plots that share the same data can yoke

their individual axes to the visual extent of the data

as each one displays it. Mixing and matching coordi-

nation strategies allows for versatile and open-ended

ways to coordinate views, offering designers ample

ﬂexibility in achieving their desired outcomes.

4 VIEW ABSTRACTION AND

COORDINATION IN C4D3

Visualization designers create and use many dif-

ferent kinds of interactive data views. Although

the introduction of fundamentally new view types

is less and less frequent, the visualization commu-

nity continues to study known views, their variations,

how to implement them, and how to compose them

into larger structures including coordinated multiple

views. There is particular interest in helping users cre-

ate CMV designs themselves. Balancing expressive-

ness and accessibility of speciﬁcation is a key chal-

lenge in this effort.

With C4D3, we approach this challenge by adopt-

ing a level of view abstraction based on the param-

eter set model of visual exploration (Jankun-Kelly

et al., 2007). This model treats visualization state

as a collection of parameters, some or all of which

can be modiﬁed through interaction. The Live Prop-

erties architecture in the Improvise visualization sys-

tem (Weaver, 2004) builds on the parameter set model

by adding a model for deﬁning views in terms of

properties (slots), binding those properties to vari-

ables (parameters), and broadcasting update notiﬁca-

tions between views whenever any of them changes a

variable interactively. Instead of coordinating views

through low-level interactions (too mechanical) or

high-level semantics (too abstract), Live Properties

coordinates views through a middle-level of concrete,

meaningful state objects. Navigation interactions

translate into ranges, angles, and distances. Selec-

tion interactions are captured as an array of brushing

hits indexed to data items. Inside view implementa-

tions, translating common visualization interactions

into such state objects is straightforward, as is pa-

rameterizing the visual encoding of data as a function

of the state objects. Coordination in Live Properties

is accessible because the state object data types, and

how they relate in a view, are easy to understand. It

is expressive because views can be interactively cou-

pled with each other in a myriad of ways well suited

to both standard and custom coordination design.

C4D3 combines a re-implementation of the Live

Property architecture in JavaScript with a wrapper for

encapsulating the JavaScript code of D3 visualiza-

tions as a Live Property view type. To implement

a new view type, a visualization developer makes a

copy of the wrapper. They then insert code to create

the properties of a view when it is instantiated. Next,

they insert the D3 code fragments that perform event

handling and visual encoding appropriate to that view

type. Finally, they modify the fragments to translate

interaction events into property changes and calculate

visual encodings from property values. Designers can

adapt existing C4D3 views or create view variations

by adding relevant Live Properties to support coordi-

nation in the widely available rich set of D3 examples.

The view wrapper also provides the functionality

needed to propagate interaction events and property

updates to keep the view updated. Figure 2 shows the

internal components of C4D3 views and how they are

connected through variables for coordination. Each

view has event listeners attached to the DOM cor-

responding to various mouse, keyboard, and touch

events. Each property of a view registers with relevant

listeners to receive notiﬁcation of events. When it re-

IVAPP 2025 - 16th International Conference on Information Visualization Theory and Applications

958

Figure 2: The internal structure of C4D3 views and

their external coordination through variables. Interaction

events propagate via properties to change variable values.

Changed variables broadcast update notiﬁcations though all

connected properties to trigger view updates.

ceives an event notiﬁcation, it modiﬁes the value of its

bound variable (if it has one). The variable broadcasts

the value change to all bound properties, including the

originating view itself. Each property that receives a

variable change notiﬁcation triggers a draw event to

update its parent view. When a view updates itself,

it accesses current property values as needed. The

originating view does not necessarily trigger a draw

event directly in response to the interaction, but this

can be done to draw a visual side-effect of interac-

tion, such as to show the brushing shape itself. This

approach allows clean decoupling of event handling

code from property update code inside views. This

approach also allows variables to be initialized (and

even updated by other means) in a way that keeps all

views up to date at all times, including upon ﬁrst dis-

play. A property can also be tagged as active or pas-

sive to indicate whether interaction in its parent view

can affect it or not.

This approach to view abstraction and coordina-

tion in C4D3 has several advantages. First, it makes

the implementation of individual views entirely inde-

pendent of each other. Views communicate only in-

directly through variables, and have no direct connec-

tion to or even knowledge of each other. Second, it

eliminates the need to write custom code inside views

to implement the coordinations themselves. Third, as

a consequence of the previous two, it substantially in-

creases the scalability of coordination constructions

in terms of the number of views, the number of shared

state objects, and the overall amount of interactive

interdependence that can be implemented with little

code. The speciﬁcation of the structure of coordina-

tion between views is effectively externalized from

the views themselves. If one can implement a view

type in C4D3, then any number of instances of that

view type can be created and coordinated. One can

create new interactive designs in D3 and wrap each

in the C4D3 wrapper in a way that effectively sepa-

rates the concerns of visual representation design and

coordination speciﬁcation.

C4D3 provides a variety of data types to deﬁne in-

teractive state values, such as plot ranges and item se-

lections. Views create, interpret, and utilize property

values based on their type. For instance, if a view uses

a bit array property to brush and highlight selected

items, the visualization designer can create a variable

of that type to bind to that view’s property, then bind

it to other properties of any views to coordinate them

through that typed value. Types helpfully communi-

cate each view as a property-based API to designers,

and constrain how property values can be expected to

effect visual representation and interaction handling

in different views. Views can use their property val-

ues for representation and/or interaction as they need

to, including to parameterize an internal data transfor-

mation pipeline. As a result, C4D3 supports ﬂexible

coordination well beyond basic navigation and selec-

tion, through the addition of view variants that deﬁne

and utilize their properties in sophisticated ways.

5 IMPLEMENTING CMV IN C4D3

C4D3 is implemented as a JavaScript library that con-

sists of six distinct software layers to build CMVs: (1)

the D3 library handles DOM speciﬁcation and inter-

action handling of views; (2) modules built on D3 set

up a view, render and update it, and update its prop-

erties upon a change in state of the view; (3) view

wrappers interface view modules to the coordination

library; (4) a coordination library manages coordina-

tions between the views; (5) an API layer provides

abstraction for interacting with individual view con-

trols to support creation of views and speciﬁcation of

coordinations; and (6) CMV applications build on the

API layer. Figure 3 summarizes the general structure

of the code one needs to write to implement an ap-

plication using these layers. First, implement view

modules (Figure 3a–d). Next, implement the corre-

sponding view wrappers (Figure 3e–f). Finally, set up

and initialize the application itself (Figure 3g–j).

Figure 4 shows a simple example that visualizes

a taxonomy of food with three views: a treemap, a

radial tree, and a bar chart. Each view has an indica-

tion property that determines which item to highlight

when that item is hovered over by the mouse in any

of the views. The properties are bound to a common

variable to establish the coordination. In the rest of

this section, we present the complete code to specify

the example and explain its construction.

C4D3: A View-Level Abstraction and Coordination Library for Building Coordinated Multiple Views with D3

959

Figure 3: Code organization in C4D3: (a)–(d) view mod-

ules; (e)–(f) view wrappers; (g)–(j) CMV applications. See

the main text for descriptions of the code for labels (a)–(j).

5.1 Coding View Modules

A CMV application can be built using existing view

modules, including several common examples pro-

vided by the C4D3 library, and by writing any

needed additional view modules and their correspond-

ing view wrappers. View modules are responsible for

setting up the initial view representation (Figure 3a–

b), updating the views (Figure 3c), and translating in-

teractions in views into property changes (Figure 3d).

The majority of code that needs to be written when

creating a new view module is the D3 code (Fig-

ure 3b–c).

Figure 6 shows the module code for the bar chart

view in Figure 4. The code in Figure 6a creates an

empty boolean array, initialized with false values, and

sized to match the input data, for storing the values of

Figure 4: A CMV visualization with three views: a treemap,

a radial tree, and a bar chart. The views are coordinated to

highlight the item hovered over in any of the views.

an indication property to track the mouse hover. Fig-

ure 6d shows the code to create the initial bar chart

view using the vanilla D3 code for a bar chart shown

in Figure 6e (hidden for brevity). The code shown

in Figure 6f updates the value of the property when

mouse interactions (onMouseOver and onMouseOut)

occur, changing the property value by altering the bit

values of appropriate DOM elements to true or false.

The property change also notiﬁes the view wrapper

and triggers any needed updates to the view, as shown

in Figure 6c. View modules must separate the code

for each of their property types into distinct update

methods. The module code for the treemap and radial

tree views is structured the same way and was imple-

mented by copying the bar chart module code then

modifying the property update code as in Figure 6c

and the D3-speciﬁc code as in Figure 6e.

Instantiate

the view with

appropriate

parameters

Update the view by

calling appropriate

method on detecting

change in the value

of live property

Create live

property for

indication

Figure 5: Wrapper (control) code for the example bar chart,

showing: (a) initialization of properties, (b) initialization of

the view, and (c) notifying the view of property changes.

IVAPP 2025 - 16th International Conference on Information Visualization Theory and Applications

960

Figure 6: Module code for the example bar chart, showing: (a) initialization of properties, (b) a utility method to enable

interactive positioning of the view, (c) a method to update the view upon property changes, (d) code to position the view in

the layout, (e) D3 code to render the view, and (f) callback functions to update the property upon interaction in the view.

5.2 Coding View Wrappers

Each view module has a corresponding view wrapper

(also referred to in the API as a view control). Creat-

ing a wrapper for a new view module focuses on de-

termining which properties a view needs to have for

coordination with other views. The wrapper deﬁnes

and maintains the properties that encapsulate the ap-

pearance and behavior of the view (Figure 3e) and

acts as an interface between the view module and

C4D3: A View-Level Abstraction and Coordination Library for Building Coordinated Multiple Views with D3

961

*** Continued on next column ***

*** Continued from previous column ***

Create

controls for

bargraph,

treemap,

radial –

node link

views

Bind the

variable to

“Indication”

live property

of view

controls

Create an array

from the

hierarchical data

Load and

assign unique

identifiers to

the items in

the JSON data

Create

hierarchical

data from

JSON data

property

Create a

variable to

store the state

of Indication

Figure 7: Application code for the example, showing: (a)–(c) loading and preparing data, (d) instantiating views, (e) instanti-

ating variables for the hover coordination, (f) binding the variable to the properties of views to establish the coordination.

the coordination layer by updating the view when a

change is detected in any of its properties, either by

the result of interaction with the view itself or by the

result of coordination with other views (Figure 3f).

Figure 5 shows the wrapper code for the ex-

ample bar chart view in Figure 4. The code in

Figures 5a–c creates the indication property (called

“live property indication”), instantiates the view for

that property, and notiﬁes the view of incoming

changes to that property from outside the view, re-

spectively. In Figure 5a, the property is tagged as an

active property (“true” on the third line) that can be

changed by the view itself, as opposed to a passive

property (which would be “false” on that line) to indi-

cate that the property can change due to coordination

with other views but is not affected by interaction in

its own view. The wrapper code for the treemap and

radial tree views is structured the same way and was

implemented by copying the bar chart wrapper code

then modifying the code in Figure 5b to instantiate

each respective view with its needed parameters.

5.3 Coding CMV Applications

Creating a CMV application involves initializing the

constituent views and specifying coordination using

the C4D3 API layer, broken down into the four steps

shown in Figure 3g–j. First, load the data and cre-

ate parameters that deﬁne the size and position of the

views, such as width, height, and position. Second,

instantiate the view controls with this data and the pa-

rameters. (Alternatively, the layout of the CMV can

be managed using a CSS library like Bootstrap to sup-

port a responsive grid system for arranging individ-

ual views, further simplifying the code for individual

view setup.) Third, create variables to store the state

of the views as property values. Fourth, bind the vari-

ables to the appropriate properties of the view controls

to specify coordination.

For the example shown in Figure 4, we ﬁrst load

and prepare the data (Figure 7a–c), then create layout

parameters and instantiate the view wrappers for the

bar chart, treemap, and radial tree views (Figure 7d).

Next, we create a variable called Indication to store

IVAPP 2025 - 16th International Conference on Information Visualization Theory and Applications

962

the coordinated interaction state of hovering shared

by the views (Figure 7e). We use a simple array as

the property type to represent the shared hover inter-

action state, with True and False in the array to repre-

sent whether a given data item is being hovered over.

Finally, we coordinate the views by binding the Indi-

cation variable to the Indication property of all three

view wrappers (Figure 7f).

Evolving a CMV application to include additional

views and/or coordinations is a straightforward matter

of instantiating more view wrappers (adding blocks

to Figure 7d), creating more variables (adding blocks

to Figure 7e), and/or binding variables to more view

properties (adding blocks to Figure 7e). A coordi-

nation design can be rapidly and incrementally re-

vised by mixing and matching variables to views

through their properties. Incremental creation of new

view types or modiﬁcation of existing ones can be

performed by copying and editing view module and

wrapper code before returning to the application code

to incorporate those view types and coordinate them.

6 COORDINATION PATTERNS

With multiple views in a visualization, users can

see and interact with data from multiple perspec-

tives simultaneously. Coordination allows users to

combine the interactions of different views to com-

pose more complex queries than would be possible

in any single view. To support common data explo-

ration strategies (Shneiderman, 1994), many visual-

izations employ basic navigation and selection co-

ordinations (North and Shneiderman, 1997), such as

brushing (Becker and Cleveland, 1987). Techniques

like compound brushing (Chen, 2003) and cross-

ﬁltering (Weaver, 2010; Square, 2012) employ co-

ordination constructions that interplay with data pro-

cessing and querying in more complex ways.

While our current view abstraction focuses on

supporting basic forms of coordination, it is suf-

ﬁcient to realize many common coordination pat-

terns (Weaver, 2007b), and visualization designers

can vary and synthesize them to suit speciﬁc appli-

cation needs. Transparency of D3 code in views also

leaves the door open for designers to implement di-

rect view dependencies if they so desire. Here we de-

scribe a few of the general coordination patterns that

were readily designed into the above C4D3 examples

of ion motion (Figure 1) and food types (Figure 4).

• Synchronized scrolling in Figure 1A coordinates

the horizontal range of time visible in three time

series plots. Each plot has a pair of live proper-

ties to represent its visible horizontal and verti-

cal ranges, each corresponding to a translated axis

value in D3. Changes to either range are applied

to the corresponding axis and the points in the plot

are repositioned accordingly.

• A scatterplot matrix (SPLOM) shown in Fig-

ure 1D is a more complex construction of range

bindings. Three data dimensions are laid out in

a traditional stair-step arrangement of plots. X, Y,

and Z range variables are bound to the range prop-

erties of the plots so as to create the expected syn-

chronization of scrolling across all three views.

• Figure 1F shows a custom example of a percep-

tual slider coordination between a color slider and

a parallel coordinate plot. The two views share a

range variable for a selected range of color in a

color gradient. The two views also share a color

gradient for sake of visual consistency. In this

case, we implemented both as general-purpose

views but tweaked their respective D3 code to use

the same gradient by coincidence.

• Shared selection in Figure 1 supports brushing

between the three time series plots and the table

view. The three plots in the SPLOM are similarly

coordinated, but via a second selection variable.

• Shared indication in Figure 4 similarly coor-

dinates hover interactions across several of the

views, in this case of a food item. As in shared

selection, data items hovered over in any of the

coordinated views is highlighted in all views.

7 DISCUSSION

We developed a specialized coordination library that

integrates well with the popular data and visual rep-

resentation capabilities of D3, enabling ﬂexible com-

bination of views and coordination to build simple or

complex CMV visualizations. In the following sec-

tion, we discuss the design choices we made for C4D3

and assess achievement of development objectives.

7.1 Modular View Support

Building CMVs using C4D3 can take advantage of

substantial code reuse. A large fraction of the code in

view wrappers is shared between views with a small

portion needed to add new properties for coordina-

tion. Implementation of new views nevertheless re-

quires structuring D3 code in a different, modular way

to support coordination, as discussed in Section 5.1.

The complexity of code in a view depends mainly

on how expressive we want the view to be to present

C4D3: A View-Level Abstraction and Coordination Library for Building Coordinated Multiple Views with D3

963

itself as a collection of properties available for co-

ordination with other views. New C4D3 designers

should start with CMV examples that support sim-

ple coordination patterns, such as shared selection and

shared navigation, and incrementally develop support

for more complex coordination patterns.

Despite its name and concentration on D3, the

implementation of C4D3 does not inherently restrict

designers from substituting an alternative charting li-

brary for D3. However, the alternatives would likely

vary widely in how they can be used to manipulate the

DOM to express interaction state and visual appear-

ance as a function of coordinated property values.

CMV view initialization in C4D3 is abstracted

from the low-level details of view creation, giving de-

signers the ability to build complex CMVs in a declar-

ative manner without getting embroiled by the low-

level implementation details of views. The separation

of concerns and abstraction offered by properties and

shared interaction state appears to provide a strong

correspondence between what users want for visual

data querying and how designers can specify suitable

view inter-dependencies in CMV constructions.

A major challenge in developing support for com-

plex coordination on top of visualization libraries like

D3 is their limited range of interactions available

to modify DOM elements (brush, drag, zoom, pan,

lasso) and the ways they can conﬂict. This limitation

makes it much harder to implement multiple interac-

tions in D3 to support multiple properties in a C4D3

view, either by supporting a coordination pattern by

spreading out needed interactions across extra views,

or forcing developers to write custom code to process

low-level mouse and keyboard events to sufﬁciently

distinguish interaction forms and map them into par-

ticular facets of coordinated interaction state.

7.2 Modular View Update Mechanism

In general, D3 views are constructed such that mouse

events trigger callbacks that update the DOM, mak-

ing code look clean and simple. This is true for sim-

ple and direct interactions. However, when changes

are complex and indirectly triggered by coordinated

views, updating in this manner makes the code mono-

lithic and adds complexity to the already lengthy code

for some D3 views. To manage this complexity, C4D3

decouples the code responsible for re-rendering views

into separate callback functions, simplifying the D3

code and making it more modular. This delegates the

responsibility of mouse events to only update proper-

ties, allowing each view to interpret changes to prop-

erties and modify themselves accordingly.

This approach also allows views to support coor-

dinations that span multiple properties in an easily un-

derstandable manner. For example, if a view receives

shared selection state in its properties from multiple

views via multiple variables, it can adjust its appear-

ance based on the combined values of any or all vari-

ables. Achieving this level of coordination without

C4D3 would be highly complex in D3 alone.

C4D3 can also support sharing data as a coordi-

nation parameter, allowing it to be loaded once in-

stead of multiple times across views. This approach

not only improves data handling, but also enables the

development of views that support data annotations

through interactions and share the same modiﬁed data

across views, ensuring consistency of annotated data

across coordinated views.

7.3 Assessment of Objectives

Our ﬁrst objective is to preserve transparency of D3

code in view implementations. Parameterizing views

via minimal sets of properties needed to share co-

ordination state provides accessibility. Giving each

view responsibility over how to use property values to

determine appearance and behavior provides expres-

siveness. A visualization designer can choose a visual

encoding appropriate to the data and application, and

implement interaction as needed to accomplish many

common visual querying tasks. Item selection in a

view can involve clicks, rubber bands, lassos, or other

selection gestures. Indication by drawing or hovering

is similarly ﬂexible. In both cases, the view simply

performs the usual hit tests on data to populate a bit

array to share via a selection variable.

Specifying views without connecting them di-

rectly offers both extensibility and modularity in

view development. D3 practitioners can take advan-

tage of the view abstraction to create new view types,

view variants, and coordinate them incrementally as

needed to realize their designs. Design variations can

be explored by quickly changing the set of available

variables and their bindings to views being consid-

ered, often with little or no modiﬁcation to the D3

code itself. Doing so depends on how well the as-

pects of appearance and behavior needed for varia-

tion are exposed as properties in available view types.

Overall, C4D3 provides a sharp separation of con-

cerns for view design. Starting from available view

types, new view types can readily exploit redundancy

in C4D3 code, and often in D3 code as well. The

view types in the examples all share code that is es-

sentially the same except for D3 fragments that handle

visual encoding speciﬁcs. Event handling code, such

as for panning, can be reused in the same way as in

the world of D3 examples. View variants can offer

IVAPP 2025 - 16th International Conference on Information Visualization Theory and Applications

964

custom combinations of interactions for use in spe-

cial design cases. Curating collections of view types

is likely to be an integral activity of C4D3 designers,

much like in the D3 community.

View designers specify how property values affect

a view’s appearance and behavior, and how interac-

tions in a view affect property values. The choice of

properties to design into a view type is ﬂexible, yet of-

ten calls for only a small set of obvious and sensible

value types. Properties tend to be compatible (and of-

ten identical) across views, even quite different ones.

Consequently, the composability of views is high.

When an interaction occurs in a view, it could

update itself by responding directly to the interac-

tion, indirectly to a property notiﬁcation, or both. In

C4D3, views translate most interactions into one or

more property changes. Updates happen indirectly

via propagation of variable changes, including in the

view in which an interaction originated. By updating

themselves independently of where interactive mod-

iﬁcations originate, views effectively track the cur-

rent coordination state of the visualization, and thus

maintain visual consistency within themselves and

between each other. The asynchronous propagation

of events in C4D3 makes visual consistency between

views eventual, but on current systems updates appear

immediate for data sizes and view counts like in the

examples. It also avoids cycles in view updates.

The main objective of C4D3 is consonance in

CMV design; that is, to support harmonious mixing

and matching of multiple coordinations between di-

verse views. The two examples represent different

C4D3 design cases. The ﬁrst recreates an existing

CMV visualization with many, but basic views. The

second creates a new CMV visualization with fewer,

but mixed, views. Together, they show off a variety

of navigation and selection coordination patterns. To

build a C4D3 visualization, the designer creates vari-

ables to model interactive state, creates views to ac-

cess and modify that state, then binds variables to

views to coordinate them. These steps are simple,

ﬂexible, and easy to write as C4D3 code. The num-

ber of variables and views, and more importantly the

number of bindings, is typically quite small—tens of

each—even in complex CMV constructions like the

ions example. Even so, there is still much practical

work to be done, particularly to expand beyond the

small set of essential view and property value types

currently included in the library. It also remains un-

clear how to adapt certain D3 event handling, notably

for drag interactions, to the properties model.

Overall, C4D3 lets designers focus on expressing

the state, behavior, and appearance of views as share-

able parameters at an abstraction level that provides

a closeness of mapping between desired view inter-

dependencies and the code needed to express them,

leaving most of the complexity of handling coordina-

tion proper to the library itself.

8 CONCLUSION

We present a working prototype of a view-level ab-

straction for coordinating multiple views. We adapted

the Live Properties architecture as a thin coordination

layer for use with the D3 web-based visualization li-

brary, and applied it to create examples that demon-

strate its effectiveness to create complex CMV visu-

alizations. Thinking about views as collections of ab-

stract shareable properties, rather than directly share-

able values, may encourage general thinking of coor-

dination on a more abstract level. This middle-level

abstraction appears to allow designers to think about

coordination at a higher level of abstraction like Neb-

ula (Chen et al., 2022), while keeping the ﬂexibility

beneﬁts of a lower level of mechanism (Keller et al.,

2024). Moving forward, we will explore migration of

the view abstraction to serve as a CMV abstraction

layer for other visualization libraries such as Vega-

Lite (Satyanarayan et al., 2017) and Plotly.js. More

broadly, we aim to support access to the full visualiza-

tion data processing pipeline, starting with dynamic

queries (Ahlberg et al., 1992) and extending C4D3

capabilities to include a functional reactive language

for visualization pipelines like in Improvise (Weaver,

2004). Another possibility is to extend C4D3 into

a client-server architecture for desktop, mobile, and

web clients using the coordination architecture as the

basis for remote interaction including collaborative

interaction via coordination (Weaver, 2007a).

ACKNOWLEDGEMENTS

We thank Remco Chang and Wenbo Tao for their in-

sights and feedback. This work was supported by Na-

tional Science Foundation Award #1351055.

REFERENCES

Ahlberg, C. (1996). Spotﬁre: An information exploration

environment. ACM SIGMOD Record, 25(4):25–29.

Ahlberg, C., Williamson, C., and Shneiderman, B. (1992).

Dynamic queries for information exploration: An im-

plementation and evaluation. In Proceedings of the

SIGCHI Conference on Human Factors in Comput-

C4D3: A View-Level Abstraction and Coordination Library for Building Coordinated Multiple Views with D3

965

ing Systems, CHI ’92, pages 619–626, New York, NY,

USA. Association for Computing Machinery.

Ahlberg, C. and Wistrand, E. (1995). IVEE: An information

visualization & exploration environment. In Proceed-

ings of the IEEE Symposium on Information Visual-

ization (InfoVis), pages 66–73, 142–143, Atlanta, GA.

IEEE.

Aiken, A., Chen, J., Stonebraker, M., and Woodruff, A.

(1996). Tioga-2: A direct manipulation database visu-

alization environment. In Proceedings of the Twelfth

International Conference on Data Engineering, pages

208–217, New Orleans, LA, USA. IEEE Comput.

Soc. Press.

Becker, R. A. and Cleveland, W. S. (1987). Brushing Scat-

terplots. Technometrics, 29(2):127–142.

Bostock, M. and Heer, J. (2009). Protovis: A Graphical

Toolkit for Visualization. IEEE Transactions on Visu-

alization and Computer Graphics, 15(6):1121–1128.

Bostock, M., Ogievetsky, V., and Heer, J. (2011). D

Data-

Driven Documents. IEEE Transactions on Visualiza-

tion and Computer Graphics, 17(12):2301–2309.

Boukhelifa, N. and Rodgers, P. J. (2003). A Model and

Software System for Coordinated and Multiple Views

in Exploratory Visualization. Information Visualiza-

tion, 2(4):258–269.

Buja, A., Cook, D., and Swayne, D. F. (1996). Interac-

tive High-Dimensional Data Visualization. Journal of

Computational and Graphical Statistics, 5(1):78–99.

Chen, H. (2003). Compound brushing. In Proceedings

of the IEEE Symposium on Information Visualization

(InfoVis), pages 181–188, Seattle, WA. IEEE Com-

puter Society.

Chen, R., Shu, X., Chen, J., Weng, D., Tang, J., Fu, S.,

and Wu, Y. (2022). Nebula: A Coordinating Grammar

of Graphics. IEEE Transactions on Visualization and

Computer Graphics, 28(12):4127–4140.

Fekete, J.-D. (2004). The InfoVis Toolkit. In IEEE Sym-

posium on Information Visualization, pages 167–174,

Austin, TX, USA. IEEE.

Fekete, J.-D., H

emery, P.-L., Baudel, T., and Wood, J.

(2011). Obvious: A meta-toolkit to encapsulate in-

formation visualization toolkits — One toolkit to bind

them all. In 2011 IEEE Conference on Visual Analyt-

ics Science and Technology (VAST), pages 91–100.

Hill, R. D., Brinck, T., Rohall, S. L., Patterson, J. F.,

and Wilner, W. (1994). The Rendezvous architecture

and language for constructing multiuser applications.

ACM Transactions on Computer-Human Interaction,

1(2):81–125.

Jankun-Kelly, T., Ma, K.-l., and Gertz, M. (2007). A Model

and Framework for Visualization Exploration. IEEE

Transactions on Visualization and Computer Graph-

ics, 13(2):357–369.

Keller, M. S., Manz, T., and Gehlenborg, N. (2024). Use-

Coordination: Model, Grammar, and Library for Im-

plementation of Coordinated Multiple Views.

Livny, M., Ramakrishnan, R., Beyer, K., Chen, G., Don-

jerkovic, D., Lawande, S., Myllymaki, J., and Wenger,

K. (1997). DEVise: Integrated querying and visual ex-

ploration of large datasets. In Proceedings of the 1997

ACM SIGMOD International Conference on Manage-

ment of Data - SIGMOD ’97, pages 301–312, Tucson,

Arizona, United States. ACM Press.

Myers, B., Giuse, D., Dannenberg, R., Zanden, B., Kosbie,

D., Pervin, E., Mickish, A., and Marchal, P. (1990).

Garnet: Comprehensive support for graphical, highly

interactive user interfaces. Computer, 23(11):71–85.

North, C. and Shneiderman, B. (1997). A taxonomy of mul-

tiple window coordinations. Technical Report CS-TR-

3854, University of Maryland Department of Com-

puter Science.

North, C. and Shneiderman, B. (2000). Snap-together vi-

sualization: A user interface for coordinating visual-

izations via relational schemata. In Proceedings of the

Working Conference on Advanced Visual Interfaces,

AVI ’00, pages 128–135, New York, NY, USA. Asso-

ciation for Computing Machinery.

Roth, S., Lucas, P., Senn, J., Gomberg, C., Burks, M., Strof-

folino, P., Kolojechick, A., and Dunmire, C. (1996).

Visage: A user interface environment for exploring in-

formation. In Proceedings IEEE Symposium on Infor-

mation Visualization ’96, pages 3–12,, San Francisco,

CA, USA. IEEE Comput. Soc. Press.

Satyanarayan, A., Moritz, D., Wongsuphasawat, K., and

Heer, J. (2017). Vega-Lite: A Grammar of Interac-

tive Graphics. IEEE Transactions on Visualization

and Computer Graphics, 23(1):341–350.

Satyanarayan, A., Russell, R., Hoffswell, J., and Heer, J.

(2016). Reactive Vega: A Streaming Dataﬂow Archi-

tecture for Declarative Interactive Visualization. IEEE

Transactions on Visualization and Computer Graph-

ics, 22(1):659–668.

Satyanarayan, A., Wongsuphasawat, K., and Heer, J.

(2014). Declarative interaction design for data visual-

ization. In Proceedings of the 27th Annual ACM Sym-

posium on User Interface Software and Technology,

pages 669–678, Honolulu Hawaii USA. ACM.

Shneiderman, B. (1994). Dynamic queries for visual infor-

mation seeking. IEEE Software, 11(6):70–77.

Square (2012). Crossﬁlter: Fast multidimensional ﬁltering

for coordinated views.

Takatsuka, M. and Gahegan, M. (2002). GeoVISTA Studio:

A codeless visual programming environment for geo-

scientiﬁc data analysis and visualization. Computers

& Geosciences, 28(10):1131–1144.

Weaver, C. (2004). Building Highly-Coordinated Visualiza-

tions in Improvise. In IEEE Symposium on Informa-

tion Visualization, pages 159–166, Austin, TX, USA.

IEEE.

Weaver, C. (2007a). Is Coordination a Means to Collabo-

ration? In Fifth International Conference on Coor-

dinated and Multiple Views in Exploratory Visualiza-

tion (CMV 2007), pages 80–84, Zurich, Switzerland.

IEEE.

Weaver, C. (2007b). Patterns of coordination in Impro-

vise visualizations. In Visualization and Data Anal-

ysis 2007, volume 6495, pages 188–199. SPIE.

Weaver, C. (2010). Cross-Filtered Views for Multidimen-

sional Visual Analysis. IEEE Transactions on Visual-

ization and Computer Graphics, 16(2):192–204.

IVAPP 2025 - 16th International Conference on Information Visualization Theory and Applications

966