COVID-19 Visualization

COVID-19 Example

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.

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

Coordination

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.