All examples By author By category About

JulesBlm

Full window Github gist

Geological Timescale Vertical

A modular D3.js-based geologic time scale that utilizes data from the Paleobiology Database.

To use, simply include timescale.js and timescale.css in your HTML document, and initialize into the div of your choice with timescale.init("id-of-div").

Still needs some minor tweaking.

Adapted from John J Czaplewski’s /jczaplew/7546689. Updated to d3.js v4 and made vertical by me.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.timescale {
  font-family: Helvetica, sans-serif;
  font-weight: 100;
  font-size: 0.8em;
  color:#333;
  cursor: pointer;
}
rect {
  stroke: #fff;
  stroke-width:1px;
}
.abbr {
  display:none;
}
#l0 {
  color:#fff;
}
line {
  stroke:#777;
}
.level1 {
  font-size: 1em;
}
.level2 {
  font-size: 0.9em;
}
.level3 {
  font-size: 0.75em;
}
.level4 {
  font-size: 0.65em;
}
.level5 {
  font-size: 0.6em;
}
</style>
<body>
<div id="geoTime"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">

/* Todo
-Now tick
-Drag
-Tweens?
-end margin click to next
-text resize
-Second tick bar to the right
*/

// Via https://stackoverflow.com/questions/14167863/how-can-i-bring-a-circle-to-the-front-with-d3
// Necessary for highlighting time intervals properly
d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

// Via https://stackoverflow.com/questions/38224875/replacing-d3-transform-in-d3-v4
function getTranslation(transform) {
  // Create a dummy g for calculation purposes only. This will never
  // be appended to the DOM and will be discarded once this function 
  // returns.
  var g = document.createElementNS("https://www.w3.org/2000/svg", "g");
  
  // Set the transform attribute to the provided string value.
  g.setAttributeNS(null, "transform", transform);
  
  // consolidate the SVGTransformList containing all transformations
  // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get
  // its SVGMatrix. 
  var matrix = g.transform.baseVal.consolidate().matrix;
  
  // As per definition values e and f are the ones for the translation.
  return [matrix.e, matrix.f];
}

