Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/genes.csv

Last active December 19, 2015 05:57
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/c7b028ebb8c8f1117dda to your computer and use it in GitHub Desktop.
Save GerardoFurtado/c7b028ebb8c8f1117dda to your computer and use it in GitHub Desktop.
Download ZIP
Genome size and number of genes
Raw
genes.csv
species description category size chromosomes genes dnabychromosome dnabygene
Pan troglodytes Chimpanzee - ANIMAL animal 3300 48 21506 137.5 153445.6
Homo sapiens Man - ANIMAL animal 3080 46 22287 133.9 138197.2
Mus musculus Mouse - ANIMAL animal 2640 40 25307 132.0 104319.0
Columba livia Pigeon - ANIMAL animal 1300 80 17300 32.5 75144.5
Anopheles gambiae Mosquito - ANIMAL animal 278 6 13683 92.7 20317.2
Drosophila melanogaster Fruit fly - ANIMAL animal 165 8 13525 41.3 12199.6
Caenorhabditis elegans Roundworm - ANIMAL animal 100 12 19873 16.7 5032.0
Saccharomyces cerevisiae Yeast - FUNGUS fungus 12.1 32 6294 0.8 1922.5
Neurospora crassa Red bread mold - FUNGUS fungus 43 14 10620 6.1 4049.0
Arabidopsis thaliana Thale cress - PLANT plant 125 10 25498 25.0 4902.3
Manihot esculenta Cassava - PLANT plant 760 36 33666 42.2 22574.7
Glycine max Soybean - PLANT plant 1115 40 46430 55.8 24014.6
Oryza sativa Rice - PLANT plant 420 24 32000 35.0 13125.0
Zea mays Corn - PLANT plant 2300 20 39656 230.0 57998.8
Clostridium tetani Tetanus bacterium - BACTERIUM bacteria 2.7 1 2373 2.7 1137.8
Escherichia coli Faecal coliform - BACTERIUM bacteria 5.5 1 5349 5.5 1028.2
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Genome size and number of genes</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: lavender;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#container {
width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 5px 50px 10px 50px;
background-color: white;
box-shadow: 1px 1px 1px 1px #fff;
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
font-weight: 700;
color: #4e5a64;
font-size: 48px;
margin-bottom: 10px;
}
h2 {
font-weight: 700;
color: #4e5a64;
font-size: 26px;
margin-bottom: 0px;
padding-bottom: 0px;
}
p {
font-size: 14px;
margin: 15px 0 10px 0;
}
a:link {
text-decoration: none;
color: gray;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color: steelBlue;
}
svg {
background-color: white;
}
g.bar text {
font-size: 11px;
font-weight: bold;
text-anchor: start;
opacity: 0;
}
g.bar:hover rect {
fill: tan;
}
circle:hover {
fill: tan;
}
g.bar:hover text {
opacity: 1;
}
.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: "Roboto";
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: #eeeeee;
}
.button:focus {
outline: 0;
}
.btn-group {
padding-left: 180px;
}
div.tooltip {
position: absolute;
text-align: center;
white-space: normal;
padding: 2px;
font-size: 14px;
background: whitesmoke;
border: 1px solid gray;
border-radius: 4px;
pointer-events: none;
cursor: none;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
.axis2 path,
.axis2 line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis2 text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id="container">
<h1>Genome size and number of genes:<br>no relationship</h1>
<img class="displayed" src="http://www.robinson-innovations.com/images/Company_Sub.jpg" align = "middle" width = 900 height = 200>
<br>
<h2>An organism’s genome size doesn’t depend on the number of genes (or chromosomes) it contains</h2>
<p>In bacteria and viruses, there is a linear relationship between the size of the genome (that is, the totality of DNA) and the number of genes. But when it comes to eukaryotes (animals, plants, fungi and a series of other organisms collectively known as protozoa and algae), this relationship doesn’t exist, nor does exist a relationship between any of them (genome size or number of genes) and the number of chromosomes.</p>
<p>In eukaryotes, most of the DNA doesn’t encode anything, and we are still understanding the functions — if any — of this DNA. Besides that, a chromosome is just an individual DNA molecule, and counting the number of chromosomes in a cell doesn’t provide any information about the size of the DNA or the number of genes it contains.</p>
<p>To illustrate this, the chart below shows the number of genes, the diploid number of chromosomes and the size of the genome (in Mbp, or mega base pairs) of some animals, fungi, plants and bacteria (bacteria have only 1 chromosome). Hover the bars to see the values. Click "show number of genes", "show genome size" and "show number of chromosomes" to change the values.</p>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" id="genomesize" class="button">Genome size</button>
<button type="button" id="numbergenes" class="button">Number of genes</button>
<button type="button" id="numberchrom" class="button">Number of chromosomes</button>
</div>
<div id="svganchor"></div>
<p>You can see that the width of the bars don’t change proportionally: an organism that was ranked high regarding the genome size now is ranked low regarding the number of genes, or an organism that was ranked high regarding the number of genes now is ranked low regarding the number of chromosomes.</p>
<p>After playing with the bars for a while, there is a better way to see this lack of relationship: a scatter plot.</p>
<p>In the following chart, the vertical axis represents the number of genes, and the horizontal axis the size of the genome (in Mbp, million base pairs). You can see that the organisms (the circles) don’t follow a pattern of dispersion. Hover to identify each organism. Click "Genome size vs Chromosomes", "Genes vs Chromosomes" and "Genome size vs Genes" to change the respective pair of variables.</p>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" id="sizevschro" class="button">Genome size vs Chromosomes</button>
<button type="button" id="genesvschro" class="button">Genes vs Chromosomes</button>
<button type="button" id="sizevsgenes" class="button">Genome size vs Genes</button>
</div>
<div id="svganchor2"></div>
<br>
<p>Sources: Wikipedia, WolframAlpha, BioNumbers, National Center for Biotechnology Information. Created by Gerardo Furtado.</p>
</div>
<script type="text/javascript">
var w = 850;
var h = 550;
var padding = [ 5, 10, 30, 180 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ])
.domain([ 0, 3600 ]);
var yScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var color1 = "#4a1486";
var color2 = "#6a51a3";
var color3 = "#807dba";
var coldesc = d3.scale.ordinal()
.domain(["animal", "fungus", "plant", "bacteria"])
.range(["#8da0cb", "#fc8d62" , "#66c2a5", "#e78ac3"]);
//Now SVG goes into #container instead of body
var svg1 = d3.select("#svganchor")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("genes.csv", function(data) {
yScale.domain(data.map(function(d) { return d.species; } ));
//Bind data to groups (not bars directly)
var groups = svg1.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "bar");
var texts = svg1.selectAll("text")
.data(data)
.enter();
//add information to y axis: species name
texts.append("text")
.attr("x", padding[3] - 10)
.attr("y", function(d) {
return yScale(d.species) + 12;
})
.attr("text-anchor", "end")
.attr("font-style", "italic")
.attr("font-size", 14)
.text(function(d) {
return d.species
});
//add more information to y axis: description
texts.append("text")
.attr("x", padding[3] - 10)
.attr("y", function(d) {
return yScale(d.species) + 26;
})
.attr("text-anchor", "end")
.attr("font-size", 12)
.attr("opacity", 1)
.attr("fill", function(d) { return coldesc(d.category); })
.text(function(d) {
return d.description
});
//Add a rect to each group
var rects = groups.append("rect")
.attr("x", padding[3])
.attr("y", function(d) {
return yScale(d.species);
})
.attr("width", 0)
.attr("height", yScale.rangeBand())
.attr("fill", color1);
//Add a text element to each group
groups.append("text")
.attr("x", function(d) {
return padding[3] + xScale(d.size) + 3;
})
.attr("y", function(d) {
return yScale(d.species) + 18;
})
.text(function(d) {
return d.size;
});
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("width", function(d) {
return xScale(d.size);
});
//creates the 1st "button"
d3.select("#genomesize")
.on("click", function() {
xScale.domain([ 0, 3600 ])
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("fill", color1)
.attr("width", function(d) {
return xScale(d.size);
});
groups.selectAll("text")
.attr("x", function(d) {
return padding[3] + xScale(d.size) + 3;
})
.attr("y", function(d) {
return yScale(d.species) + 18;
})
.text(function(d) {
return d.size;
});
d3.transition(svg1).select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
});
//creates the 2nd "button"
d3.select("#numbergenes")
.on("click", function() {
xScale.domain([ 0, 48500 ])
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("fill", color2)
.attr("width", function(d) {
return xScale(d.genes);
});
groups.selectAll("text")
.attr("x", function(d) {
return padding[3] + xScale(d.genes) + 3;
})
.attr("y", function(d) {
return yScale(d.species) + 18;
})
.text(function(d) {
return d.genes;
});
d3.transition(svg1).select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
});
//creates the 3rd "button"
d3.select("#numberchrom")
.on("click", function() {
xScale.domain([ 0, 90 ])
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("fill", color3)
.attr("width", function(d) {
return xScale(d.chromosomes);
});
groups.selectAll("text")
.attr("x", function(d) {
return padding[3] + xScale(d.chromosomes) + 3;
})
.attr("y", function(d) {
return yScale(d.species) + 18;
})
.text(function(d) {
return d.chromosomes;
});
d3.transition(svg1).select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
});
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
});
//The second svg, a scatter plot
var h2 = 500;
var svg2 = d3.select("#svganchor2")
.append("svg")
.attr("width", w)
.attr("height", h2);
var xScale2 = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ])
.domain([ 0, 3600 ]);
var yScale2 = d3.scale.linear()
.range([ padding[0], h2 - padding[2] ])
.domain([48000, 0])
var yAxis2 = d3.svg.axis()
.scale(yScale2)
.orient("left");
var xAxis2 = d3.svg.axis()
.scale(xScale2)
.orient("bottom");
var tt = d3.select("#svganchor").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var yline = svg2.append("line")
.attr("stroke", "steelBlue")
.attr("stroke-dasharray", "1,2");
var xline = svg2.append("line")
.attr("stroke", "steelBlue")
.attr("stroke-dasharray", "1,2");
d3.csv("genes.csv", function(data) {
//creating the circles
var circs = svg2.selectAll("circle")
.data(data)
.enter()
.append("circle");
circs.attr("cx", function(d) {
return padding[3] + xScale2(d.size)
})
.attr("cy", function(d) {
return yScale2(d.genes);
})
.attr("r", 8)
.attr("fill", function(d) { return coldesc(d.category); });
circs.on("mousemove", function(d){
tt.html("<em>" + d.species + "</em> has a " + d.size + " Mbp genome<br>and " + d.genes + " genes")
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", 0.9);
});
circs.on("mouseout", function() {
tt.style("opacity", 0);
xline.attr("opacity", 0);
yline.attr("opacity", 0);
});
circs.on("mouseover", function() {
xline.attr("x1", d3.select(this).attr("cx"))
.attr("y1", d3.select(this).attr("cy"))
.attr("y2", (h2 - padding[2]))
.attr("x2", d3.select(this).attr("cx"))
.attr("opacity", 1);
yline.attr("x1", d3.select(this).attr("cx"))
.attr("y1", d3.select(this).attr("cy"))
.attr("y2", d3.select(this).attr("cy"))
.attr("x2", padding[3])
.attr("opacity", 1);
})
//creates the 1st "button"
d3.select("#sizevschro")
.on("click", function() {
yScale2.domain([ 90, 0 ])
xScale2.domain([ 0, 3600 ])
circs.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("cx", function(d) {
return padding[3] + xScale2(d.size)
})
.attr("cy", function(d) {
return yScale2(d.chromosomes);
});
circs.on("mousemove", function(d){
tt.html("<em>" + d.species + "</em> has a " + d.size + " Mbp genome<br>and " + d.chromosomes + " chromosomes")
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", 0.9);
});
circs.on("mouseout", function() {
tt.style("opacity", 0)
xline.attr("opacity", 0);
yline.attr("opacity", 0);
});
d3.transition(svg2).select(".x.axis2")
.transition()
.duration(1000)
.call(xAxis2);
d3.transition(svg2).select(".y.axis2")
.transition()
.duration(1000)
.call(yAxis2);
});
//creates the 2nd button
d3.select("#genesvschro")
.on("click", function() {
yScale2.domain([ 90, 0 ])
xScale2.domain([ 0, 48000 ])
circs.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("cx", function(d) {
return padding[3] + xScale2(d.genes)
})
.attr("cy", function(d) {
return yScale2(d.chromosomes);
});
circs.on("mousemove", function(d){
tt.html("<em>" + d.species + "</em> has " + d.genes + " genes<br>and " + d.chromosomes + " chromosomes")
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", 0.9);
});
circs.on("mouseout", function() {
tt.style("opacity", 0)
xline.attr("opacity", 0);
yline.attr("opacity", 0);
});
d3.transition(svg2).select(".x.axis2")
.transition()
.duration(1000)
.call(xAxis2);
d3.transition(svg2).select(".y.axis2")
.transition()
.duration(1000)
.call(yAxis2);
});
//creates the 3rd button
d3.select("#sizevsgenes")
.on("click", function() {
yScale2.domain([ 48000, 0 ])
xScale2.domain([ 0, 3600 ])
circs.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("cx", function(d) {
return padding[3] + xScale2(d.size)
})
.attr("cy", function(d) {
return yScale2(d.genes);
});
circs.on("mousemove", function(d){
tt.html("<em>" + d.species + "</em> has a " + d.size + " Mbp genome<br>and " + d.genes + " genes")
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", 0.9);
});
circs.on("mouseout", function() {
tt.style("opacity", 0)
xline.attr("opacity", 0);
yline.attr("opacity", 0);
});
d3.transition(svg2).select(".x.axis2")
.transition()
.duration(1000)
.call(xAxis2);
d3.transition(svg2).select(".y.axis2")
.transition()
.duration(1000)
.call(yAxis2);
});
//create some labels
var textlabel = ["Animal", "Fungus", "Plant", "Bacterium"];
var labs = svg2.selectAll()
.data(textlabel)
.enter()
labs.append("text")
.attr("x", 20)
.attr("y", function(d, i) { return 50 + (20 * i); })
.attr("font-family", "roboto")
.attr("font-size", 12)
.text(function(d) { return d; });
labs.append("rect")
.attr("x", 0)
.attr("y", function(d, i) { return 38 + (20 * i); })
.attr("height", 15)
.attr("width", 15)
.attr("fill", function(d, i) { return coldesc(i) });
svg2.append("g")
.attr("class", "x axis2")
.attr("transform", "translate(" + padding[3] + "," + (h2 - padding[2]) + ")")
.call(xAxis2);
svg2.append("g")
.attr("class", "y axis2")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis2);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment