All examples By author By category About

tomshanley

Full window Github gist

Geological Timescale v4

geo-timescale

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").

Adepted from John J Czaplewski’s /jczaplew/7546689.

So far the width of the first three level times are not correct as their values are multiplied by their level during partitioning for some reason.

forked from JulesBlm's block: Geological Timescale v4

<!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">

// 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);
//   });
// };

var timescale = (function() {

var width = 960,
      height = 130;

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

return {

"init": function(div) {
      var x = d3.scaleLinear().range([0, width - 5]),
          y = d3.scaleLinear().range([0, height]),
          newX = 0.01;

/*var drag = d3.drag()
        .subject(function() { 
          var t = d3.select(".timescale g");
          return {x: -newX, y: 0};
        })
        .on("start", function() {
          dragStart = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY];

// transformStart = d3.interpolateTransformSvg( d3.select(".timescale").select("g").attr("transform") ); //.translate

d3.event.sourceEvent.stopPropagation();
        })
        .on("drag", function() {
          var currentDrag = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY];
          newX = (dragStart[0] - currentDrag[0]);*/

/*d3.select(".timescale").select("g")
            .attr("transform", function() {
              return "translate(" + [ parseInt( 0 + -newX), 0 ] + ")scale(" + parseInt(d3.select(".timescale").style("width"))/961 + ")";
            });
        });*/

// 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:svg")
          .attr("width", width)
          .attr("height", height)
          .append("g");

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

// Create a new d3 partition layout
      var partition = d3.partition()
        .size([width, height])
        .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");

// Create the rectangles
        rectGroup.selectAll("rect")
            .data( root.descendants() )
          .enter()
          .append("svg:rect")
            .attr("x", function(d) { 
          		return d.x0; })
            .attr("y", function(d) { return d.y0; })
            .attr("width", function(d) { return d.x1 - d.x0; })
            .attr("height", function(d) { return d.y1 - d.y0; })
            .attr("fill", function(d) { return d.data.col || "#000"; })
            .attr("id", function(d) { return "t" + d.data.oid; })
            .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(" + d.x0 + ", 0)"});

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

hash.append("text")
          .attr("x", 0)
          .attr("y", 20)
          .style("text-anchor", function(d) { return (d.data.eag == 0.0117) ? "end" : "middle"; })
          .style("font-size", "0.65em")
          .style("fill", "#777")
          .text(function(d) {return d.data.eag});

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

now.append("line")
          .attr("x1", 0)
          .attr("y1", 7.5)
          .attr("x2", 0)
          .attr("y2", 12)
          .style("stroke-width", "0.05em");

now.append("text")
          .attr("x", 0)
          .attr("y", 20)
          .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");

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

// Add the abbreviations
        textGroup.selectAll("abbrevs")
            .data( root.descendants() )
          .enter().append("svg:text")
            .attr("x", 1)
            .attr("y", function(d) { return d.y0 + 15; })
            .attr("width", 30)
            .attr("height", function(d) { return d.y1 - d.y0; })
            .text(function(d) { return d.data.abr || d.data.nam; }) //charAt(0)
            .attr("class", function(d) { return "abbr level" + d.data.lvl; })
            .attr("id", function(d) { return "a" + d.data.oid; })
            .attr("x", function(d) { return timescale.labelAbbrX(d); })
            .on("click", function(d) {
              timescale.goTo(d);
            });

// Position the labels for the first time
        timescale.goTo(interval_hash[0]);

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

// console.log("Phanerozoic", interval_hash[751]);
        // Open to Phanerozoic 
        // timescale.goTo(interval_hash[751]);

}); // 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.oid).attr("x", 430);

// Position all the parent labels in the middle of the scale
      if (typeof d.parent !== 'undefined') {
        var depth = d.depth,
            loc = "d.parent";
        for (var i=0; i<depth;i++) {
          var parent = eval(loc).nam;
          d3.selectAll('.abbr').filter(function(d) {
            return d.data.nam === parent;
          }).attr("x", 430);
          d3.selectAll('.fullName').filter(function(d) {
            return d.data.nam === parent;
          }).attr("x", 430);
          loc += ".parent";
        }
        d3.selectAll('.abbr').filter(function(d) {
          return d.data.nam === parent;
        }).attr("x", 430);
        d3.selectAll('.fullName').filter(function(d) {
          return d.data.nam === parent;
        }).attr("x", 430);
      }
    },

"labelAbbrX": function(d) {
      var rectWidth = parseFloat(d3.select("#t" + d.data.oid).attr("width")),
          rectX = parseFloat(d3.select("#t" + d.data.oid).attr("x"));

var labelWidth;
      // Doesn't work in every browser. Try to get the text length, if it fails use a default value
      try {
        labelWidth = d3.select("#a" + d.data.oid).node().getComputedTextLength();
      } catch(err) {
        labelWidth = 11;
      }

if (rectWidth - 8 < labelWidth) {
         d3.select("#a" + d.data.oid).style("display", "none");
      }
      return rectX + (rectWidth - labelWidth) / 2;
    },

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

var labelWidth;
      try {
        labelWidth = d3.select("#l" + d.data.oid).node().getComputedTextLength();
      } catch(err) {
        labelWidth = 25;
      }

if (rectWidth - 8 < labelWidth) {
         d3.select("#l" + d.data.oid).style("display", "none");
      } else {
        d3.select("#a" + d.data.oid).style("display", "none");
      }

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,
          scale = parseInt(d3.select(".timescale").style("width"))/961;

return (rectY * 0.8) + ((rectHeight - labelHeight) / 2) + 8;
    },

