Visualizing DNA Sequences

Need help? Explanation at the bottom! Click here to scroll.

Want to see an example? Demo here.


Base-Config:

Data-Config:
Color?


Progress: 0%

Sequence is going to appear here.
Quick-Edit options will appear underneath the graph.

Quick-edit:?

Explanation:

You can find a demo here.

This site uses the 4 DNA bases: Adenin, Cytosin, Guanin and Thymin
to visualize DNA sequences. While this can be used to show correlations between strains,
(example: Human vs. Chimpanzee ) the general use was intended for artistic purposes only.

Play around with the settings and create something brand new.

If you want to use something created with this, I'd absolutely LOVE(!) to hear about it.
Please send me a tweet on Twitter or reach me privately via my website.

You can find the source code here.

Tips:

  • The graph is fully interactive, you can zoom and drag the view around!
    Simply draw a rectangle inside the graph to zoom. Double click to reset your view.
  • You can hover (click on mobile!) over the words with the question marks to get more help.
  • The sequence input is case insensitive.
  • You can click on the color-boxes in the settings section to change them!
    After that, redraw the image with the draw-button.
  • You can find a couple of DNA sequences here.
    The National Center for Biotechnology Information is providing access to biomedical and genomic information.
    I'd recommend googling something like: "ebola ncbi full genome", and you'll find some samples.
  • In my personal testing I have found that Firefox crashes less often than Chrome.
    Your milage may vary but I have also noticed that if you crash Chrome once, you should
    restart Chrome entirely. Not sure why, but there you go. /shrug