What problem is HiGlass trying to solve?

from: Nature: The 4D nucleome project

Chromosome shape is not just a blobby “X”!

How do we show the “distance” between every point in the genome, at once?

from: guestnewzealand.com

from: higlass.io

Linked, zoomable contact matrices

These two are linked: zoom or pan one, and the other keeps up

Configurable 1-dimensional data tracks

Drag to rearrange, and save your view

Hit “+” to add new tracks, or new panels

Current zoom shown in context

Orders of magnitude: scale adjusts to what is in view

Image tiling won’t work: we need data tiling.

What problems is Vitessce trying to solve?

from: hms-dbmi.github.io/vitessce

Part of HuBMAP

​

How do we bring together:

• bright field and fluorescence microscopy
• image segmentation
• chemical imaging (mass spec)
• single cell sequencing
• … and more?

​

Scatterplots and heatmaps aren’t new, but how should we handle cells + molecules + imagery?

It’s a bit like a GIS…

• Cells → Regions
• Molecules → Points
• Microscopy → Aerial photography

(and down the road, spatial analysis?)

​

​

​

​

We settled on Deck.gl (from Uber):

• JS Library, React-ish
• Pushes computation into WebGL
• Flexible library of layers
• … but some geographic assumptions

​

(Kepler.gl is another tool from Uber,

which builds on top: ties components into application.)

PolygonLayer

Only 4000; We did simplify hulls

ScatterplotLayer

2 million points

CompositeLayer

Doesn’t provide selection out-of-the-box

TextLayer

Does not avoid overlap

GPUGridLayer

Aggregates data points on GPU

TileLayer

Only works with geographic data

Deck.gl geographic assumptions

• Examples all want Mapbox token.

​

• Don’t forget COORDINATE_SYSTEM.IDENTITY

​

• Camera positioning is overkill if I just have 2D data.

​

• “Picking” (identifying object at a point, or objects within bounds) was very slow; Deck.gl allocated memory proportional to coordinates…

→ TODO: Try again with v7.0.

​

• The TilingLayer is tied to geography: it knows the base is the entire world.

→ No way to specify a base with arbitrary bounds.

→ Deck.gl passes {x, y, w, h} to child components.

So, what should we use for imagery?

(Still under discussion!)

​

We like HiGlass… but maybe plain image tiling can work here? OpenSeadragon is a popular library.

• HiGlass is in the current Vitessce build
• … but OSD is behind the public demo.

​

The Higlass application is great for genomic data, and its handling of high dynamic range data is distinctive, but:

• Pixels-from-numbers is slower than plain-pixels.
• Needs work on tools for matrix data.

​

(detailed comparison)

OpenSeadragon possibilities

With plugin, map colors (Limited to 256)

​

var viewer = new OpenSeadragon.Viewer(...);

viewer.setFilterOptions({

filters: {

processors: OpenSeadragon.Filters.COLORMAP(

[[0, 0, 0],

[0, 240, 0],

[0, 255, 0]],

128)}});

​

Combine channels? demo

Filters: demo

Thank you, Internet:

React

react-grid-layout

PubSubJS

Karma

Mocha

Expect

PhantomJS

(and everything else they built on top of…)

CodeSandbox

Thank you, people:

… and collaborators, and everyone at DBMI@HMS

Your turn! This page is tiny.cc/2019-vis

(On codesandbox.io, click and then go live to collaborate with others.)