Coordination for Data-Driven Documents (C4D3) is a framework for building coordinated multiple views (CMV) using view level abstractions provided on top of D3.js library. Coordinated multiple views is essential for understanding high dimensional data. While many desktop applications exist for developing CMV, there is still a need to develop framework for the browser environment where visualization designers should be able to build CMV with little effort. We set out to develop C4D3 with an aim to address this need by providing a coordination architecture and view level abstractions for building coordinated visualizations for the web.

Many libraries exist for building visualizations in the browser environment out of which we chose D3 as the visualization library for the framework to build individual views due to its accessibility, expressiveness and its popularity. D3 also provides a wide array of example visualizations of various types that designers can take advantage of while building the views. View wrappers are built on top of D3 code to support the coordination framework by providing various methods and variables to modify the views. We adapted the Live properties (a coordination architecture) as the core of CMV abstraction for coordinating D3 views. The coordination architecture provides a centralized control of the coordination mechanism between views and provides a clean, conceptual view of the coordination between the views. The coordination architecture also provides flexibility in defining complex coordinations in a very simple manner. The C4D3 framework provides separation of concerns by delegating the interaction handling mechanism of the CMV to the Live properties architecture as a result providing a clean code for building D3 views.

The development of C4D3 occurred in several overlapping stages as follows:

• planning and understanding,
• design and analysis,
• developing the coordination architecture and view abstractions,
• developing and testing of initial version of C4D3 framework,
• extending the coordination architecture and view abstraction to work with the D3 library, and
• building examples of complex coordinated visualizations using C4D3 framework.

An explanation of all of these stages can be found here.

The diagram below shows the overview of the C4D3 framework, the coordination mechanism, and the view level abstractions for two D3 views, view-A and view-B. Whenever the user interacts with a view, events are generated. These events propagate through the framework and update the visualizations based on the way we define the coordination mechanism and each individual views. Each of the views above is wrapped inside a view wrapper that contains properties that define the behavior and appearance of the views. The wrapper also contains methods by which the views interpret these controls to modify the views. The view-A in diagram above also shows the various circumstances in which a view will be updated.

There are four cases when a view is drawn. First, instantiating the control will draw the view using the default parameters and visual encoding which is represented as initial visual encoding. Second, when the user assigns default values to the properties of the view wrapper when he binds the variable to the control, the view is updated to reflect the default values of the properties using appropriate methods which is represented as live property visual encoding. Third, whenever a user performs an interaction, if the interaction has any decoration associated with it such as grey rectangle in case of brushing, the decoration is drawn which is represented as interaction visual encoding. Fourth, any interaction in the view by the user will create an event which the user uses to create a value for the live property. For example, if the user uses a brush event to select the containment of points in the region and creates a bit array to represent the state of the data item. This value will trigger a series of events and is finally sent to all the views that are coordinated. The views use this value to draw the visual encoding the user chooses for the particular interaction which is also represented as live property visual encoding.

We built two complex, highly coordinated multiple view visualizations using the C4D3 framework using a variety of view types as proofs of concept. The first C4D3 visualization demonstrates coordination of a heterogeneous assortment of views of a snapshot of COVID-19 data. The second C4D3 visualization reproduces many of the features of the classic Improvise visualization of ions data.