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?:
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.