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

[MatthewThe]

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

[jmueller95]

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

[tobiasko]

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]

Fantastic, looking forward to it!!

I have notified Julian to leave a comment

[tobiasko]

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]

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