Ions Visualization

ions Example

Click on the image above to open interactive visualization


The above example shows a coordination visualization in D3 using the Live properties architecture of Improvise software. The data for the following visualization is taken from ions visualization.


Clicking on the image shown above will open the visualization in a new window. The visualization displays different spatial and temporal aspects of a simulated ion cloud trajectory organized column wise. A highly coordinated set of timeseries plots, table views and other views reveal different characteristics of oscillatory motion. The trajectory is displayed in a variety of ways by the views in the visualization. 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 views map time into a translucent red-to-black color gradient that suggests (but does not map precisely to) decreasing energy of the ion cloud over time.



Scatter plot

The current implementation supports either zoom or brush on the scatter plot at a time. we decided to implement brush property instead. Brushing can be done in the scatterplot view by clicking the mouse anywhere on the scatterplot followed by drag and release to select a brushed 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. Brushing on the scatter plots in the first column will select items in the coordinated views to the plot on which the brushing is performed. Brushing performed on any of the overview plot will draw a detailed plot for the brushed region. Brushing performed on the detailed view will not have any effect as no coordination is defined for the brushing action.

Parallel coordinate plot

The above parallel coordinate plot does not allow selection or hovering. It will only display selected items from a corresponding coordinated view. The selected items are drawn using thick lines.

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 multi row selection in case of table view in the current implementation which will be addressed later which causes the multiple selection to not perform consistently. The selected rows have a red colored text font. The table view and the scatter plots in the first column are coordinated in selection.

Perpetual slider

The perpetual slider and the parallel coordinate plot are coordinated in selection. Selection is performed in the perpetual slider by brushing. The slider is filled with a color gradient approximately corresponding to increasing time scale in the data. Any selection performed in the slider will select the corresponding data points in the linked parallel coordinate plot.