Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/genes.json

Last active December 20, 2015 00:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GerardoFurtado/775d862c9a5cdd683635 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/775d862c9a5cdd683635 to your computer and use it in GitHub Desktop.
Download ZIP
The Walk of Genes
Raw
genes.json
{"hba1": "ACTCTTCTGGTCCCCACAGACTCAGAGAGAACCCACCATGGTGCTGTCTCCTGCCGACAAGACCAACGTCAAGGCCGCCTGGGGTAAGGTCGGCGCGCACGCTGGCGAGTATGGTGCGGAGGCCCTGGAGAGGTGAGGCTCCCTCCCCTGCTCCGACCCGGGCTCCTCGCCCGCCCGGACCCACAGGCCACCCTCAACCGTCCTGGCCCCGGACCCAAACCCCACCCCTCACTCTGCTTCTCCCCGCAGGATGTTCCTGTCCTTCCCCACCACCAAGACCTACTTCCCGCACTTCGACCTGAGCCACGGCTCTGCCCAGGTTAAGGGCCACGGCAAGAAGGTGGCCGACGCGCTGACCAACGCCGTGGCGCACGTGGACGACATGCCCAACGCGCTGTCCGCCCTGAGCGACCTGCACGCGCACAAGCTTCGGGTGGACCCGGTCAACTTCAAGGTGAGCGGCGGGCCGGGAGCGATCTGGGTCGAGGGGCGAGATGGCGCCTTCCTCGCAGGGCAGAGGATCACGCGGGTTGCGGGAGGTGTAGCGCAGGCGGCGGCTGCGGGCCTGGGCCCTCGGCCCCACTGACCCTCTTCTCTGCACAGCTCCTAAGCCACTGCCTGCTGGTGACCCTGGCCGCCCACCTCCCCGCCGAGTTCACCCCTGCGGTGCACGCCTCCCTGGACAAGTTCCTGGCTTCTGTGAGCACCGTGCTGACCTCCAAATACCGTTAAGCTGGAGCCTCGGTGGCCATGCTTCTTGCCCCTTGGGCCTCCCCCCAGCCCCTCCTCCCCTTCCTGCACCCGTACCCCCGTGGTCTTTGAATAAAGTCTGAGTGGGCGGCA",
"col1a1": "AGCAGACGGGAGTTTCTCCTCGGGGTCGGAGCAGGAGGCACGCGGAGTGTGAGGCCACGCATGAGCGGACGCTAACCCCCTCCCCAGCCACAAAGAGTCTACATGTCTAGGGTCTAGACATGTTCAGCTTTGTGGACCTCCGGCTCCTGCTCCTCTTAGCGGCCACCGCCCTCCTGACGCACGGCCAAGAGGAAGGCCAAGTCGAGGGCCAAGACGAAGACATCCCACCAATCACCTGCGTACAGAACGGCCTCAGGTACCATGACCGAGACGTGTGGAAACCCGAGCCCTGCCGGATCTGCGTCTGCGACAACGGCAAGGTGTTGTGCGATGACGTGATCTGTGACGAGACCAAGAACTGCCCCGGCGCCGAAGTCCCCGAGGGCGAGTGCTGTCCCGTCTGCCCCGACGGCTCAGAGTCACCCACCGACCAAGAAACCACCGGCGTCGAGGGACCCAAGGGAGACACTGGCCCCCGAGGCCCAAGGGGACCCGCAGGCCCCCCTGGCCGAGATGGCATCCCTGGACAGCCTGGACTTCCCGGACCCCCCGGACCCCCCGGACCTCCCGGACCCCCTGGCCTCGGAGGAAACTTTGCTCCCCAGCTGTCTTATGGCTATGATGAGAAATCAACCGGAGGAATTTCCGTGCCTGGCCCCATGGGTCCCTCTGGTCCTCGTGGTCTCCCTGGCCCCCCTGGTGCACCTGGTCCCCAAGGCTTCCAAGGTCCCCCTGGTGAGCCTGGCGAGCCTGGAGCTTCAGGTCCCATGGGTCCCCGAGGTCCCCCAGGTCCCCCTGGAAAGAATGGAGATGATGGGGAAGCTGGAAAACCTGGTCGTCCTGGTGAGCGTGGGCCTCCTGGGCCTCAGGGTGCTCGAGGATTGCCCGGAACAGCTGGCCTCCCTGGAATGAAGGGACACAGAGGTTTCAGTGGTTTGGATGGTGCCAAGGGAGATGCTGGTCCTGCTGGTCCTAAGGGTGAGCCTGGCAGCCCTGGTGAAAATGGAGCTCCTGGTCAGATGGGCCCCCGTGGCCTGCCTGGTGAGAGAGGTCGCCCTGGAGCCCCTGGCCCTGCTGGTGCTCGTGGAAATGATGGTGCTACTGGTGCTGCCGGGCCCCCTGGTCCCACCGGCCCCGCTGGTCCTCCTGGCTTCCCTGGTGCTGTTGGTGCTAAGGGTGAAGCTGGTCCCCAAGGGCCCCGAGGCTCTGAAGGTCCCCAGGGTGTGCGTGGTGAGCCTGGCCCCCCTGGCCCTGCTGGTGCTGCTGGCCCTGCTGGAAACCCTGGTGCTGATGGACAGCCTGGTGCTAAAGGTGCCAATGGTGCTCCTGGTATTGCTGGTGCTCCTGGCTTCCCTGGTGCCCGAGGCCCCTCTGGACCCCAGGGCCCCGGCGGCCCTCCTGGTCCCAAGGGTAACAGCGGTGAACCTGGTGCTCCTGGCAGCAAAGGAGACACTGGTGCTAAGGGAGAGCCTGGCCCTGTTGGTGTTCAAGGACCCCCTGGCCCTGCTGGAGAGGAAGGAAAGCGAGGAGCTCGAGGTGAACCCGGACCCACTGGCCTGCCCGGACCCCCTGGCGAGCGTGGTGGACCTGGTAGCCGTGGTTTCCCTGGCGCAGATGGTGTTGCTGGTCCCAAGGGTCCCGCTGGTGAACGTGGTTCTCCTGGCCCCGCTGGCCCCAAAGGATCTCCTGGTGAAGCTGGTCGTCCCGGTGAAGCTGGTCTGCCTGGTGCCAAGGGTCTGACTGGAAGCCCTGGCAGCCCTGGTCCTGATGGCAAAACTGGCCCCCCTGGTCCCGCCGGTCAAGATGGTCGCCCCGGACCCCCAGGCCCACCTGGTGCCCGTGGTCAGGCTGGTGTGATGGGATTCCCTGGACCTAAAGGTGCTGCTGGAGAGCCCGGCAAGGCTGGAGAGCGAGGTGTTCCCGGACCCCCTGGCGCTGTCGGTCCTGCTGGCAAAGATGGAGAGGCTGGAGCTCAGGGACCCCCTGGCCCTGCTGGTCCCGCTGGCGAGAGAGGTGAACAAGGCCCTGCTGGCTCCCCCGGATTCCAGGGTCTCCCTGGTCCTGCTGGTCCTCCAGGTGAAGCAGGCAAACCTGGTGAACAGGGTGTTCCTGGAGACCTTGGCGCCCCTGGCCCCTCTGGAGCAAGAGGCGAGAGAGGTTTCCCTGGCGAGCGTGGTGTGCAAGGTCCCCCTGGTCCTGCTGGACCCCGAGGGGCCAACGGTGCTCCCGGCAACGATGGTGCTAAGGGTGATGCTGGTGCCCCTGGAGCTCCCGGTAGCCAGGGCGCCCCTGGCCTTCAGGGAATGCCTGGTGAACGTGGTGCAGCTGGTCTTCCAGGGCCTAAGGGTGACAGAGGTGATGCTGGTCCCAAAGGTGCTGATGGCTCTCCTGGCAAAGATGGCGTCCGTGGTCTGACCGGCCCCATTGGTCCTCCTGGCCCTGCTGGTGCCCCTGGTGACAAGGGTGAAAGTGGTCCCAGCGGCCCTGCTGGTCCCACTGGAGCTCGTGGTGCCCCCGGAGACCGTGGTGAGCCTGGTCCCCCCGGCCCTGCTGGCTTTGCTGGCCCCCCTGGTGCTGACGGCCAACCTGGTGCTAAAGGCGAACCTGGTGATGCTGGTGCCAAAGGCGATGCTGGTCCCCCTGGGCCTGCCGGACCCGCTGGACCCCCTGGCCCCATTGGTAATGTTGGTGCTCCTGGAGCCAAAGGTGCTCGCGGCAGCGCTGGTCCCCCTGGTGCTACTGGTTTCCCTGGTGCTGCTGGCCGAGTCGGTCCTCCTGGCCCCTCTGGAAATGCTGGACCCCCTGGCCCTCCTGGTCCTGCTGGCAAAGAAGGCGGCAAAGGTCCCCGTGGTGAGACTGGCCCTGCTGGACGTCCTGGTGAAGTTGGTCCCCCTGGTCCCCCTGGCCCTGCTGGCGAGAAAGGATCCCCTGGTGCTGATGGTCCTGCTGGTGCTCCTGGTACTCCCGGGCCTCAAGGTATTGCTGGACAGCGTGGTGTGGTCGGCCTGCCTGGTCAGAGAGGAGAGAGAGGCTTCCCTGGTCTTCCTGGCCCCTCTGGTGAACCTGGCAAACAAGGTCCCTCTGGAGCAAGTGGTGAACGTGGTCCCCCCGGTCCCATGGGCCCCCCTGGATTGGCTGGACCCCCTGGTGAATCTGGACGTGAGGGGGCTCCTGCTGCCGAAGGTTCCCCTGGACGAGACGGTTCTCCTGGCGCCAAGGGTGACCGTGGTGAGACCGGCCCCGCTGGACCCCCTGGTGCTCCTGGTGCTCCTGGTGCCCCTGGCCCCGTTGGCCCTGCTGGCAAGAGTGGTGATCGTGGTGAGACTGGTCCTGCTGGTCCCGCCGGTCCCGTCGGCCCCGTCGGCGCCCGTGGCCCCGCCGGACCCCAAGGCCCCCGTGGTGACAAGGGTGAGACAGGCGAACAGGGCGACAGAGGCATAAAGGGTCACCGTGGCTTCTCTGGCCTCCAGGGTCCCCCTGGCCCTCCTGGCTCTCCTGGTGAACAAGGTCCCTCTGGAGCCTCTGGTCCTGCTGGTCCCCGAGGTCCCCCTGGCTCTGCTGGTGCTCCTGGCAAAGATGGACTCAACGGTCTCCCTGGCCCCATTGGGCCCCCTGGTCCTCGCGGTCGCACTGGTGATGCTGGTCCTGTTGGTCCCCCCGGCCCTCCTGGACCTCCTGGTCCCCCTGGTCCTCCCAGCGCTGGTTTCGACTTCAGCTTCCTGCCCCAGCCACCTCAAGAGAAGGCTCACGATGGTGGCCGCTACTACCGGGCTGATGATGCCAATGTGGTTCGTGACCGTGACCTCGAGGTGGACACCACCCTCAAGAGCCTGAGCCAGCAGATCGAGAACATCCGGAGCCCAGAGGGAAGCCGCAAGAACCCCGCCCGCACCTGCCGTGACCTCAAGATGTGCCACTCTGACTGGAAGAGTGGAGAGTACTGGATTGACCCCAACCAAGGCTGCAACCTGGATGCCATCAAAGTCTTCTGCAACATGGAGACTGGTGAGACCTGCGTGTACCCCACTCAGCCCAGTGTGGCCCAGAAGAACTGGTACATCAGCAAGAACCCCAAGGACAAGAGGCATGTCTGGTTCGGCGAGAGCATGACCGATGGATTCCAGTTCGAGTATGGCGGCCAGGGCTCCGACCCTGCCGATGTGGCCATCCAGCTGACCTTCCTGCGCCTGATGTCCACCGAGGCCTCCCAGAACATCACCTACCACTGCAAGAACAGCGTGGCCTACATGGACCAGCAGACTGGCAACCTCAAGAAGGCCCTGCTCCTCAAGGGCTCCAACGAGATCGAGATCCGCGCCGAGGGCAACAGCCGCTTCACCTACAGCGTCACTGTCGATGGCTGCACGAGTCACACCGGAGCCTGGGGCAAGACAGTGATTGAATACAAAACCACCAAGTCCTCCCGCCTGCCCATCATCGATGTGGCCCCCTTGGACGTTGGTGCCCCAGACCAGGAATTCGGCTTCGACGTTGGCCCTGTCTGCTTCCTGTAAACTCCCTCCATCCCAACCTGGCTCCCTCCCACCCAACCAACTTTCCCCCCAACCCGGAAACAGACAAGCAACCCAAACTGAACCCCCCCAAAAGCCAAAAAATGGGAGACAATTTCACATGGACTTTGGAAAATATTTTTTTCCTTTGCATTCATCTCTCAAACTTAGTTTTTATCTTTGACCAACCGAACATGACCAAAAACCAAAAGTGCATTCAACCTTACCAAAAAAAAAAAAAAAAAAAAAAGAATAAATAAATAAGTTTTTAAAAAAGGAAGCTTGGTCCACTTGCTTGAAGACCCATGCGGGGGTAAGTCCCTTTCTGCCCGTTGGGTTATGAAACCCCAATGCTGCCCTTTCTGCTCCTTTCTCCACACCCCCCTTGGCCTCCCCTCCACTCCTTCCCAAATCTGTCTCCCCAGAAGACACAGGAAACAATGTATTGTCTGCCCAGCAATCAAAGGCAATGCTCAAACACCCAAGTGGCCCCCACCCTCAGCCCGCTCCTGCCCGCCCAGCACCCCCAGGCCCTGGGGACCTGGGGTTCTCAGACTGCCAAAGAAGCCTTGCCATCTGGCGCTCCCATGGCTCTTGCAACATCTCCCCTTCGTTTTTGAGGGGGTCATGCCGGGGGAGCCACCAGCCCCTCACTGGGTTCGGAGGAGAGTCAGGAAGGGCCACGACAAAGCAGAAACATCGGATTTGGGGAACGCGTGTCATCCCTTGTGCCGCAGGCTGGGCGGGAGAGACTGTTCTGTTCTGTTCCTTGTGTAACTGTGTTGCTGAAAGACTACCTCGTTCTTGTCTTGATGTGTCACCGGGGCAACTGCCTGGGGGCGGGGATGGGGGCAGGGTGGAAGCGGCTCCCCATTTTTATACCAAAGGTGCTACATCTATGTGATGGGTGGGGTGGGGAGGGAATCACTGGTGCTATAGAAATTGAGATGCCCCCCCAGGCCAGCAAATGTTCCTTTTTGTTCAAAGTCTATTTTTATTCCTTGATATTTTTTCTTTCTTTTTTTTTTTTTTTGTGGATGGGGACTTGTGAATTTTTCTAAAGGTGCTATTTAACATGGGAGGAGAGCGTGTGCGCTCCAGCCCAGCCCGCTGCTCACTTTCCACCCTCTCTCCACCTGCCTCTGGCTTCTCAGGCCTCTGCTCTCCGACCTCTCTCCTCTGAAACCCTCCTCCACAGCTGCAGCCCATCCTCCCGGCTCCCTCCTAGTCTGTCCTGCGTCCTCTGTCCCCGGGTTTCAGAGACAACTTCCCAAAGCACAAAGCAGTTTTTCCCTAGGGGTGGGAGGAAGCAAAAGACTCTGTACCTATTTTGTATGTGTATAATAATTTGAGATGTTTTTAATTATTTTGATTGCTGGAATAAAGCATGTGGAAATGACCCAAACATAATCCGCAGTGGCCTCCTAATTTCCTTCTTTGGAGTTGGGGGAGGGGTAGACATGGGGAAGGGGCCTTGGGGTGATGGGCTTGCCTTCCATTCCTGCCCTTTCCCTCCCCACTATTCTCTTCTAGATCCCTCCATAACCCCACTCCCCTTTCTCTCACCCTTCTTATACCGCAAACCTTTCTACTTCCTCTTTCATTTTCTATTCTTGCAATTTCCTTGCACCTTTTCCAAATCCTCTTCTCCCCTGCAATACCATACAGGCAATCCACGTGCACAACACACACACACACTCTTCACATCTGGGGTTGTCCAAACCTCATACCCACTCCCCTTCAAGCCCATCCACTCTCCACCCCCTGGATGCCCTGCACTTGGTGGCGGTGGGATGCTCATGGATACTGGGAGGGTGAGGGGAGTGGAACCCGTGAGGAGGACCTGGGGGCCTCTCCTTGAACTGACATGAAGGGTCATCTGGCCTCTGCTCCCTTCTCACCCACGCTGACCTCCTGCCGAAGGAGCAACGCAACAGGAGAGGGGTCTGCTGAGCCTGGCGAGGGTCTGGGAGGGACCAGGAGGAAGGCGTGCTCCCTGCTCGCTGTCCTGGCCCTGGGGGAGTGAGGGAGACAGACACCTGGGAGAGCTGTGGGGAAGGCACTCGCACCGTGCTCTTGGGAAGGAAGGAGACCTGGCCCTGCTCACCACGGACTGGGTGCCTCGACCTCCTGAATCCCCAGAACACAACCCCCCTGGGCTGGGGTGGTCTGGGGAACCATCGTGCCCCCGCCTCCCGCCTACTCCTTTTTAAGCTT",
"myh1": "ATGAGTTCCGACTCTGAGATGGCCATTTTTGGGGAGGCTGCTCCTTTCCTCCGAAAGTCTGAAAGGGAGCGAATTGAAGCCCAGAACAAGCCTTTTGATGCCAAGACATCAGTCTTTGTGGTGGACCCTAAGGAGTCCTTTGTGAAAGCAACAGTGCAGAGCAGGGAAGGGGGGAAGGTGACAGCTAAGACCGAAGCTGGAGCTACTGTAACAGTGAAAGATGACCAAGTCTTCCCCATGAACCCTCCCAAATATGACAAGATCGAGGACATGGCCATGATGACTCATCTACACGAGCCTGCTGTGCTGTACAACCTCAAAGAGCGCTACGCAGCCTGGATGATCTACACCTACTCAGGCTTGTTCTGTGTCACTGTCAACCCCTACAAGTGGTTGCCAGTGTATAATGCAGAGGTGGTGACAGCCTACCGAGGCAAAAAGCGCCAGGAGGCCCCACCCCACATCTTCTCCATCTCTGACAATGCCTATCAGTTCATGCTGACTGATCGGGAGAATCAGTCTATCTTGATCACCGGAGAATCTGGCGCAGGGAAGACTGTGAACACCAAGCGTGTCATCCAGTACTTTGCAACAATTGCAGTTACTGGGGAGAAGAAGAAGGAAGAAGTTACTTCTGGCAAAATGCAGGGGACTCTGGAAGATCAAATCATCAGTGCCAACCCCCTACTGGAGGCCTTTGGCAACGCCAAGACCGTGAGGAATGACAACTCCTCTCGCTTTGGTAAATTCATCAGGATCCACTTCGGTACCACAGGGAAACTGGCTTCTGCTGATATTGAAACATATCTTCTGGAGAAGTCTAGAGTTACTTTCCAGCTAAAGGCTGAAAGAAGCTATCATATTTTTTATCAGATCATGTCTAACAAGAAGCCAGATCTAATTGAAATGCTCCTGATCACCACCAACCCATACGATTATGCCTTCGTCAGTCAAGGGGAGATCACAGTGCCCAGCATTGATGACCAAGAAGAGTTGATGGCTACAGATAGTGCCATTGAAATTCTGGGCTTCACTTCAGATGAAAGAGTGTCCATCTATAAGCTCACAGGGGCTGTGATGCATTATGGGAACATGAAATTCAAGCAAAAGCAGCGTGAGGAGCAAGCTGAGCCAGATGGCACTGAAGTTGCTGACAAGGCAGCCTATCTCCAAAATCTGAACTCTGCAGATCTGCTCAAAGCCCTCTGCTACCCTAGGGTCAAGGTCGGCAATGAGTATGTCACCAAAGGTCAAACTGTGCAGCAGGTGTACAATGCAGTGGGTGCTCTGGCCAAAGCTGTCTACGATAAGATGTTCTTGTGGATGGTCACCCGCATCAACCAGCAGCTGGACACCAAGCAGCCCAAGGCCAACAGTGAGGTTGCCCAGTGGAGGACCAAATATGAGACAGATGCCATCCAGCGCACAGAGGAGCTGGAGGAGGCCAAGAAGAAGCTGGCTCAGCGTCTGCAGGATGCTGAGGAACATGTAGAAGCTGTGAATGCCAAATGTGCTTCCCTTGAGAAGACGAAGCAGAGGCTCCAGAATGAAGTTGAGGACCTCATGATTGATGTTGAGAGGACAAATGCTGCCTGTGCCGCCCTGGACAAAAAGCAAAGGAACTTTGATAAGATCCTGGCAGAATGGAAACAGAAGTGTGAAGAAACTCATGCTGAACTTGAAGCTTCTCAAAAGGAATCCCGCTCACTCAGCACAGAACTATTTAAGATTAAGAATGCTTATGAGGAATCTTTAGACCAACTTGAAACCTTGAAACGGGAAAATAAGAATTTGCAACAGGAGATTTCTGATCTCACTGAACAGATTGCAGAAGGAGGAAAGCGCATCCATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
"alb": "AGTATATTAGTGCTAATTTCCCTCCGTTTGTCCTAGCTTTTCTCTTCTGTCAACCCCACACGCCTTTGGCACAATGAAGTGGGTAACCTTTATTTCCCTTCTTTTTCTCTTTAGCTCGGCTTATTCCAGGGGTGTGTTTCGTCGAGATGCACACAAGAGTGAGGTTGCTCATCGGTTTAAAGATTTGGGAGAAGAAAATTTCAAAGCCTTGGTGTTGATTGCCTTTGCTCAGTATCTTCAGCAGTGTCCATTTGAAGATCATGTAAAATTAGTGAATGAAGTAACTGAATTTGCAAAAACATGTGTTGCTGATGAGTCAGCTGAAAATTGTGACAAATCACTTCATACCCTTTTTGGAGACAAATTATGCACAGTTGCAACTCTTCGTGAAACCTATGGTGAAATGGCTGACTGCTGTGCAAAACAAGAACCTGAGAGAAATGAATGCTTCTTGCAACACAAAGATGACAACCCAAACCTCCCCCGATTGGTGAGACCAGAGGTTGATGTGATGTGCACTGCTTTTCATGACAATGAAGAGACATTTTTGAAAAAATACTTATATGAAATTGCCAGAAGACATCCTTACTTTTATGCCCCGGAACTCCTTTTCTTTGCTAAAAGGTATAAAGCTGCTTTTACAGAATGTTGCCAAGCTGCTGATAAAGCTGCCTGCCTGTTGCCAAAGCTCGATGAACTTCGGGATGAAGGGAAGGCTTCGTCTGCCAAACAGAGACTCAAGTGTGCCAGTCTCCAAAAATTTGGAGAAAGAGCTTTCAAAGCATGGGCAGTAGCTCGCCTGAGCCAGAGATTTCCCAAAGCTGAGTTTGCAGAAGTTTCCAAGTTAGTGACAGATCTTACCAAAGTCCACACGGAATGCTGCCATGGAGATCTGCTTGAATGTGCTGATGACAGGGCGGACCTTGCCAAGTATATCTGTGAAAATCAAGATTCGATCTCCAGTAAACTGAAGGAATGCTGTGAAAAACCTCTGTTGGAAAAATCCCACTGCATTGCCGAAGTGGAAAATGATGAGATGCCTGCTGACTTGCCTTCATTAGCTGCTGATTTTGTTGAAAGTAAGGATGTTTGCAAAAACTATGCTGAGGCAAAGGATGTCTTCCTGGGCATGTTTTTGTATGAATATGCAAGAAGGCATCCTGATTACTCTGTCGTGCTGCTGCTGAGACTTGCCAAGACATATGAAACCACTCTAGAGAAGTGCTGTGCCGCTGCAGATCCTCATGAATGCTATGCCAAAGTGTTCGATGAATTTAAACCTCTTGTGGAAGAGCCTCAGAATTTAATCAAACAAAATTGTGAGCTTTTTGAGCAGCTTGGAGAGTACAAATTCCAGAATGCGCTATTAGTTCGTTACACCAAGAAAGTACCCCAAGTGTCAACTCCAACTCTTGTAGAGGTCTCAAGAAACCTAGGAAAAGTGGGCAGCAAATGTTGTAAACATCCTGAAGCAAAAAGAATGCCCTGTGCAGAAGACTATCTATCCGTGGTCCTGAACCAGTTATGTGTGTTGCATGAGAAAACGCCAGTAAGTGACAGAGTCACCAAATGCTGCACAGAATCCTTGGTGAACAGGCGACCATGCTTTTCAGCTCTGGAAGTCGATGAAACATACGTTCCCAAAGAGTTTAATGCTGAAACATTCACCTTCCATGCAGATATATGCACACTTTCTGAGAAGGAGAGACAAATCAAGAAACAAACTGCACTTGTTGAGCTCGTGAAACACAAGCCCAAGGCAACAAAAGAGCAACTGAAAGCTGTTATGGATGATTTCGCAGCTTTTGTAGAGAAGTGCTGCAAGGCTGACGATAAGGAGACCTGCTTTGCCGAGGAGGGTAAAAAACTTGTTGCTGCAAGTCAAGCTGCCTTAGGCTTATAACATCACATTTAAAAGCATCTCAGCCTACCATGAGAATAAGAGAAAGAAAATGAAGATCAAAAGCTTATTCATCTGTTTTTCTTTTTCGTTGGTGTAAAGCCAACACCCTGTCTAAAAAACATAAATTTCTTTAATCATTTTGCCTCTTTTCTCTGTGCTTCAATTAATAAAAAATGGAAAGAATCTAATAGAGTGGTACAGCACTGTTATTTTTCAAAGATGTGTTGCTATCCTGAAAATTCTGTAGGTTCTGTGGAAGTTCCAGTGTTCTCTCTTATTCCACTTCGGTAGAGGATTTCTAGTTTCTTGTGGGCTAATTAAATAAATCATTAATACTCTTCTAAAAAAAAAAAAAAAAAAA"}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>The Walk of Genes</title>
<style type="text/css">
body {
background-color: white;
font-family: 'PT Serif', serif;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 1px 10px 10px 10px;
background-color: white;
box-shadow: 1px 1px 1px 1px #fff;
}
h1 {
font-weight: 300;
color: darkslateblue;
font-family: 'Roboto', sans-serif;
font-size: 40px;
margin-bottom: 20px;
margin-top: 30px;
padding-left: 50px;
}
h2 {
font-weight: 300;
color: darkslateblue;
font-family: 'Roboto', sans-serif;
font-size: 24px;
margin-bottom: 20px;
margin-top: 30px;
padding-left: 50px;
}
h3 {
font-weight: 300;
color: darkslateblue;
font-family: 'Roboto', sans-serif;
font-size: 18px;
margin-bottom: 20px;
margin-top: 30px;
padding-left: 50px;
}
p {
font-size: 15px;
/*width: 1000px;*/
margin-top: 5px;
padding-left: 50px;
padding-right: 50px;
margin-bottom: 5px;
}
.code {
display: inline-block;
font-family: courier;
font-size: 14px;
border: gray solid 1px;
border-radius: 5px;
background-color: whitesmoke;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 50px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
a {
color: darkslateblue;
}
a:hover {
color: blueviolet;
}
.footer {
font-size: 14px;
margin-top: 0px;
}
line:hover {
stroke-width: 3px;
stroke: maroon;
}
circle:hover {
fill: maroon;
}
.button {
border-top: 1px solid #ffffff;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#d4d4d4), to(#ffffff));
background: -webkit-linear-gradient(top, #d4d4d4, #ffffff);
background: -moz-linear-gradient(top, #d4d4d4, #ffffff);
background: -ms-linear-gradient(top, #d4d4d4, #ffffff);
background: -o-linear-gradient(top, #d4d4d4, #ffffff);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: #262426;
font-size: 14px;
font-family: "PT Sans";
text-decoration: none;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
}
.button:hover {
border-top-color: #bfc4c7;
background: #cfd4d7;
color: #000000;
cursor: pointer;
}
.button:active {
border-top-color: #ffffff;
background: #ffffff;
}
.button:focus {
outline: 0;
}
.btn-group {
padding-left: 150px;
}
svg {
background-color: whitesmoke;
margin-left: auto;
margin-right: auto;
display: block;
border: 1px solid gray;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
</head>
<body>
<div id="container">
<h1>The Walk of Genes</h1>
<p>This is an original idea. After creating my <a href="http://bl.ocks.org/GerardoFurtado/raw/0011d805666b18f92aea/">Walk of PI</a>, based on <a href="https://www.carma.newcastle.edu.au/jon/numtools.pdf">this famous paper</a>, I thought “what about creating a similar visualization, but using genes?” I was very excited with this project and, to have a better understanding of the process, I decided to carefully read the original paper: oh, snap, they already did a walk using genes! Well, it’s still an original idea, it’s not plagiarism or anything... the only problem is that someone else had the idea before me!</p>
<p>If you are unfamiliar with the “walk of PI” or are too lazy to click the link, this is the basic concept: in the middle of the blank canvas sits one pixel. This pixel will move according to the sequence of nucleotides of a given gene: if the nucleotide is A, it will move up. If the nucleotide is T, it will move down. G makes the pixel move right and, finally, C makes it move left. So, reading all nucleotide sequence of a given gene, we’ll create a path on the canvas. This is the “walk” of that gene.</p>
<p>I chose the genes for four famous human proteins: haemoglobin, collagen, myosin and albumin. For reducing the size of the walk, only the exons are analysed, that is, the nucleotide sequence provided here is <b>not the actual gene</b>, but the sequence that produce the functional mRNA. Use your mouse or trackpad to zoom and drag the path, and click “reset zoom” to, well, reset zoom. Hover the path to check each nucleotide and its position. When the walk finishes, click “draw again” to restart the walk.</p>
<h2>1. Hemoglobin, α1 chain</h2>
<p>Hemoglobin is an intracellular quaternary protein, which in adults has two α chains and two β chains. The α chain gene, called HBA1, has 824 nucleotides (counting only the exons). This is its walk:</p>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" id="redraw1" class="button">Draw again</button>
<button type="button" id="nozoom1" class="button">Reset zoom</button>
</div>
<div id="svganchor1"></div>
<h2>2. Collagen, type I</h2>
<p>Collagen is the most abundant protein in human body. Actually, there are several different proteins called “collagen”. This is the walk of Type I Collagen, whose gene (COL1A1) has 6728 nucleotides (counting only the exons).</p>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" id="redraw2" class="button">Draw again</button>
<button type="button" id="nozoom2" class="button">Reset zoom</button>
</div>
<div id="svganchor2"></div>
<h2>3. Myosin II</h2>
<p>Myosin is a motor protein. In its quaternary structure, myosin is composed of a pair of myosin heavy chains (MYH) and two pairs of nonidentical light chains. This is the walk of myosin’s heavy chain, whose gene (MYH1) has 1881 nucleotides (counting only the exons).</p>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" id="redraw3" class="button">Draw again</button>
<button type="button" id="nozoom3" class="button">Reset zoom</button>
</div>
<div id="svganchor3"></div>
<h2>4. Serum Albumin</h2>
<p>Serum albumin is the main plasma protein. The serum albumin gene, called ALB, has 2264 nucleotides (counting only the exons). This is its walk:</p>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" id="redraw4" class="button">Draw again</button>
<button type="button" id="nozoom4" class="button">Reset zoom</button>
</div>
<div id="svganchor4"></div>
<br>
<h3>Additional information</h3>
<p>This is how I made it: Just like in the "Walk of PI" I first loaded a string with the gene sequence and, after that, I created an array with all the letters of the gene:</p>
<pre class="code">var gene = data.geneName;
var digitsofgenes = gene.split("");</pre>
<p>Then I created a rule describing how the pixels should move: A is up, G is right, T is down and C is left. This is pretty much arbitrary, but I kept the Watson-Crick pairs on opposite sides. Given x1, x2, y1 and y2 for the lines, this is the rule:</p>
<pre class="code">if (digitsofgenes[i] == "A") {
y2 = y1 - 1; x2 = x1;
} else if (digitsofgenes[i] == "T") {
y2 = y1 + 1; x2 = x1;
} else if (digitsofgenes[i] == "G") {
x2 = x1 + 1; y2 = y1;
} else if (digitsofgenes[i] == "C") {
x2 = x1 - 1; y2 = y1;
} else {
return;
}</pre>
<p>After each line being appended, the final coordinates are the initial coordinates for the next line:</p>
<pre class="code">x1 = x2;
y1 = y2;</pre>
<p>Also, each “move”, that is, each new nucleotide changes the colour of the line according to an RGB rule: red is up, blue is down-left and green is down-right. Using the variables “r”, “g” and “b”:</p>
<p class="code">var color = d3.rgb(r, g, b);</p>
<p>My next project is creating a version of this walk in which the user is able to type (or copy) any given gene sequence.</p>
<br>
<p class="footer">Created by Gerardo Furtado.</p>
</div>
<script type="text/javascript">
//set up width and height
var w = 700;
var h = 700;
//D3 zoom
var zoom1 = d3.behavior.zoom();
var zoom2 = d3.behavior.zoom();
var zoom3 = d3.behavior.zoom();
var zoom4 = d3.behavior.zoom();
//this will be set to "true" when the walk finishes
var finished;
//appends 4 svg canvases
var svg1 = d3.select("#svganchor1")
.append("svg")
.attr("width", w)
.attr("height", h)
.call(zoom1.on("zoom", function () {
svg1.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g");
var svg2 = d3.select("#svganchor2")
.append("svg")
.attr("width", w)
.attr("height", h)
.call(zoom2.on("zoom", function () {
svg2.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g");
var svg3 = d3.select("#svganchor3")
.append("svg")
.attr("width", w)
.attr("height", h)
.call(zoom3.on("zoom", function () {
svg3.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g");
var svg4 = d3.select("#svganchor4")
.append("svg")
.attr("width", w)
.attr("height", h)
.call(zoom4.on("zoom", function () {
svg4.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g");
//the "zoom" button
d3.select("#nozoom1").on("click", function () {
svg1.attr("transform", "translate(0,0)" + " scale(1)");
zoom1.scale(1);
zoom1.translate([0, 0])
});
d3.select("#nozoom2").on("click", function () {
svg2.attr("transform", "translate(0,0)" + " scale(1)");
zoom2.scale(1);
zoom2.translate([0, 0])
});
d3.select("#nozoom3").on("click", function () {
svg3.attr("transform", "translate(0,0)" + " scale(1)");
zoom3.scale(1);
zoom3.translate([0, 0])
});
d3.select("#nozoom4").on("click", function () {
svg4.attr("transform", "translate(0,0)" + " scale(1)");
zoom4.scale(1);
zoom4.translate([0, 0])
});
//loading the data
d3.json("genes.json", function(data) {
//the "drawn again" button
d3.select("#redraw1").on("click", function() {
if (finished == true) {
svg1.selectAll("*").remove();
drawn1();
}
});
d3.select("#redraw2").on("click", function() {
if (finished == true) {
svg2.selectAll("*").remove();
drawn2();
}
});
d3.select("#redraw3").on("click", function() {
if (finished == true) {
svg3.selectAll("*").remove();
drawn3();
}
});
d3.select("#redraw4").on("click", function() {
if (finished == true) {
svg4.selectAll("*").remove();
drawn4();
}
});
//creates the 1st walk
function drawn1() {
var gene = data.hba1;
//creates an array with all digits of PI
var digitsofgenes = gene.split("");
//it has not finished
finished = false;
//set scales
var xScale1 = d3.scale.linear()
.range([0, w])
.domain([150, 350]);
var yScale1 = d3.scale.linear()
.range([0, h])
.domain([150, 350]);
//create the letters
svg1.append("text")
.attr("y", 10)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "hanging")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("A");
svg1.append("text")
.attr("y", 690)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "ideographic")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("T");
svg1.append("text")
.attr("y", 350)
.attr("x", 10)
.attr("text-anchor", "start")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("C");
svg1.append("text")
.attr("y", 350)
.attr("x", 690)
.attr("text-anchor", "end")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("G");
//this circle marks the start
circor = svg1.append("circle")
.attr("cy", yScale1(250))
.attr("cx", xScale1(250))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circor.transition()
.duration(1000)
.attr("r", 3);
circor.append("title")
.text("This is the origin");
//r, g and b will be used on RGB colors
var r = 125, g = 125, b = 125;
//the origin of the walk
var x1 = 250;
var y1 = 250;
//creating the loop
var maxloops = digitsofgenes.length;
var i = -1;
(function loop() {
if (i++ >= maxloops) return;
setTimeout(function() {
if (digitsofgenes[i] == "A") {
y2 = y1 - 1; x2 = x1; r = r + 1; g = g - 1; b = b - 1;
} else if (digitsofgenes[i] == "T") {
y2 = y1 + 1; x2 = x1; r = r - 1; b = b + 1; g = g + 1;
} else if (digitsofgenes[i] == "G") {
x2 = x1 + 1; y2 = y1; g = g + 1; b = b - 1;
} else if (digitsofgenes[i] == "C") {
x2 = x1 - 1; y2 = y1; b = b + 1; g = g - 1;
} else { return; }
var color = d3.rgb(r, g, b);
var lines = svg1.append("line")
.attr("stroke", color)
.attr("x1", xScale1(x1))
.attr("y1", yScale1(y1))
.attr("x2", xScale1(x2))
.attr("y2", yScale1(y2))
.append("title")
.text("This is the nucleotide " + (i + 1) + ". It's a " + digitsofgenes[i]);
//the end of a line is the beginning of a new one
x1 = x2;
y1 = y2;
loop();
//time for each loop, in millisec
}, 10);
//when finished, creates another circle
if (i == maxloops) {
circend = svg1.append("circle")
.attr("cy", yScale1(y2))
.attr("cx", xScale1(x2))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circend.transition()
.duration(1000)
.attr("r", 3);
circend.append("title")
.text("This is the end");
finished = true;
};
//end of loop:
})();
};
//creates the 2nd walk
function drawn2() {
var gene = data.col1a1;
//creates an array with all digits of PI
var digitsofgenes = gene.split("");
//it has not finished
finished = false;
//set scales
var xScale2 = d3.scale.linear()
.range([0, w])
.domain([40, 460]);
var yScale2 = d3.scale.linear()
.range([0, h])
.domain([50, 450]);
//create the letters
svg2.append("text")
.attr("y", 10)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "hanging")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("A");
svg2.append("text")
.attr("y", 690)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "ideographic")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("T");
svg2.append("text")
.attr("y", 350)
.attr("x", 10)
.attr("text-anchor", "start")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("C");
svg2.append("text")
.attr("y", 350)
.attr("x", 690)
.attr("text-anchor", "end")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("G");
//this circle marks the start
circor = svg2.append("circle")
.attr("cy", yScale2(250))
.attr("cx", xScale2(250))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circor.transition()
.duration(1000)
.attr("r", 3);
circor.append("title")
.text("This is the origin");
//r, g and b will be used on RGB colors
var r = 100, g = 100, b = 100;
//the origin of the walk
var x1 = 250;
var y1 = 250;
//creating the loop
var maxloops = digitsofgenes.length;
var i = -1;
(function loop() {
if (i++ >= maxloops) return;
setTimeout(function() {
if (digitsofgenes[i] == "A") {
y2 = y1 - 1; x2 = x1; r = r + 1; g = g - 1; b = b - 1;
} else if (digitsofgenes[i] == "T") {
y2 = y1 + 1; x2 = x1; r = r - 1; b = b + 1; g = g + 1;
} else if (digitsofgenes[i] == "G") {
x2 = x1 + 1; y2 = y1; g = g + 1; b = b - 1;
} else if (digitsofgenes[i] == "C") {
x2 = x1 - 1; y2 = y1; b = b + 1; g = g - 1;
} else { return; }
var color = d3.rgb(r, g, b);
var lines = svg2.append("line")
.attr("stroke", color)
.attr("x1", xScale2(x1))
.attr("y1", yScale2(y1))
.attr("x2", xScale2(x2))
.attr("y2", yScale2(y2))
.append("title")
.text("This is the nucleotide " + (i + 1) + ". It's a " + digitsofgenes[i]);
//the end of a line is the beginning of a new one
x1 = x2;
y1 = y2;
loop();
//time for each loop, in millisec
}, 1);
//when finished, creates another circle
if (i == maxloops) {
circend = svg2.append("circle")
.attr("cy", yScale2(y2))
.attr("cx", xScale2(x2))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circend.transition()
.duration(1000)
.attr("r", 3);
circend.append("title")
.text("This is the end");
finished = true;
};
//end of loop:
})();
};
//creates the 3rd walk
function drawn3() {
var gene = data.myh1;
//creates an array with all digits of PI
var digitsofgenes = gene.split("");
//it has not finished
finished = false;
//set scales
var xScale3 = d3.scale.linear()
.range([0, w])
.domain([150, 350]);
var yScale3 = d3.scale.linear()
.range([0, h])
.domain([50, 450]);
//create the letters
svg3.append("text")
.attr("y", 10)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "hanging")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("A");
svg3.append("text")
.attr("y", 690)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "ideographic")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("T");
svg3.append("text")
.attr("y", 350)
.attr("x", 10)
.attr("text-anchor", "start")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("C");
svg3.append("text")
.attr("y", 350)
.attr("x", 690)
.attr("text-anchor", "end")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("G");
//this circle marks the start
circor = svg3.append("circle")
.attr("cy", yScale3(250))
.attr("cx", xScale3(250))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circor.transition()
.duration(1000)
.attr("r", 3);
circor.append("title")
.text("This is the origin");
//r, g and b will be used on RGB colors
var r = 100, g = 100, b = 100;
//the origin of the walk
var x1 = 250;
var y1 = 250;
//creating the loop
var maxloops = digitsofgenes.length;
var i = -1;
(function loop() {
if (i++ >= maxloops) return;
setTimeout(function() {
if (digitsofgenes[i] == "A") {
y2 = y1 - 1; x2 = x1; r = r + 1; g = g - 1; b = b - 1;
} else if (digitsofgenes[i] == "T") {
y2 = y1 + 1; x2 = x1; r = r - 1; b = b + 1; g = g + 1;
} else if (digitsofgenes[i] == "G") {
x2 = x1 + 1; y2 = y1; g = g + 1; b = b - 1;
} else if (digitsofgenes[i] == "C") {
x2 = x1 - 1; y2 = y1; b = b + 1; g = g - 1;
} else { return; }
var color = d3.rgb(r, g, b);
var lines = svg3.append("line")
.attr("stroke", color)
.attr("x1", xScale3(x1))
.attr("y1", yScale3(y1))
.attr("x2", xScale3(x2))
.attr("y2", yScale3(y2))
.append("title")
.text("This is the nucleotide " + (i + 1) + ". It's a " + digitsofgenes[i]);
//the end of a line is the beginning of a new one
x1 = x2;
y1 = y2;
loop();
//time for each loop, in millisec
}, 1);
//when finished, creates another circle
if (i == maxloops) {
circend = svg3.append("circle")
.attr("cy", yScale3(y2))
.attr("cx", xScale3(x2))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circend.transition()
.duration(1000)
.attr("r", 3);
circend.append("title")
.text("This is the end");
finished = true;
};
//end of loop:
})();
};
//creates the 4th walk
function drawn4() {
var gene = data.alb;
//creates an array with all digits of PI
var digitsofgenes = gene.split("");
//it has not finished
finished = false;
//set scales
var xScale4 = d3.scale.linear()
.range([0, w])
.domain([150, 350]);
var yScale4 = d3.scale.linear()
.range([0, h])
.domain([150, 350]);
//create the letters
svg4.append("text")
.attr("y", 10)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "hanging")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("A");
svg4.append("text")
.attr("y", 690)
.attr("x", 350)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "ideographic")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("T");
svg4.append("text")
.attr("y", 350)
.attr("x", 10)
.attr("text-anchor", "start")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("C");
svg4.append("text")
.attr("y", 350)
.attr("x", 690)
.attr("text-anchor", "end")
.attr("alignment-baseline", "middle")
.attr("font-size", 80)
.attr("opacity", 0.1)
.attr("font-family", "Roboto")
.text("G");
//this circle marks the start
circor = svg4.append("circle")
.attr("cy", yScale4(250))
.attr("cx", xScale4(250))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circor.transition()
.duration(1000)
.attr("r", 3);
circor.append("title")
.text("This is the origin");
//r, g and b will be used on RGB colors
var r = 100, g = 100, b = 100;
//the origin of the walk
var x1 = 250;
var y1 = 250;
//creating the loop
var maxloops = digitsofgenes.length;
var i = -1;
(function loop() {
if (i++ >= maxloops) return;
setTimeout(function() {
if (digitsofgenes[i] == "A") {
y2 = y1 - 1; x2 = x1; r = r + 1; g = g - 1; b = b - 1;
} else if (digitsofgenes[i] == "T") {
y2 = y1 + 1; x2 = x1; r = r - 1; b = b + 1; g = g + 1;
} else if (digitsofgenes[i] == "G") {
x2 = x1 + 1; y2 = y1; g = g + 1; b = b - 1;
} else if (digitsofgenes[i] == "C") {
x2 = x1 - 1; y2 = y1; b = b + 1; g = g - 1;
} else { return; }
var color = d3.rgb(r, g, b);
var lines = svg4.append("line")
.attr("stroke", color)
.attr("x1", xScale4(x1))
.attr("y1", yScale4(y1))
.attr("x2", xScale4(x2))
.attr("y2", yScale4(y2))
.append("title")
.text("This is the nucleotide " + (i + 1) + ". It's a " + digitsofgenes[i]);
//the end of a line is the beginning of a new one
x1 = x2;
y1 = y2;
loop();
//time for each loop, in millisec
}, 1);
//when finished, creates another circle
if (i == maxloops) {
circend = svg4.append("circle")
.attr("cy", yScale4(y2))
.attr("cx", xScale4(x2))
.attr("r", 200)
.attr("fill", "lavender")
.attr("stroke", "#222222");
circend.transition()
.duration(1000)
.attr("r", 3);
circend.append("title")
.text("This is the end");
finished = true;
};
//end of loop:
})();
};
drawn1();
drawn2();
drawn3();
drawn4();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment