Electrophoresis generator by D3.js


I made plugin version of the data visualization for D3.js.
Github: d3-electrophoresis.
Blog: New D3.js plugin: D3-electrophoresis released.


This is Electrophoresis Genarator.  Check and try it.

The wider page is here.



D3.js is a great tool for making data visualization projects. It allows us to binds data with svg elements which can be rendered on web browser.

As I mentioned in the previous post(Electrophoresis as physical data visualization), electrophoresis is a kind of physical form of data visualization. The whole process of it is convertible in digital: Bases of DNA, including ATGC, as string; restriction enzyme as split function; each band profile in a lane as a one dimensional chart based upon a list containing split fragments.

Thus I tried to make Electorophoresis Generator, using D3. I say that it was very fun to make, thanks to the convenient data utility and visualization function like .data() and .transition(). The captured image below is the result of that.



So what is it?:

This is digital mimicry of electrophoresis by JavaScript library, D3.js. Electrophoresis is a basic visualizing method for DNA.  Here is the detail about it. But in summary, electrophoresis in real world  has two processes: Cutting DNA sequence with restriction enzyme; separating each fragment and visualize as a band on agarose gel.

For this “Electrophoresis Generator.D3”, instead of DNA mixture, text like “ATGCCCA” is used in there. DNA sequence data is stored in online gene databases like GenBank.
As you see when you push turn on button, white bands in a lane represent separated fragments by restriction enzyme. Those bands are pulled down from the top of the gel, by voltage power. The vertical position indicates its length. Longer one stays on the top; smaller is pulled more down to the bottom relatively.

The far left lane serve as a measure of lengths. Mouseover motion evokes overlapped tooltips what show the length of the band.

So whole of the gel image show how often and how sparse the word is appeared in a text.


Obama’s speech mode:

This is digital mimicry, so you can load any data into the digital gel. To demonstrate this, I created a mode that takes a text of Obama’s speech and cuts with specific words at your choice. Additionally, I made free text mode as well. You can see the result of electrophoresis of Obama’s speech as below.


More details on the procedure:

1. Select a mode from DNA sequence, Obama’s speech, or free.

2. Put a template on the text-input area. The default is already sit on it except for free mode. PcrII is for DNA; Barack Obama Speech – Election Night Victory – Nov 4 2008  is for Obama’s speech. You can also put any alternatives on it.

3. Set numbers for the measure at the far left input, by using comma, like “100,500, 1000,5000,10000”. And choose cutting-words for each lane, which will cut the text you chose, at the point where the word exists. If you choose DNA mode, the cutting-words are, of course, the restrict enzymes. Obama’ speech mode has the default words like “USA”. Yet you can change them if desired.

4. Finally, press the turn on button, then voltage goes up and each text-fragments are going to be pulled down on the digitalized gel.

5. When your mouse hovers the gel image, the length of each fragmented text will come up near the band.


The code:

The code and data on Github: Electrophoresis.D3 .
The code and data on Gist: Electrophoresis emulator.


  1. Roch Mechatronics is Manufacture, Exporter, Supplier of Laboratory and scientific Equipments including Autoclave, Incubators, Environment Growth Chamber, Stability Equipment, Fermenters and various other equipment which are used all over the World in all major laboratories, hospitals and scientific research centers. Go to http://www.rochmechatronics.com

    • Sorry if I’m misunderstood your question. It is possible to take resulted word-counting data if you tweak the code.

      Since it’s my very first project by Javascript 2 years ago, the program lacks many basic functionality like outputting data.
      But I plan to come back to data visualization project soon. So I probably refine the code with more feature, for example outputting data, and make it a D3 plugin.

      • Could you please share me your mail id so that i can share where i am stucking, if you can help to figure out my issue.

Leave a Reply