"labelAbbrY": 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,
          scale = parseInt(d3.select(".timescale").style("width"))/961;

return (rectY * 0.8) + (rectHeight - labelHeight) / 2;
    },

// Zooms the graph to a given time interval
    // Accepts a data point or a named interval
    "goTo": function(d) {
      if (typeof d == "string") {
        var d = d3.selectAll('rect').filter(function(e) {
          return e.nam === d;
        });
        d = d[0][0].__data__;
      } else if (d.children) {
          if (d.children.length < 1) {
            var d = d.data.parent;
        }
      } else {
        var d = d;
      }

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

// Adjust the bottom 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("width"))/961 + ")";
        });

// var n keeps track of the transition
      var n = 0;
      var x = d3.scaleLinear()
        .range([5, width - 5]);

x.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");

d3.selectAll(".abbr")
        .style("fill", "rgba(0,0,0,0)")
        .style("display", "block");

d3.selectAll(".tickGroup").transition()
        .duration(750)
        .attr("transform", function(d) {

d3.select(this).selectAll("text").style("text-anchor", "middle");

if (d.x == 0 || d.x0 == 0) {
            d3.select(this).select("text")
              .style("text-anchor", "start");

return

} else if (d.x == 1 || d.x0 == 0) {
            d3.select(this).select("text")
              .style("text-anchor", "end");

return

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

// Transition the rectangles. When complete, calls labelTrans() 
      d3.selectAll("rect").transition()
        .duration(750)
        .on("start", function(){ ++n; })
        .attr("x", function(d) {
          return x(d.x0) ;
        })
        .attr("width", function(d) {
          return x(d.x1) - x(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 - 5]),
          y = d3.scaleLinear().range([0, height - 10]);

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

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

// Move the abbreviations
      d3.selectAll(".abbr").transition()
        .duration(300)
        .on("start", function(){ ++n; })
        .attr("x", function(d) { return timescale.labelAbbrX(d); })
        .attr("height", function(d) { return y(d.y1) - y(d.y0); })
        .on("end", function() { 
          if (!--n) {
            timescale.labelLevels(d);
            d3.select("#l0").style("fill", "#fff");
          } else {
            d3.selectAll(".fullName").style("fill", "#333");
            d3.selectAll(".abbr").style("fill", "#333");
          }
        });
      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("width"))/961 + ")";
        });

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

/* 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