Infovis Charts Extensions

Infovis Charts

Minerva allows adding interactive charts to story points. These visualizations give the viewer additional data statistics. In the current version, the user can choose between bar charts, matrices, and scatterplots. The charts can also be linked to the image space. User interactions within the chart can trigger overlays, panning and zooming, as well as pointing to specific cells and regions in the image browser.

Scatterplot

The scatterplot chart allows showing any two metric dimensions up to a few thousand data points. Users can define colors, labels, and axes descriptions, as well as an introductory text. The screenshot below shows a U-Map projection where colors and labels are set according to cell phenotypes. Hovering over the data points reveals additional information that can be specified. Clicking on a data point can trigger a zooming/panning event and an arrow glyph to show the cell's position in the image.

Chart creation is not yet part of the authoring tool but authors can add a chart directly to the yaml file that contains the story descriptions.

- Name: UMAP
    Group: Structural Components    
      Audio: /assets/audio/speech_20190918201156545.mp3
      VisScatterplot:
        data: /assets/visdata/LUNG_3_UMAP_data_20200218.csv
        clusters:
          labels: Tumor,Other,Immune,Stromal
          colors: e41a1c, 377eb8, 4daf4a, 984ea3
          reorder: Tumor,Stromal,Immune,Other
        axes:
          x: UMAP_D1
          y: UMAP_D2
      Description: Description here</code>

displays the data:

"","Cell_ID","clust_ID","X_position","Y_position","UMAP_D1","UMAP_D2"
"1",57804,3,14242.6545454546,4537.25454545455,2.20106819588499,2.97097283790507
"2",45008,2,12242.1417910448,5073.0223880597,1.82707837009708,0.713481790466293
"3",80565,4,7418.20614035088,8242.4649122807,-2.86151483486962,-1.49183606602466

where UMAP_D1 and UMAP_D2 are set as axes and X_position and Y_position to link to the cell position in image space.

Matrix

The matrix chart allows to plot aggregated channel information and groups such as phenotype clusters against each other and to visualize correlations. Charts adapt automatically to the number of rows and columns in the dataset. Click events on a matrix column, e.g., CD45, can trigger to show a respective image overlay.

Chart creation is not yet part of the authoring tool but authors can easily add a chart to the yaml file that contains the story descriptions.

- Name: K-means Clustering
      Group: Structural Components
      Audio: /assets/audio/speech_20190918201156545.mp3
      VisMatrix: /assets/visdata/clust4hpdat_LUNG-3-PR.csv

displays (left matrix in image) the data:

ClustName,KERATIN,ASMA,CD45
Tumor,0.356225098,-0.454998929,-0.085779064
Stromal,-0.345658946,0.213412916,-0.206773617
Immune,-0.304689947,-0.119950697,0.445621169
Other,-0.296644655,-0.317059176,-0.043042572

Barchart

Chart creation is not yet part of the authoring tool but authors can easily add a chart to the yaml file that contains the story descriptions. Click events on a bar, e.g., Stroma, can trigger to show a respective image overlay.

    - Name: K-means Clustering
      Group: Structural Components
      Audio: /assets/audio/speech_20190918201156545.mp3
      VisBarChart: /assets/visdata/cellCounts.csv

displays the data:

type,frequency
Tumor,23000
Stroma,25000
Immune,32000
Other,28000

Extensions

Developers can implement a new infovis chart type by adding a respective function to infovis.js. Assuming we want to implement a boxplot we would add a new boxplot function as follows:

infovis.boxPlot= function(wid_waypoint, id, visdata, events, eventHandler){
    return d3.csv(visdata)
        .then(function(data) {
          //do sth. here
}

where wid_waypoint is the parent element to add the infovis chart to, id is the div's or svg's id, visdata is the csvdata to visualize, events is an easy event handler for click events, and eventhandler is an advanced global event handler with more customizable event functions, allowing to receive events and throw one of the defined events, e.g., to trigger zooming or certain overlays.

Next we need to register the plot in _includes/exhibit/render.js:

const allVis = ['VisMatrix', 'VisBarChart', 'VisScatterplot', "VisCanvasScatterplot", "BoxPlot"];

and set the new plot function as one of the rendering options. In addition, we need to define the clickHandler, i.e., if a click event should trigger an image mask/overlay, channel, or arrow function:

 const renderer = {
        'VisMatrix': infovis.renderMatrix,
        'VisBarChart': infovis.renderBarChart,
        'VisScatterplot': infovis.renderScatterplot,
        'VisCanvasScatterplot': infovis.renderCanvasScatterplot
        'VisBoxPlot': infovis.renderBoxPlot
      }[visType]
      const clickHandler = {
        'VisMatrix': chanAndMaskHandler,
        'VisBarChart': maskHandler,
        'VisScatterplot': arrowHandler,
        'VisBoxPlot': maskHandler

For more details, the yet implemented plots serve as easy examples.