caleydo / gapminder

Gapminder port for Phovea using the Caleydo CLUE framework for provenance tracking and story telling. @JKU-ICG 💬 @thinkh

Caleydo - Visualization for Molecular Biology

Caleydo is a visualization framework for molecular biology data. It is targeted at analyzing multiple heterogeneous but related tabular datasets (e.g., mRNA expression, copy number status and clinical variables), stratifications or clusters in these datasets and their relationships to biological pathways.

For user documentation please refer to the Caleydo Help. For general information and downloads based on binaries please use the Caleydo Website. This guide assumes that you want to install Caleydo from source.

Installation

Caleydo uses Java, OpenGL and the Eclipse Rich Client Platform (RCP). Things you need to install before being able to run Caleydo:

• Eclipse Kepler for RCP and RAP Developers, which you can get from the eclipse download page. Other Eclipse versions won't work.
• Install EGit in Eclipse using software updates.
• Java SDK >= 1.7

To install Caleydo use EGit within Eclipse and clone the repository. Each directory in the caleydo-dev folder corresponds to an Eclipse project. Here is a good tutorial on how to import Eclipse projects from git.

If you want to use ssh (instead of https) for communicating with github out of eclipse follow these instructions. You will have to generate a new RSA key and save it to you ~/.ssh folder. Remeber to set a passphrase for you key. This will result in a file ida_rsa and ida_rsa.pub turning up in your ssh folder. Save your public rsa key with your eclipse account folder.

When cloning the repository follow the above tutorial. Don't change the username "git" to your username!

Team

Caleydo is an academic project currently developed by members of

• Institute for Computer Graphics and Vision at Graz University of Technology, Austria
• Institute of Computer Graphics at Johannes Kepler University Linz, Austria
• Pfister Lab at the School of Engineering and Applied Sciences, Harvard University, Cambridge, USA
• Park Lab at Harvard Medical School, Boston, USA

Acknowledgements

Caleydo makes use of a range of open source tools, bioinformatics resources and pre-packages several datasets, which we gratefully acknowledge here.

Software Libraries

• Bubble Sets - A Java implementation of the visualization technique.
• CDK - The Chemistry Development Kit.
• JGrahT - A graph library.
• Jogl - Java bindings for OpenGL.
• PathVisio - loading and parsing WikiPathways.
• WordHoard - statistical utilities.

Bioinformatics Resources

• David Bioinformatics Resources - Gene ID mapping.
• KEGG - Pathways.
• WikiPathways - Pathways.

Datasets

• CCLE - BROAD Institute Cancer Cell Line Encyclopedia.
• TCGA - The Cancer Genome Atlas.

Resources

• GitHub - Hosting our source code.
• WebStorm - Free developer licenses for our web projects from JetBrains.

gapminder's Issues

change time line from ordinal to linear scale based

the actual year selection is still based on strings. However, using an ordinal scale will simplify everything and makes the selection/dragging way smoother.

Adjust for population.

For almost everything we should use population adjusted numbers, because only those make sense. Otherwise I'm looking only at the big countries. GDP, Child mortality, etc., all that needs to be divided by population.

delayed response?

It seems that the location of the circles is not updated in sync with the slider position but with a short delay. Is this intentional? I find it a bit confusing because when the slider is moved quickly, it seems as if nothing is happening until all of a sudden everything starts to move rapidly.

Play Control in way when dropping a state onto story editor

• play controls taken up most of the space where i can drag and drop a state into the story editor
• move droppable state space up
  

Update to Webpack 4.0

We should update to Webpack 4.0 and adapt all dependencies and configurations accordingly.

population values just every 10year?

simple way: extend the dataset and use the same number again and again for interpolating the years, e.g. using R or python

more difficult way: handle as #2 missing data?

continent filter / highlight

• store in provenance graph

Data scaling

"(0-5 year-olds dying per 1,000 born) " --> with a max value of 7million.

Styling: Colors continent --> Africa change

styling- tooltip

