VueJS plotting components - BA, Internship, IDP - Kuster Lab
Title: VueJS plotting components
Type: [ BA, internship, IDP ]
Category: [ UI ]
Programming language: [ JavaScript ]
Language: [ English ]
Prior experience: [ basic programming skills required, basic understanding of biology is a plus ]
Complexity/Risk: [ medium ]
Contact person: Matthew The
Brief background description: 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.
Brief description of the project: In this project, the goal is to release 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.
Expected result: 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).
Literature:
- Web Components: https://www.webcomponents.org/collections
- D3.js: https://d3js.org/
- Current repository of D3.js components: https://github.com/wilhelm-lab/proteomicsdb-components
Example: