New D3.js plugin: D3-electrophoresis released

I made original code around four years ago as my first javascript / data-visualization project. Since it was spaghetti code, I had hesitated to refine the code to make the plugin for a long time.

Now I released the plugin version on Github: d3-electrophoresis.

It simulates a fundamental DNA-measurering method —  electrophoresis– which cuts DNA sequence with restriction enzyme. Restriction enzymes recognize a specific base pattern such as “ATTA”, and cut DNA at the point.
And in the gel, a vertical lane includes DNA segment cut by a restriction enzyme. long segments stop early(top side), short segments go far(down side). It forms bands in each lane, which represents a profile of DNA sequence.

The plugin is digital mimicry of electrophoresis, so you can cut not only DNA sequence, but also any texts with selected words.


Refuting to seek readable visualization:

It is not a type of data visualization for understanding data or storytelling.
It is a kind of type to help you seeking isomorphism between different subjects, such as electrophoresis on president Trump’s speech.

In the effort, you should think like that: if president’s speech is DNA, restriction enzyme is cutting word, so what is chromosome then? or virus? Do the DNA inherits anywhere?
Then you should made data visualization that can apply two subjects. If succeeded, the data visualization represents isomorphism between them.
There are similar topics in “Gödel, Escher, Bach: An Eternal Golden Braid” by Douglas R. Hofstadter.

I am going to write the detailed concept for that in the blog.



Simple example:

Showcase and code.

Cutting DNA sequence with restriction enzyme:

  • Try it. You can change text and words in text box.
  • Code.

Cutting Trump’s inauguration text:

  • Try it. You can change text and words in text box.
  • Code.

Text source: Read the Full Text of President Trump’s Inaugural Address.

Importing resulted SVG in CGI scene:

I downloaded SVG of trump’s inauguration text by the chrome bookmarklet, SVG Crowbar.
And I imported the SVG in Blender, then use them as bands of gel in 3D scene.
The entire scene of two images above are CGI I made in Blender. It’s not perfect recreation of gel because DNA bands are shown only when the gel is subjected to UV light.

One Comment
  1. Pingback: Electrophoresis generator by D3.js - Gappy Facets

Leave a Reply