Last active
August 31, 2015 19:01
-
-
Save inspired12/75f3116f2f0253668159 to your computer and use it in GitHub Desktop.
Countdown to Singularity (Log and Linear)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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