Click on the image above to open interactive visualization

Disclaimer

The data used for the visualization is a snapshot of the data about COVID-19 until July 8th 2020 from the worldometer website. The visualization is not intended as a resource to learn about the COVID-19. It is merely intended to showcase the capabilities of the C4D3 framework.

Background

The above example shows a coordination visualization in D3 using the Live properties architecture of Improvise software.

Interface

Clicking on the image shown above will open the visualization in a new window. Different views are organized column wise. Each view is embedded in a rectangular region with a thick border on the top. Each view can be independently moved, and the interface can be reorganized by clicking and dragging the thick border on the top of each view.

• The first column from left consists of two scatter plots. The top left scatter plot shows tests per million variable drawn on horizontal axis vs cases per million variable on vertical axis. The bottom left scatter plot shows deaths per million variable drawn on horizontal axis vs tests per million variable drawn on vertical axis
• The second column from left shows a table view that shows all the data set. The continent column of the table view is colored based on the categorical color assigned to each continent as per the legend shown in the choropleth map and bubble chart in the third and fourth columns, respectively.
• The third column from left shows a choropleth map using Mercator projection of the world map. Each continent is colored based on the categorical color assigned to continent
• The fourth column from left shows a bubble chart and a selection menu with various bubbles drawn using radius of the circle to represent in the drop-down menu.
• The fifth column from left shows a parallel coordinate plot that is drawn using the same data. The color of the paths is drawn using categorical color assigned to attribute of the continent.

All the views use the color encoding from ColorBrewer 2.0 website.

Coordination

• The two scatter plots on the first column from the left are coordinated by the range property. The horizontal range of the top scatter plot is coordinated with the vertical range of bottom scatter plot.
• The top scatter plot in the first column and the choropleth Map are coordinated in selection. Any selection made in either of the above views will reflect in other.
• The bottom scatter plot in the first column, table view and the parallel coordinate plot are coordinated in selection. Any selection made in the scatterplot view or table view will reflect the selected items in the three coordinated plots.
• The scatter plots, table view, choropleth map and bubble chart are coordinated in indication. Any item indicated by hovering in table view, choropleth map and bubble chart will be highlighted in other coordinated plots.

Interaction

Scatter plot

The current implementation supports either zoom or brush functionality on the scatter plot at a time. we decided to implement brushing functionality instead. Brushing can be done in the scatter plot view by clicking the mouse anywhere on the scatter plot followed by drag and release to select a region. Brushing in the above implementation is performed using rectangular brushed regions. Any items that fall in the brushed region are selected. Selected items are shown in the scatter plot using a black colored stroke.

Table view

Selection in table view is done by double clicking on the row for selecting a single element. For selecting multiple rows click on a row and drag the mouse to the top or bottom based on the direction in which the selection is to be made. There are performance issues associated with multiple row selection in case of table view in the current implementation which will be addressed later which causes the multi row selection to not perform consistently always. The selected rows have a red colored text font. Indication is done in table view by hovering the mouse over the row. The indicated row is shown using a "teal" background color.

Choropleth map

Selection is done on the choropleth map by clicking twice on a country with a small-time gap between clicks otherwise the interaction will also trigger zoom along with selection. Selected regions are filled with grey color. Indication is done by hovering the mouse over the country. Indicated regions will be highlighted with a blue border and a reduced opacity.

Bubble chart

Selection is done on the bubble chart by clicking twice on a bubble. Selected items are filled with grey color. Indication is done by hovering the mouse over the bubble. Indicated items will be highlighted with a white border and a reduced opacity.

Parallel coordinate plot

The above parallel coordinate plot does not allow selection or hovering. It will only display selected items when selected in a corresponding coordinated view.