• incorporated with .on("mouseover", function () {
  drawLine()
  updateTooltip()
  }
• tooltip shows selection info

Update to Typescript 3.8

Observed behavior

Updating the typescript and typedoc versions according to the snippet below without using stricter linting makes it possible to use the current typescript version with a minimum amount of errors.

"typedoc": "~0.16.9",
"typescript": "~3.8.1-rc",

Expected behavior

Updating the dependencies in the package.json and adding the following line of code in tsconfig.json (as well as fixing appearing type errors) should be sufficient for the usage of Typescript 3.8 as a first step.

"downlevelIteration": true, // required as long as target is `es5`

Migrate to Jest

We should migrate from Karma to Jest for testing due to compatibility issues.

After the update to Typescript 3.8, we can use the latest version.
For the usage of ts-jest it is important to use a pinned version without ^. The reason for that is that its Major version follows Jest, which means that minor changes can be breaking. See the docs.

Timeline slider styling

• looks too much like another axis at the moment
• if the text.act.year label is already visible on the chart then the timeline itself can be minimal label wise
  with small tick marks to indicate intervals
• something like below with ticks..

deal with missing values

plenty of countries have missing data -> how to deal with that?

Refactor stylesheets organization and imports

See https://github.com/datavisyn/visyn2020/issues/44

Logo is not displayed correctly

• Release number or git hash: 01b4324
• Web browser version and OS: Chrome 81, Linux
• Environment (local or deployed): both

Steps to reproduce

1. Open https://gapminder.caleydoapp.org/
2. Click on the i button in the navigation bar

Observed behavior

• Logo on the bottom left is not visible (SVG)
  
• this issue is likely to be related with webpack loaders

Expected behavior

• Logo is loaded correctly

Error while running npm test command

Hi,
I have downloaded the latest code from git repo.

When I am doing npm test, I am getting following issue:

node_modules/@types/jquery/index.d.ts(3246,5): error TS2300: Duplicate identifier 'export='.
node_modules/@types/marked/index.d.ts(161,5): error TS2300: Duplicate identifier 'export='.
src/index.ts(39,61): error TS2345: Argument of type 'ProvenanceGraph' is not assignable to parameter of type 'ProvenanceGraph'.
  Types have separate declarations of a private property '_actions'.
../phovea_clue/node_modules/@types/jquery/index.d.ts(3246,5): error TS2300: Duplicate identifier 'export='.
../phovea_clue/node_modules/@types/marked/index.d.ts(161,5): error TS2300: Duplicate identifier 'export='.

Last Label in Story sticking and appearing as Start node label

• In presentation mode the last step in the story i.e 1946 is appearing as the year label in the start node where 1800 should be

- Its happening in Authoring mode too interacting with the stepper navigation

Styling: Annotations in Story Editor clean up

strip or text wrap etc

styling- selecting dataset & transformation on axis

• labelling on axis with dropdown menu items is redundant.
• just use chevron-right (y axis) and chevron-down (x axis) to reveal dropdown menus
• label axis with dataset name after selection

div section aside left not hiding

Annotations using Text tool on the Chart are disappearing

• annotations are disappearing after they are created
• for example here, I had annotated the chart with some text where the arrow is but its disappeared after i moved to a different state in story board in presentation

Confused about the axis mapping

There are three drop-downs in the view, on the top left, bottom right and bottom left. I assume that the bottom right defines the x axis, but it defines the bubble size.

I'd suggest to sacrifice a couple of pixels on the right and move the drop-down for the bubble size into a separate panel on the right.

gapminder is not adapting to screen width

Switch dropdowns to static labels in authoring and pres

Fix label formatting for GDP in log

• when i switch from a linear to log scale on the x axis with GDP dataset loaded the label formatting overlaps

selection color is too similar to America continent color

Make selection color more salient. How about black?

Scale should remain constant across all years

As in the original Gapminder tool, the scale should remain constant when sliding over time.

styling- legend for continents

• need a legend for continents
• top right of chart --> although might look too fussy with large year label and plotted marks
• can try anyways
  
• on selection with mouse --> fill color --> function updateColors() --> filter marks to specific continent and grey out rest
• or opacity 0.2 for continents !selected

Round-off scales

Right now it can happen that a large part of a bubble at a maximum position is clipped. I'd suggest to add 5-10% to the max of the scales to avoid that.

Presentation Mode: Move automatically generated annotation

• in pres mode the annotation is obscured by the timeline at the bottom
• either hide the timeline in presentation mode as it is read only anyhu and the year text label informs us of what year we are in too so not really needed.
• or could just have the automatically generated annotation positioned at the top, center of the chart

Enable gif files

See https://github.com/datavisyn/visyn2020/issues/40

Summary

• enable gif files where necessary

make font for year in background bold and use lighter gray

The year is often interfering with the data, in particular data that is not selected.

color by continent

simple way: dataset by hand

sophisticated way: use a stratification containing the mapping.

Round and summarize labels

The labels are pretty long:

100,000 should be 100k

This could help: http://numeraljs.com/

Update dependencies

See https://github.com/datavisyn/visyn2020/issues/3

We should update all dependencies to the latest accessible versions, except for:

• all webpack dependencies
• all test dependencies
• d3 and bootstrap

It might be necessary to update jQuery and React in a separate step as well.

visual trails of historical elements for the selected ones

e.g. by attaching a different id?

Add json stringify to build id

Observed behaviour

• Build ID in webpack config causes errors if it is used without JSON.stringify()

ref line on $mark mouseover

• $mark .on(mouseover, drawLine())
• drawLine() --> append line --> x1, x2, y1,y2
• drawing from y1 --> y2( cy) pos of currently selected mark
  -drawing from x1 --> x2 (cx) pos of currently selected mark
• text is a matter of grabbing corresponding elem in array for selectedTimePoint
• gdp[country,selectedTimePoint]
• child[country,selectedTimePoint]
• use same selections to update #10 tooltip styling

Tool-Tip is slow

The tool-tip should be instantaneous. Right now it takes 2-3 seconds to appear.

change dataselection from dnd to dropdown for the axis, ...

affects:

• axis
• color
• size

transition are incrementally but should be just the last one

In the current version when using the slider the transitions change incrementally. However, it should just jump to the last state.

In the end: https://github.com/mbostock/d3/wiki/Selections#interrupt should do the job

Move legend to side-panel

Related to #19, maybe even #20 (could occlude a data point).

I would suggest that we move the Europe, America, Africa panel to a legend on the right.

Here is a problem with the occlusion:

Add legend for bubble size

We don't know what it means at the moment, add to panel on the right, discussed in #21.

How are the scales defined?

In this and many other examples:

It's unclear to me why there is that much whitespace. I realize that sometimes this is to not have to rescale the axis as we move over the time slider, but here I can't see the point that does that anywhere.

Add units

It's unclear what e.g., Child Mortality means. Is it plotted in absolute numbers in that case? Show the units in brackets, as in the original gapminder.

Check spelling

• countrys -> countries etc
• capitalisation etc

Styling: remove thumbnail in story panels if no screenshots taken

clean up

Add ticks and labels to time slider, replace widget

Right now there are only two labels in the slider. Add more, for ~10 in total.

Also, replace the circle used for the slider with something that doesn't look like a bubble in the scatterplot.

Styling: Align dropdowns