Click on the image above to open interactive visualization
The data used for the visualization is a snapshot of the data about COVID-19 until July 8th 2020 from theworldometer 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.
The above example shows a coordination visualization in D3 using the Live properties architecture of
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.
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.
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.
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.
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.
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.