Infovis Charts Extensions
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 scatterplots, matrices, and bar charts. 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.
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.
To display larger datasets the CanvasScatteplot allows to zoom and pan in the plot using mouse dragging and mouse wheel.
The implementation renders the data points on an html5 canvas instead as scalable vector graphics (svgs) and thus allows to render up to 150,000 data points interactively, depending on the client device. The yaml code is similar to the normal satterplot:
VisCanvasScatterplot:
data: /assets/visdata/LUNG-3-PR_scatter_data_20200207.csv
clusters:
labels: Tumor,Other,Immune,Stromal
colors: e41a1c,984ea3,4daf4a,377eb8
reorder: Tumor,Stromal,Immune,Other
axes:
x: ASMA
y: CD45
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., ASMA, 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
The matrix can also be specified in this way, allowing for more options: VisMatrix: data: /assets/visdata/clust7hpdat_LUNG-3-PR.csv colormapInvert: true colorTicks: 8
Specifies the data location
colormapInvert: false specifies to have a bright color for low expression and dark color for high expression
colormapInvert: true specifies to have a dark color for low expression and bright color for high expression
The number of bins/ticks of the discrete colormap can be set between 3 and 9. All other values will be up or downgraded to 9 or 3 respectively.
Bar charts can be added by only adding one line in the yaml file that links to the csv data and display as many bars as data rows in the dataset.
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
Developers can implement a new infovis chart type by adding a respective function to infovis.js as part of the Minerva Browser Repository.
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 csv data 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 render.js: (part of the Minerva Browser Repository ).
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': maskHandlerFor more details, the yet implemented plots serve as easy examples.