DNA Visualizer

Live Demo

Closely examine the DNA sequence of various species and diseases through dynamic charts and 3D renderings. Available on desktop or mobile.

• Features
• Technologies
• Contributing

Features

• Dynamic data modelling

  • Bar charts show base composition of user-selected and total regions.
  • Users can interact with a 3D model that is rendered based on the user's selection.
  

• Select specific regions of a sequence to examine in more detail

  

• Filter the selection by specific nucleotide bases

  

Technologies

• D3.js for bar charts

• Three.js for 3D modelling

  The DNA model consists of rotating shapes at a fixed angle and distance. By incrementing layers at an acute angle over time, the repetition creates a uniform helix.

  row.position.y = i * 2; //position of row height
  row.rotation.y = (30 * i * Math.PI) / 180; //angle for helix

Contributing

Local Development

1. Clone this repo to your local machine
2. In bash, run npm install, then npm run start
3. In VS code, install the "Open In Browser" extension
4. In VS code, right click index.html and select Open in default browser
5. In your default browser, use the inspector (Ctrl + Shift + I) to view additional logs

CI/CD

• Formatting: Prettier
• Linting: eslint