block by inspired12 75f3116f2f0253668159

Countdown to Singularity (Log and Linear)

Full Screen

index.html


<!DOCTYPE html>
<html>
<meta charset="utf-8">

<!-- Example based on //bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from //www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<link href='//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="//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, //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), //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, //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, //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, //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," //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, //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, //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," //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 //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, //www.computerhistory.org/timeline/timeline.php.
</li>
</ul>

</div>

<script src="//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>

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