search

EuBIC / EuBIC2023

EuBIC 2023 developer's meeting
https://eubic-ms.org/events/2023-developers-meeting/
13 stars 1 forks source link

Easy-to-use interactive HTML plots collection for data exploration and web tools #11

Open MatthewThe opened 2 years ago

MatthewThe commented 2 years ago

Title

Easy-to-use interactive HTML plots collection for data exploration and web tools

Abstract

Interactive data exploration and publicly accessible web applications for bioinformatics tools are an essential part of bioinformatics. Ideally, one uses the same framework for both to reduce development time. Shiny apps are popular for this purpose, but are limited to the R language, while Python’s interactive plotting solutions (Plotly, Bokeh) tend to have a steep learning curve and are tricky to deploy.

For ProteomicsDB (https://www.proteomicsdb.org/), we developed over a dozen interactive, general-purpose plots based on D3.js and Vue.js (https://github.com/wilhelm-lab/proteomicsdb-components). These range from simple scatter and bar plots to interaction graphs, heatmaps and pathway viewers. We managed to easily reuse and adapt these components in ongoing projects, allowing quick deployment upon publication.

For the hackathon, we propose releasing these plots as Web Components (https://www.webcomponents.org/introduction), the HTML standard that will shape the web for the coming decade. Web Components are easily includable in web pages as simple HTML tags without JavaScript knowledge. As this is purely a frontend framework, data processing and provisioning can be done in any programming language. We aim to provide examples and documentation to make integration for bioinformaticians easy and straightforward in any project.

Project Plan

The goal for the hackathon is to create a repository with Web Components for all our plotting components, and potentially add a few more. Each of the components can be installed individually and has example code and documentation. Additionally, separate repositories will be set up, demonstrating how one can utilize these components in combination with different programming languages (e.g. Python, R).

Tasks:

Taking part in this hackathon will allow you to become familiar with Web Components, the standard in web development for the next decade, and D3.js, a flexible plotting library for JavaScript. Furthermore, you will learn how to quickly set up a web tool with interactive plots in your language of choice.

Technical Details

Contact Information

Matthew The Chair of Proteomics and Bioanalytics Technical University of Munich matthew.the@tum.de

Julian Müller Chair of Proteomics and Bioanalytics Technical University of Munich julian2.mueller@tum.de

tobiasko commented 2 years ago

Dear @MatthewThe,

I am happy to inform you that your proposal has been selected for the DevMeeting2023! Participants will decide which hackathon to join after the pitch on Monday. Would be nice if Julian could also leave a comment here so he becomes part of this issue.

Best, Tobi

MatthewThe commented 2 years ago

Fantastic, looking forward to it!!

I have notified Julian to leave a comment

jmueller95 commented 2 years ago

...and here I am, leaving a comment ;) Looking forward to hacking with you!

tobiasko commented 1 year ago

Hello everyone,

I just created a slack workspace for the DevMeeting and a channel named interactive-html for this hack. You should receive an invite to join by email.

Best, Tobi

jmueller95 commented 1 year ago

In our Hackathon, titled "Easy-to-use interactive HTML plots collection for data exploration and web tools", we developed a set of frontend Web Components (https://www.webcomponents.org). Our starting point were the visualizations from the open-source multiomics platform ProteomicsDB (https://www.proteomicsdb.org), which are written in the Vue.js framework. We decided to use Typescript, a statically typed syntactical superset of the JavaScript language, for reimplementing and extending these visualizations in a way that is framework-independent. Our focus was on self-containment, reusability, and homogeneity. We collected our results in a monorepo termed 'biowc', short for biological web components. We managed to implement five visualization components, namely a Violin plot, a Histogram, a Bar plot, a Line plot, and a Swarm plot component, and we started the development of several other components. All of these are implemented as individual npm packages (https://www.npmjs.com) and are similar in code structure as well as the expected format for input data. Our monorepo is equipped with git hooks that ensure automated testing, linting, and code formatting. Furthermore, we created Storybooks (https://storybook.js.org) for each of our components, which provide interactive minimal working examples to the users of our code. We plan to finalize and release our biowc visualization suite in the near future. Our vision is that this will provide a maintainable, widely usable and tested resource for web developers in the life sciences.

You can find our code here: https://github.com/wilhelm-lab/biowc-core The first version of one of our packages is now published on npm: https://www.npmjs.com/package/biowc-scatter