var timescale = (function() {

var height = 700,
      width = 650
      paddingX = 30
      paddingY = 15;

// Initialize data
  var data = { oid: 0, col: "#000000", nam: "Geologic Time", children: [], x0: 0, x1: height },
      interval_hash = { 0: data },
      currentInterval,
      dragStart, transformStart;

return {

"init": function(div) {

var newY = 0.01;

var drag = d3.drag()
        .subject(function() { 
          var t = d3.select(".timescale g");
          return {x: 0, y: newY};
        })
        .on("start", function() {
          dragStart = event.pageY;
          transformStart = getTranslation(d3.select(".timescale").select("g").attr("transform"));

d3.event.sourceEvent.stopPropagation();
        })
        .on("drag", function() {
          console.log("dragStart", dragStart);
          console.log("transformStart", transformStart);

currentDrag = event.pageY;

newY = (-dragStart + currentDrag);

d3.select(".timescale").select("g")
            .attr("transform", function() {
              return "translate(" + [0, parseInt(transformStart[1] + newY) ] + ")scale(" + parseInt(d3.select(".timescale").style("height"))/(height + 1) + ")";
            });        
        });
              
      // Add class timescale to whatever div was supplied
      d3.select("#" + div).attr("class", "timescale");

// Create the SVG for the chart
      var time = d3.select("#" + div).append("svg")
          .attr("width", width + paddingX * 2)
          .attr("height", height + paddingY)
          .append("g");

var scale = time.append("g")
        .attr("id", "tickBar")
          .attr("transform", "translate(0," + paddingY + ")");

// Create a new d3 partition layout
      var partition = d3.partition()
        .size([height - paddingY, width])
        .padding(0);

// Load the time scale data 
      d3.json("intervals.json", function(error, result) {

for(var i=0; i < result.records.length; i++) {

var r = result.records[i];
          r.children = [];
          r.pid = r.pid || 0;
          r.abr = r.abr || r.nam.charAt(0);
          r.mid = parseInt((r.eag + r.lag) / 2),
          r.total = r.eag - r.lag;
          interval_hash[r.oid] = r;
          interval_hash[r.pid].children.push(r);
        }

var root = d3.hierarchy(data)
          .sum(function(d) { 
            return (d.children.length == 0) ? d.total : 0; 
          });

partition(root);

var rectGroup = time.append("g")
          .attr("id", "rectGroup")
          .attr("transform", "translate(" + paddingX + "," + paddingY + ")");

// Create the rectangles
        rectGroup.selectAll("rect")
            .data( root.descendants() )
          .enter().append("rect")
            .attr("x", function(d) { return d.y0; })
            .attr("y", function(d) { return d.x0; })
            .attr("width", function(d) { return d.y1 - d.y0; })
            .attr("height", function(d) { return d.x1 - d.x0; })
            .attr("fill", function(d) { return d.data.col || "#000"; })
            .attr("id", function(d) { return "t" + d.data.oid; })
            .attr("name", function(d) { return d.data.nam; })
            .style("opacity", 0.83)
            .call(drag)
            .on("click", function(d) { timescale.goTo(d); });

// Scale bar for the bottom of the graph
        var scaleBar = scale.selectAll("rect")
            .data(root.descendants());

var hash = scaleBar.enter().append("g")
          .attr("class", function(d) { return "tickGroup s" + d.data.lvl})
          .attr("transform", function(d) { return "translate( 0," + d.x1 + ")"});

hash.append("text")
          .attr("y", -4)
          .attr("x", paddingX /2)
          .style("text-anchor", "middle")
          .style("font-size", "0.8em")
          .style("fill", "#777")
          .text(function(d) { return d.data.eag; });

hash.append("line")
          .attr("y1", 0)
          .attr("x1", 0)
          .attr("y2", 0)
          .attr("x2", paddingX - 1)
          .style("stroke-width", "0.05em");

// Create a tick for year 0
        var now = scale.append("g")
          .data([{x0: height, y0: 0}])
          .attr("class", "tickGroup s1 s2 s3 s4 s5")
          .attr("transform","translate(0," + height + ")");

now.append("line")
          .attr("y1", height - 5)
          .attr("x1", 0)
          .attr("y2", height - 5)
          .attr("x2", paddingX - 1)
          .style("stroke-width", "0.05em");

now.append("text")
          .attr("y", height - 2)
          .attr("x", paddingX )
          .attr("id", "now")
          .style("text-anchor", "end")
          .style("font-size", "0.65em")
          .style("fill", "#777")
          .text("0");

var textGroup = time.append("g")
          .attr("id", "textGroup")
          .attr("transform", "translate(" + paddingX + "," + paddingY + ")");

// Add the full labels
        textGroup.selectAll("fullName")
            .data( root.descendants() )
          .enter().append("text")
            .text(function(d) { return d.data.nam; })
            .attr("class", function(d) { return "fullName" }) // level" + d.data.lvl;
            .attr("id", function(d) { return "l" + d.data.oid; })
            .attr("width", function() { return this.getComputedTextLength(); })
            .attr("x", function(d) { return d.y0 + (d.y1 - d.y0)/2; })            
            .attr("y", function(d) { return timescale.labelY(d); })
            .style("text-anchor", "middle")
            .call(drag)
            .on("click", function(d) { timescale.goTo(d); });

// // Position the labels for the first time
        timescale.goTo(root);

// Remove the Geologic time abbreviation
        d3.select(".abbr.levelundefined").remove();

// Open to Phanerozoic 
        // timescale.goTo(interval_hash[750]);

}); // End PaleoDB json callback
      //attach window resize listener to the window
      // d3.select(window).on("resize", timescale.resize);

// // Size time scale to window
      // timescale.resize();

"labelLevels": function(d) {
      // Center whichever interval was clicked
      d3.select("#l" + d.data.oid).attr("y", height/2 );

// Position all the parent labels in the middle of the scale
      if (d.parent !== null) {
        console.log("d.parent is defined", (d.parent))

var depth = d.depth,
            loc = "d.parent";

console.log("depth", depth);

for (var i=0; i<depth;i++) {
          var parent = eval(loc).data.nam;
          d3.selectAll('.fullName').filter(function(d) { return d.data.nam === parent;})
            .attr("y", height/2);
          loc += ".parent";
        }

d3.selectAll('.fullName').filter(function(d) {
          return d.data.nam === parent;
        }).attr("y", height/2);

}
    },

// "labelX": function(d) {
    //   var textWidth = d.data.nam.getComputedTextLength(),
    //       rectWidth = parseFloat(d3.select("#t" + d.data.oid).attr("width"));

//   if (textwidth < 0.7 * rectwidth) {
    //     return rectX + (rectWidth - labelWidth) / 2;
    //   }

//   return rectX + (rectWidth - labelWidth) / 2;
    // },

"labelY": function(d) {

var rectHeight = parseFloat(d3.select("#t" + d.data.oid).attr("height")), 
          rectY = parseFloat(d3.select("#t" + d.data.oid).attr("y")),
          labelHeight = d3.select("#l" + d.data.oid).node().getBBox().height;
      
      d3.select("#l" + d.data.oid).style("fill", "black");
      d3.select("#l0")
        .style("fill", "#fff");

// Hide text if it is too high for rect
      if (labelHeight > rectHeight) {
        d3.select("#l" + d.data.oid).style("fill", "rgba(0,0,0,0)");
      } else {
        d3.select("#a" + d.data.oid).style("fill", "#000000")
      }
      return rectY + (rectHeight / 1.8) + 3;
    },

// Zooms the graph to a given time interval
    // Accepts a data point or a named interval
    "goTo": function(d) {

// Force that motherfucker to white
      d3.select("#l0")
        .style("fill", "#fff");

// Stores the currently focused time interval for state restoration purposes
      timescale.currentInterval = d;

// Adjust the scale
      var depth = (d.depth != 'undefined') ? parseInt(d.depth) + 1 : 1;
      d3.selectAll(".scale").style("display", "none");
      d3.selectAll(".tickGroup").style("display", "none");
      d3.selectAll(".s" + depth).style("display", "block");

//Reset panning  
      d3.select(".timescale g")
        .attr("transform", function() {
          return "scale(" + parseInt(d3.select(".timescale").style("height"))/(height + 1) + ")";
        });

// var n keeps track of the transition
      var n = 0;
      var y = d3.scaleLinear()
        .range([0, height - 2 * paddingY]); //!!!!!!!!!!!!!!!!!!!!!!!!!!
      y.domain([d.x0, d.x1]);

// "Hide" the labels during the transition
      // Cannot calculate the correct position if display:none is used
      d3.selectAll(".fullName")
        .style("fill", "rgba(0,0,0,0)")
        .style("display", "block");

//Transition tick groups
      d3.selectAll(".tickGroup").transition()
        .duration(750)
        .attr("transform", function(d) {
          d3.select(this).selectAll("text").style("text-anchor", "middle");

return "translate(0," + y(d.x0) + ")";
        });

// Transition the rectangles. When complete, calls labelTrans() 
      d3.selectAll("rect").transition()
        .duration(750)
        .on("start", function(){ ++n; })
        .attr("y", function(d) { return y(d.x0); })
        .attr("height", function(d) { return y(d.x1) - y(d.x0); })
        .on("end", function() { if (!--n) { timescale.labelTrans(d); }});
    },

"labelTrans": function(d) {
      // var n keeps track of the transition
      var n = 0,
          x = d3.scaleLinear().range([0, width]),
          y = d3.scaleLinear().range([0, height]);

x.domain([d.y0, d.y1]) //.range([d.depth ? 20 : 0, height]); //20 moet anders
      y.domain([d.x0, d.x1])

//Move the names
      d3.selectAll(".fullName").transition()
        .duration(10)
        .on("start", function(){ ++n; })
        .attr("y", function(d) { return timescale.labelY(d); })
        .attr("height", function(d) { return y(d.x1) - y(d.x0); })
        .on("end", function() { if (!--n) { timescale.labelLevels(d); }});

// timescale.resize();
    },

// Highlight a given time interval
    "highlight": function(d) {

d3.selectAll("rect").style("stroke", "#fff");
      if (d.cxi) {
        var id = d.cxi;
        d3.selectAll("rect#t" + d.cxi).style("stroke", "#000").moveToFront();
        d3.selectAll("#l" + d.cxi).moveToFront();
      } else if (typeof d == "string") {
        var id = d3.selectAll('rect').filter(function(e) {
          return e.nam === d;
        }).attr("id");
        id = id.replace("t", "");
      } else {
        var id = d3.select(d).attr("id");
        id = id.replace("p", "");
      }

d3.selectAll("rect#t" + id).style("stroke", "#000").moveToFront();
      d3.selectAll("#l" + id).moveToFront();
      d3.selectAll(".abbr").moveToFront();
    },

// Unhighlight a time interval by resetting the stroke of all rectangles
    "unhighlight": function() {
      d3.selectAll("rect").style("stroke", "#fff");
    },

// "resize": function() {
    //   d3.select(".timescale g")
    //     .attr("transform", function() {
    //       return "scale(" + parseInt(d3.select(".timescale").style("height"))/(960 + 1) + ")";
    //     });

//   d3.select(".timescale svg")
    //     .style("width", function() { return d3.select(".timescale").style("height") + 20; })
    //     .style("height", function() { return parseInt(d3.select(".timescale").style("height")) + 20 + "px"; }); //* 0.25 +
    // },

/* Interval hash can be exposed publically so that the time scale data can be used 
       for other things, such as maps */
    //"interval_hash": interval_hash,

// Method for getting the currently zoomed-to interval - useful for preserving states
    "currentInterval": currentInterval
  }
})();

timescale.init("geoTime");

</script>

https://d3js.org/d3.v4.min.js