Skip to content

Instantly share code, notes, and snippets.

@inspired12

inspired12/data.csv

Last active August 31, 2015 19:01
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 inspired12/75f3116f2f0253668159 to your computer and use it in GitHub Desktop.
Save inspired12/75f3116f2f0253668159 to your computer and use it in GitHub Desktop.
Download ZIP
Countdown to Singularity (Log and Linear)
Raw
data.csv
Time before Present Time to Next Event Event
3700000000 2400000000 Life
1300000000 750000000 Eucaryotic cells, multicellular organisms
550000000 220000000 Cambrian Explosion (body plans)
330000000 135000000 Reptiles
195000000 113500000 Class Mammalia
81500000 49000000 Primates
32500000 25500000 Superfamily Hominoidea
7000000 3100000 Family Hominidae
3900000 2100000 Human ancestors walk upright
1800000 800000 Genus Homo, Homo Erectus, specialized stone tools
1000000 700000 Spoken language
300000 200000 Homo sapiens
100000 75000 Homo sapiens sapiens
25000 15000 Art, early cities
10000 5000 Agriculture
5000 2490 Writing, wheel
2510 1960 City States
550 325 Printing, experimental method
225 95 Industrial Revolution
130 65 Telephone, electricity, radio
65 38 Computer
27 14 Personal Computer
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<link href='http://fonts.googleapis.com/css?family=Codystar:300,400|Ubuntu:300,400,500,700|Tulpen+One|Expletus+Sans:400,600,500,700|Roboto:500,900,100,300,700,400|Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://intentive.info/styles/components.css">
<style>
body {
font: 11px sans-serif;
}
.viz{
width:90%;
margin:0 auto;
}
.axis path,
.axis line {
fill: none;
stroke: #B5B5B5;
shape-rendering: crispEdges;
}
.axis text {
font: 13px "Ubuntu";
}
.dot {
stroke: #000;
}
.tooltip {
position: absolute;
pointer-events: none;
background: white;
z-index: 99;
font-size: small;
border-left: 1px solid #D30000;
padding: 1em;
border-radius: 20px;
}
.ui {
float: left;
}
.title {
float: left;
margin-left: 108px;
}
.ui #selector {
height: 3em;
width: 120px;
margin: 1.5em;
}
h2.sub.small {
clear: both;
margin: 0;
padding: 0;
margin-left: 110px;
}
span.numberLabel {
width: 70px;
overflow: inherit;
display: block;
margin-top:-5px;
}
.tooltip div {
float: left;
position: relative;
margin-right:1.5em;
}
.tooltip h5.large.oswald {
margin-top: 15px;
padding-top: 0;
padding-bottom: 0.75em;
line-height: 0px;
}
</style>
<body><script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.1.9.2.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>
<div class="viz">
<span class="title huge oswald">Countdown to the Singularity</span>
<div class="ui">
<select id="selector" class="form-control">
<option value="Log">Logarithmic</option>
<option value="Linear">Linear</option>
</select>
</div>
<h2 class="sub small">
Chart Countdown to Singularity, Events expressed as Time before Present (Years) on the X axis and Time to Next Event (Years) on the Y axis.
</h2>
</div>
<div class="small ref">
<ul>
<li>
M.T. Rosing, "13C-Depleted carbon microparticles in >3700-Ma sea-floor sedimentary rocks from west greenland," Science 283.5402 (January 29, 1999): 674-6, See also H. Furnes et al., "Early life recorded in archean pillow lavas," Science 304.5670 (April 23, 2004):578-81;
</li>
<li>
M.T. Rosing, "Early Archaean oxygenic photosynthesis - The observational approach," Geophysical Research Abstracts 7.11202 (2005);
</li>
<li>
W. Altermann and J. Kazmierczak, "Archean microfossils: a reappraisal of early life on Earth," Research in Microbiology 154.9 (November 2003): 611-617; and Technical Comments, "Origin and Significance of Archean Quartzose Rocks at Akilia, Greenland," Science 298.5595 (November 1, 2002): 917, http://sciencemag.org/cgi/content/full/298/5595/917a.
</li>
<li>
S.B. Hedges et al., "A molecular timescale of eukaryote evolution and the rise of complex multicellular life," BMC Evolutionary Biology 4:2 (2004), http://www.pubmedcentral.gov/articlerender.fcgi?pubmedid=15005799.
</li>
<li>
J. W. Valentine, D. Jablonski and D. H. Erwin, "Fossils, molecules and embryos: new perspectives on the Cambrian explosion," Development 126.5 (1999): 851-859, http://dev.biologists.org/cgi/reprint/126/5/851.pdf.
</li>
<li>
R. L. Paton, T. R. Smithson and J. A. Clack, "An amniote-like skeleton from the Early Carboniferous of Scotland," Nature 398 (08 April 8, 1999): 508 - 513.
</li>
<li>
Z.X. Luo, A.W. Crompton and A.L. Sun, "A new mammaliaform from the early Jurassic and evolution of mammalian characteristics," Science 292.5521 (May 25, 2001):1535-40.
</li>
<li>
S. Tavare et al., "Using the fossil record to estimate the age of the last common ancestor of extant primates," Nature 416.6882 (April 18, 2002):726-9.
</li>
<li>
C.B. Stewart and T.R. Disotell, "Primate evolution—in and out of Africa," Current Biology 8 (1998):R582–R588.
</li>
<li>
C.J. Cela-Conde and F.J. Ayala, "Genera of the human lineage," PNAS [Proceedings of the National Academy of Sciences of the United States] 100.13(June 24, 2003): 7684-7689, published online June 6, 2003, http://www.pnas.org/cgi/content/full/100/13/7684.
</li>
<li>
M.G. Leakey et al., "New four-million-year-old hominid species from Kanapoi and Allia Bay, Kenya," Nature 376.6541 (August 17, 1995):565-71.
</li>
<li>
B. Wood and M. Collard, "The human genus," Science 284.5411 (April 2, 1999):65-71. See also Human Evolution at the Smithsonian Institution, http://www.mnh.si.edu/anthro/humanorigins/ha/a_tree.html.
</li>
<li>
Y Kimura, "Examining time trends in the Oldowan technology at Beds I and II, Olduvai Gorge," Journal of Human Evolution 43.3 (September 2002):291-321.
</li>
<li>
A.M. MacLarnon and G.P Hewitt, "The evolution of human speech: The role of enhanced breathing control," American Journal of Physical Anthropology 109.3:341-63.
</li>
<li>
Dennis O'Neil, " Evolution of Modern Humans: Early Archaic Homo sapiens," http://anthro.palomar.edu/homo2/mod_homo_1.htm.
</li>
<li>
T.D. White et al., "Pleistocene Homo sapiens from Middle Awash, Ethiopia," Nature 423 (12 June 2003): 742-747. See also The Middle Awash Research Group, "Immediate predecessor of modern humans found in Africa; 160,000 year old Ethiopian fossils are first homo sapiens," June 2003, http://www.berkeley.edu/news/media/releases/2003/06/11_bones-background.shtml.
</li>
<li>
D. Nadel et al., "Stone Age hut in Israel yields world's oldest evidence of bedding," PNAS [Proceedings of the National Academy of Sciences of the United States] 101.17 (April 27, 2004): 6821-6826, published online April 16, 2004, http://intl.pnas.org/cgi/content/full/101/17/6821.
</li>
<li>
O. Soffer, J. N. Adovasio, and D. C. Hyland, "The 'Venus' Figurines: Textiles, Basketry, Gender and Status in the Upper Paleolithic," Current Anthropology 41 (August/October 2000).
</li>
<li>
Dennis O'Neil, " Evolution of Modern Humans: Early Modern Human Culture," http://anthro.palomar.edu/homo2/mod_homo_5.htm.
</li>
<li>
Bar-Yosef, O. 2002, "The Upper Paleolithic revolution," Annual Review of Anthropology 31: 363-393.
</li>
<li>
H. Pringle, "Neolithic Agriculture: The Slow Birth of Agriculture," Science Vol. 282. no. 5393 (November 18, 1998):1446.
</li>
<li>
Cuneiform Digital Library Initiative http://early-cuneiform.humnet.ucla.edu.
</li>
<li>
E. Tunis, Wheels: A Pictorial History (Baltimore, MD: Johns Hopkins University Press, 2002).
</li>
<li>
McGraw-Hill Encyclopedia of Science & Technology, 9th Edition (New York: McGraw-Hill Professional, 2002).
</li>
<li>
Computer History Museum, Timeline, http://www.computerhistory.org/timeline/timeline.php.
</li>
</ul>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 110},
width = window.innerWidth*0.7 - margin.left - margin.right,
height = window.innerHeight*0.7 - margin.top - margin.bottom;
var superscript = "⁰¹²³⁴⁵⁶⁷⁸⁹",
formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join(""); };
/*
* value accessor - returns the value to encode for a given data object.
* scale - maps value to a visual display encoding, such as a pixel position.
* map function - maps from data value to display value
* axis - sets up axis
Time before Present,Time to Next Event,Event,
*/
// setup x
var xValue = function(d) { return d["Time before Present"];}, // data -> value
xScale = d3.scale.log().range([width,0]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10,function(d){ return 10 + formatPower(Math.round(Math.log(d)/Math.LN10)); });
// setup y
var yValue = function(d) { return d["Time to Next Event"];}, // data -> value
yScale = d3.scale.log().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(10,function(d){ return 10 + formatPower(Math.round(Math.log(d)/Math.LN10)); });
// setup fill color
var cValue = function(d) { return "ONE";},
color = d3.scale.category10();
// add the graph canvas to the body of the webpage
var svg = d3.select(".viz").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// load data
d3.csv("data.csv", function(error, data) {
// change string (from CSV) into number format
data.forEach(function(d) {
d["Event"] = d["Event"];
d["Time before Present"] = +d["Time before Present"];
d["Time to Next Event"] = +d["Time to Next Event"];
// console.log(d);
});
var index = "";
d3.select("#selector").property("selectedIndex", index)
.on("change", function(d) {
index = this.value
update();
})
// don't want dots overlapping axis, so add in buffer to data domain
xScale.domain([d3.min(data, xValue)-5, d3.max(data, xValue)+5]);
yScale.domain([d3.min(data, yValue)-5, d3.max(data, yValue)+5]);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label ubuntu")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Time before Present");
// y-axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label ubuntu")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Time to Next Event");
// draw dots
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("stroke-width",0)
// .style("fill", function(d) { return color(cValue(d));})
.style("fill", function(d) { return "#D30000";})
.on("mouseover", function(d) {
var target = d3.select(this);
target.transition()
.duration(750)
.attr("r", function(){ return 10; });
tooltip.transition().delay(500)
.duration(200)
.style("opacity", .9);
tooltip.html("<h5 class='large oswald'>"+d["Event"]+"</h5>" + "<div><span class='huge tulpen'>" + commaSeparateNumber(yValue(d))
+ "</span><span class='numberLabel ubuntu'>Years until next event</span></div><div> <span class='huge tulpen'>" + commaSeparateNumber(xValue(d)) + "</span><span class='numberLabel ubuntu'>Years ago</span></div>")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 40) + "px");
})
.on("mouseout", function(d) {
var target = d3.select(this);
target.transition()
.duration(750)
.attr("r", function(){ return 5; });
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
function update(){
switch(index){
case "Linear":
xScale = d3.scale.linear().range([width,0]); // value -> display
yScale = d3.scale.linear().range([height, 0]); // value -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
yAxis = d3.svg.axis().scale(yScale).orient("left");
break;
case "Log":
xScale = d3.scale.log().range([width,0]); // value -> display
yScale = d3.scale.log().range([height, 0]); // value -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10,function(d){ return 10 + formatPower(Math.round(Math.log(d)/Math.LN10)); });
yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(10,function(d){ return 10 + formatPower(Math.round(Math.log(d)/Math.LN10)); });
break;
default:
xScale = d3.scale.linear().range([width,0]); // value -> display
yScale = d3.scale.linear().range([height, 0]); // value -> display
break;
}
;
var dots = svg.selectAll(".dot");
// dots.exit().remove();
// draw dots
// update the scales
xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
d3.selectAll(".x.axis")
.transition().delay(40).ease('quad').duration(500)
.call(xAxis);
/*
xAx.selectAll(".tick text")
.text(null)
.filter(powerOfTen)
.text(10);
xAx.selectAll(".tick text")
.append("tspan")
.attr("dy", "-.7em")
.text(function(d) { return Math.round(Math.log(d) / Math.LN10); });
.append("tspan")
.attr("dy", "-.7em")
.text(function(d) { return Math.round(Math.log(d) / Math.LN10); });
*/
d3.selectAll(".y.axis")
.transition().delay(40).ease('cubic').duration(500)
.call(yAxis);
dots.transition()
.delay(function (d,i){ return 500 + (i * 30);}).ease('quad').duration(500)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return "#D30000" /*color(cValue(d))*/;})
.style("opacity", 0.7)
.attr("stroke-width", 0)
}
});
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}
function powerOfTen(d) {
return d / Math.pow(10, Math.ceil(Math.log(d) / Math.LN10 - 1e-12)) === 1;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment