tomshanley/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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 http://bl.ocks.org/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

  
## index.html
<!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 http://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>

## intervals.json
{
"records": [
{"oid":753,"typ":"int","nam":"Archean","lvl":1,"pid":0,"col":"#F0047F","lag":2500,"eag":4000,"rid":[15443]},
{"oid":752,"typ":"int","nam":"Proterozoic","lvl":1,"pid":0,"col":"#F73563","lag":541,"eag":2500,"rid":[47900]},
{"oid":751,"typ":"int","nam":"Phanerozoic","lvl":1,"pid":0,"col":"#9AD9DD","lag":0,"eag":541,"rid":[47900]},
{"oid":760,"typ":"int","nam":"Eoarchean","lvl":2,"pid":753,"col":"#DA037F","lag":3600,"eag":4000,"rid":[15443]},
{"oid":759,"typ":"int","nam":"Paleoarchean","lvl":2,"pid":753,"col":"#F444A9","lag":3200,"eag":3600,"rid":[15443]},
{"oid":758,"typ":"int","nam":"Mesoarchean","lvl":2,"pid":753,"col":"#F768A9","lag":2800,"eag":3200,"rid":[15443]},
{"oid":757,"typ":"int","nam":"Neoarchean","lvl":2,"pid":753,"col":"#F99BC1","lag":2500,"eag":2800,"rid":[15443]},
{"oid":756,"typ":"int","nam":"Paleoproterozoic","lvl":2,"pid":752,"col":"#F74370","lag":1600,"eag":2500,"rid":[47900]},
{"oid":755,"typ":"int","nam":"Mesoproterozoic","lvl":2,"pid":752,"col":"#FDB462","lag":1000,"eag":1600,"rid":[47900]},
{"oid":754,"typ":"int","nam":"Neoproterozoic","lvl":2,"pid":752,"col":"#FEB342","lag":541,"eag":1000,"rid":[47900]},
{"oid":3,"typ":"int","nam":"Paleozoic","abr":"Pz","lvl":2,"pid":751,"col":"#99C08D","lag":252.2,"eag":541,"rid":[47900]},
{"oid":2,"typ":"int","nam":"Mesozoic","abr":"Mz","lvl":2,"pid":751,"col":"#67C5CA","lag":66,"eag":252.2,"rid":[47900]},
{"oid":1,"typ":"int","nam":"Cenozoic","abr":"Cz","lvl":2,"pid":751,"col":"#F2F91D","lag":0,"eag":66,"rid":[47900]},
{"oid":770,"typ":"int","nam":"Siderian","lvl":3,"pid":756,"col":"#F74F7C","lag":2300,"eag":2500,"rid":[47900]},
{"oid":769,"typ":"int","nam":"Rhyacian","lvl":3,"pid":756,"col":"#F75B89","lag":2050,"eag":2300,"rid":[47900]},
{"oid":768,"typ":"int","nam":"Orosirian","lvl":3,"pid":756,"col":"#F76898","lag":1800,"eag":2050,"rid":[47900]},
{"oid":767,"typ":"int","nam":"Statherian","lvl":3,"pid":756,"col":"#F875A7","lag":1600,"eag":1800,"rid":[47900]},
{"oid":766,"typ":"int","nam":"Calymmian","lvl":3,"pid":755,"col":"#FDC07A","lag":1400,"eag":1600,"rid":[47900]},
{"oid":765,"typ":"int","nam":"Ectasian","lvl":3,"pid":755,"col":"#F3CC8A","lag":1200,"eag":1400,"rid":[47900]},
{"oid":764,"typ":"int","nam":"Stenian","lvl":3,"pid":755,"col":"#FED99A","lag":1000,"eag":1200,"rid":[47900]},
{"oid":763,"typ":"int","nam":"Tonian","lvl":3,"pid":754,"col":"#FEBF4E","lag":850,"eag":1000,"rid":[47900]},
{"oid":762,"typ":"int","nam":"Cryogenian","lvl":3,"pid":754,"col":"#FECC5C","lag":635,"eag":850,"rid":[47900]},
{"oid":761,"typ":"int","nam":"Ediacaran","lvl":3,"pid":754,"col":"#FED96A","lag":541,"eag":635,"rid":[47900]},
{"oid":22,"typ":"int","nam":"Cambrian","abr":"Cm","lvl":3,"pid":3,"col":"#7FA056","lag":485.4,"eag":541,"rid":[47900]},
{"oid":21,"typ":"int","nam":"Ordovician","abr":"O","lvl":3,"pid":3,"col":"#009270","lag":443.4,"eag":485.4,"rid":[47900]},
{"oid":20,"typ":"int","nam":"Silurian","abr":"S","lvl":3,"pid":3,"col":"#B3E1B6","lag":419.2,"eag":443.4,"rid":[47900]},
{"oid":19,"typ":"int","nam":"Devonian","abr":"D","lvl":3,"pid":3,"col":"#CB8C37","lag":358.9,"eag":419.2,"rid":[47900]},
{"oid":18,"typ":"int","nam":"Carboniferous","abr":"C","lvl":3,"pid":3,"col":"#67A599","lag":298.9,"eag":358.9,"rid":[47900]},
{"oid":17,"typ":"int","nam":"Permian","abr":"P","lvl":3,"pid":3,"col":"#F04028","lag":252.2,"eag":298.9,"rid":[47900]},
{"oid":16,"typ":"int","nam":"Triassic","abr":"Tr","lvl":3,"pid":2,"col":"#812B92","lag":201.3,"eag":252.2,"rid":[47900]},
{"oid":15,"typ":"int","nam":"Jurassic","abr":"J","lvl":3,"pid":2,"col":"#34B2C9","lag":145,"eag":201.3,"rid":[47900]},
{"oid":14,"typ":"int","nam":"Cretaceous","abr":"K","lvl":3,"pid":2,"col":"#7FC64E","lag":66,"eag":145,"rid":[47900]},
{"oid":26,"typ":"int","nam":"Paleogene","abr":"Pg","lvl":3,"pid":1,"col":"#FD9A52","lag":23.03,"eag":66,"rid":[47900]},
{"oid":25,"typ":"int","nam":"Neogene","abr":"Ng","lvl":3,"pid":1,"col":"#FFE619","lag":2.588,"eag":23.03,"rid":[47900]},
{"oid":12,"typ":"int","nam":"Quaternary","lvl":3,"pid":1,"col":"#F9F97F","lag":0,"eag":2.588,"rid":[47900]},
{"oid":1111,"typ":"int","nam":"Terreneuvian","lvl":4,"pid":22,"col":"#8CB06C","lag":521,"eag":541,"rid":[47900]},
{"oid":1110,"typ":"int","nam":"Series 2","lvl":4,"pid":22,"col":"#99C078","lag":509,"eag":521,"rid":[47900]},
{"oid":1109,"typ":"int","nam":"Series 3","lvl":4,"pid":22,"col":"#A6CF86","lag":497,"eag":509,"rid":[47900]},
{"oid":780,"typ":"int","nam":"Furongian","lvl":4,"pid":22,"col":"#B3E095","lag":485.4,"eag":497,"rid":[47900]},
{"oid":31,"typ":"int","nam":"Early Ordovician","lvl":4,"pid":21,"col":"#1A9D6F","lag":470,"eag":485.4,"rid":[47900]},
{"oid":30,"typ":"int","nam":"Middle Ordovician","lvl":4,"pid":21,"col":"#4DB47E","lag":458.4,"eag":470,"rid":[47900]},
{"oid":29,"typ":"int","nam":"Late Ordovician","lvl":4,"pid":21,"col":"#7FCA93","lag":443.4,"eag":458.4,"rid":[47900]},
{"oid":62,"typ":"int","nam":"Llandovery","lvl":4,"pid":20,"col":"#99D7B3","lag":433.4,"eag":443.4,"rid":[47900]},
{"oid":61,"typ":"int","nam":"Wenlock","lvl":4,"pid":20,"col":"#B3E1C2","lag":427.4,"eag":433.4,"rid":[47900]},
{"oid":60,"typ":"int","nam":"Ludlow","lvl":4,"pid":20,"col":"#BFE6CF","lag":423,"eag":427.4,"rid":[47900]},
{"oid":59,"typ":"int","nam":"Pridoli","lvl":4,"pid":20,"col":"#E6F5E1","lag":419.2,"eag":423,"rid":[47900]},
{"oid":58,"typ":"int","nam":"Early Devonian","lvl":4,"pid":19,"col":"#E5AC4D","lag":393.3,"eag":419.2,"rid":[47900]},
{"oid":57,"typ":"int","nam":"Middle Devonian","lvl":4,"pid":19,"col":"#F1C868","lag":382.7,"eag":393.3,"rid":[47900]},
{"oid":56,"typ":"int","nam":"Late Devonian","lvl":4,"pid":19,"col":"#F1E19D","lag":358.9,"eag":382.7,"rid":[47900]},
{"oid":28,"typ":"int","nam":"Mississippian","lvl":4,"pid":18,"col":"#678F66","lag":323.2,"eag":358.9,"rid":[47900]},
{"oid":27,"typ":"int","nam":"Pennsylvanian","lvl":4,"pid":18,"col":"#99C2B5","lag":298.9,"eag":323.2,"rid":[47900]},
{"oid":773,"typ":"int","nam":"Cisuralian","lvl":4,"pid":17,"col":"#EF5845","lag":272.3,"eag":298.9,"rid":[47900]},
{"oid":772,"typ":"int","nam":"Guadalupian","lvl":4,"pid":17,"col":"#FB745C","lag":259.9,"eag":272.3,"rid":[47900]},
{"oid":771,"typ":"int","nam":"Lopingian","lvl":4,"pid":17,"col":"#FBA794","lag":252.2,"eag":259.9,"rid":[47900]},
{"oid":46,"typ":"int","nam":"Early Triassic","lvl":4,"pid":16,"col":"#983999","lag":247.2,"eag":252.2,"rid":[47900]},
{"oid":45,"typ":"int","nam":"Middle Triassic","lvl":4,"pid":16,"col":"#B168B1","lag":237,"eag":247.2,"rid":[47900]},
{"oid":44,"typ":"int","nam":"Late Triassic","lvl":4,"pid":16,"col":"#BD8CC3","lag":201.3,"eag":237,"rid":[47900]},
{"oid":43,"typ":"int","nam":"Early Jurassic","lvl":4,"pid":15,"col":"#42AED0","lag":174.1,"eag":201.3,"rid":[47900]},
{"oid":42,"typ":"int","nam":"Middle Jurassic","lvl":4,"pid":15,"col":"#80CFD8","lag":163.5,"eag":174.1,"rid":[47900]},
{"oid":41,"typ":"int","nam":"Late Jurassic","lvl":4,"pid":15,"col":"#B3E3EE","lag":145,"eag":163.5,"rid":[47900]},
{"oid":40,"typ":"int","nam":"Early Cretaceous","lvl":4,"pid":14,"col":"#8CCD57","lag":100.5,"eag":145,"rid":[47900]},
{"oid":39,"typ":"int","nam":"Late Cretaceous","lvl":4,"pid":14,"col":"#A6D84A","lag":66,"eag":100.5,"rid":[47900]},
{"oid":38,"typ":"int","nam":"Paleocene","lvl":4,"pid":26,"col":"#FDA75F","lag":56,"eag":66,"rid":[47900]},
{"oid":37,"typ":"int","nam":"Eocene","lvl":4,"pid":26,"col":"#FDB46C","lag":33.9,"eag":56,"rid":[47900]},
{"oid":36,"typ":"int","nam":"Oligocene","lvl":4,"pid":26,"col":"#FDC07A","lag":23.03,"eag":33.9,"rid":[47900]},
{"oid":35,"typ":"int","nam":"Miocene","lvl":4,"pid":25,"col":"#FFFF00","lag":5.333,"eag":23.03,"rid":[47900]},
{"oid":34,"typ":"int","nam":"Pliocene","lvl":4,"pid":25,"col":"#FFFF99","lag":2.588,"eag":5.333,"rid":[47900]},
{"oid":33,"typ":"int","nam":"Pleistocene","lvl":4,"pid":12,"col":"#FFF2AE","lag":0.0117,"eag":2.588,"rid":[47900]},
{"oid":32,"typ":"int","nam":"Holocene","lvl":4,"pid":12,"col":"#FEF2E0","lag":0,"eag":0.0117,"rid":[47900]},
{"oid":1121,"typ":"int","nam":"Fortunian","lvl":5,"pid":1111,"col":"#99B575","lag":529,"eag":541,"rid":[47900]},
{"oid":1120,"typ":"int","nam":"Stage 2","lvl":5,"pid":1111,"col":"#A6BA80","lag":521,"eag":529,"rid":[47900]},
{"oid":1119,"typ":"int","nam":"Stage 3","lvl":5,"pid":1110,"col":"#A6C583","lag":514,"eag":521,"rid":[47900]},
{"oid":1118,"typ":"int","nam":"Stage 4","lvl":5,"pid":1110,"col":"#B3CA8E","lag":509,"eag":514,"rid":[47900]},
{"oid":1117,"typ":"int","nam":"Stage 5","lvl":5,"pid":1109,"col":"#B3D492","lag":504.5,"eag":509,"rid":[47900]},
{"oid":1116,"typ":"int","nam":"Drumian","lvl":5,"pid":1109,"col":"#BFD99D","lag":500.5,"eag":504.5,"rid":[47900]},
{"oid":1087,"typ":"int","nam":"Guzhangian","lvl":5,"pid":1109,"col":"#CCDFAA","lag":497,"eag":500.5,"rid":[47900]},
{"oid":1114,"typ":"int","nam":"Paibian","lvl":5,"pid":780,"col":"#CCEBAE","lag":494,"eag":497,"rid":[47900]},
{"oid":1113,"typ":"int","nam":"Jiangshanian","lvl":5,"pid":780,"col":"#D9F0BB","lag":489.5,"eag":494,"rid":[47900]},
{"oid":1112,"typ":"int","nam":"Stage 10","lvl":5,"pid":780,"col":"#E6F5C9","lag":485.4,"eag":489.5,"rid":[47900]},
{"oid":559,"typ":"int","nam":"Tremadocian","lvl":5,"pid":31,"col":"#33A97E","lag":477.7,"eag":485.4,"rid":[47900]},
{"oid":1010,"typ":"int","nam":"Floian","lvl":5,"pid":31,"col":"#41B087","lag":470,"eag":477.7,"rid":[47900]},
{"oid":1079,"typ":"int","nam":"Dapingian","lvl":5,"pid":30,"col":"#66C092","lag":467.3,"eag":470,"rid":[47900]},
{"oid":556,"typ":"int","nam":"Darriwilian","lvl":5,"pid":30,"col":"#74C69C","lag":458.4,"eag":467.3,"rid":[47900]},
{"oid":1009,"typ":"int","nam":"Sandbian","lvl":5,"pid":29,"col":"#8CD094","lag":453,"eag":458.4,"rid":[47900]},
{"oid":1008,"typ":"int","nam":"Katian","lvl":5,"pid":29,"col":"#99D69F","lag":445.2,"eag":453,"rid":[47900]},
{"oid":192,"typ":"int","nam":"Hirnantian","lvl":5,"pid":29,"col":"#A6DBAB","lag":443.4,"eag":445.2,"rid":[47900]},
{"oid":191,"typ":"int","nam":"Rhuddanian","lvl":5,"pid":62,"col":"#A6DCB5","lag":440.8,"eag":443.4,"rid":[47900]},
{"oid":190,"typ":"int","nam":"Aeronian","lvl":5,"pid":62,"col":"#B3E1C2","lag":438.5,"eag":440.8,"rid":[47900]},
{"oid":189,"typ":"int","nam":"Telychian","lvl":5,"pid":62,"col":"#BFE6D1","lag":433.4,"eag":438.5,"rid":[47900]},
{"oid":188,"typ":"int","nam":"Sheinwoodian","lvl":5,"pid":61,"col":"#BFE6C3","lag":430.5,"eag":433.4,"rid":[47900]},
{"oid":785,"typ":"int","nam":"Homerian","lvl":5,"pid":61,"col":"#CCEBD1","lag":427.4,"eag":430.5,"rid":[47900]},
{"oid":185,"typ":"int","nam":"Gorstian","lvl":5,"pid":60,"col":"#CCECDD","lag":425.6,"eag":427.4,"rid":[47900]},
{"oid":184,"typ":"int","nam":"Ludfordian","lvl":5,"pid":60,"col":"#D9F0DF","lag":423,"eag":425.6,"rid":[47900]},
{"oid":3001,"typ":"int","nam":"Pridoli","lvl":5,"pid":59,"col":"#E6F5E1","lag":419.2,"eag":423,"rid":[47900]},
{"oid":183,"typ":"int","nam":"Lochkovian","lvl":5,"pid":58,"col":"#E5B75A","lag":410.8,"eag":419.2,"rid":[47900]},
{"oid":182,"typ":"int","nam":"Pragian","lvl":5,"pid":58,"col":"#E5C468","lag":407.6,"eag":410.8,"rid":[47900]},
{"oid":181,"typ":"int","nam":"Emsian","lvl":5,"pid":58,"col":"#E5D075","lag":393.3,"eag":407.6,"rid":[47900]},
{"oid":180,"typ":"int","nam":"Eifelian","lvl":5,"pid":57,"col":"#F1D576","lag":387.7,"eag":393.3,"rid":[47900]},
{"oid":179,"typ":"int","nam":"Givetian","lvl":5,"pid":57,"col":"#F1E185","lag":382.7,"eag":387.7,"rid":[47900]},
{"oid":178,"typ":"int","nam":"Frasnian","lvl":5,"pid":56,"col":"#F2EDAD","lag":372.2,"eag":382.7,"rid":[47900]},
{"oid":177,"typ":"int","nam":"Famennian","lvl":5,"pid":56,"col":"#F2EDC5","lag":358.9,"eag":372.2,"rid":[47900]},
{"oid":55,"typ":"int","nam":"Tournaisian","lvl":5,"pid":28,"col":"#8CB06C","lag":346.7,"eag":358.9,"rid":[5954]},
{"oid":54,"typ":"int","nam":"Visean","lvl":5,"pid":28,"col":"#A6B96C","lag":330.9,"eag":346.7,"rid":[5954]},
{"oid":53,"typ":"int","nam":"Serpukhovian","lvl":5,"pid":28,"col":"#BFC26B","lag":323.2,"eag":330.9,"rid":[5954]},
{"oid":52,"typ":"int","nam":"Bashkirian","lvl":5,"pid":27,"col":"#99C2B6","lag":315.2,"eag":323.2,"rid":[5954]},
{"oid":51,"typ":"int","nam":"Moscovian","lvl":5,"pid":27,"col":"#B3CBB9","lag":307,"eag":315.2,"rid":[5954]},
{"oid":50,"typ":"int","nam":"Kasimovian","lvl":5,"pid":27,"col":"#BFD0C5","lag":303.7,"eag":307,"rid":[5954]},
{"oid":49,"typ":"int","nam":"Gzhelian","lvl":5,"pid":27,"col":"#CCD4C7","lag":298.9,"eag":303.7,"rid":[5954]},
{"oid":151,"typ":"int","nam":"Asselian","lvl":5,"pid":773,"col":"#E36350","lag":295.5,"eag":298.9,"rid":[5954]},
{"oid":150,"typ":"int","nam":"Sakmarian","lvl":5,"pid":773,"col":"#E36F5C","lag":290.1,"eag":295.5,"rid":[5954]},
{"oid":149,"typ":"int","nam":"Artinskian","lvl":5,"pid":773,"col":"#E37B68","lag":279.3,"eag":290.1,"rid":[5954]},
{"oid":148,"typ":"int","nam":"Kungurian","lvl":5,"pid":773,"col":"#E38776","lag":272.3,"eag":279.3,"rid":[5954]},
{"oid":717,"typ":"int","nam":"Roadian","lvl":5,"pid":772,"col":"#FB8069","lag":268.8,"eag":272.3,"rid":[9184]},
{"oid":146,"typ":"int","nam":"Wordian","lvl":5,"pid":772,"col":"#FB8D76","lag":265.1,"eag":268.8,"rid":[5954]},
{"oid":145,"typ":"int","nam":"Capitanian","lvl":5,"pid":772,"col":"#FB9A85","lag":259.9,"eag":265.1,"rid":[5954]},
{"oid":716,"typ":"int","nam":"Wuchiapingian","lvl":5,"pid":771,"col":"#FCB4A2","lag":254.2,"eag":259.9,"rid":[9184]},
{"oid":715,"typ":"int","nam":"Changhsingian","lvl":5,"pid":771,"col":"#FCC0B2","lag":252.2,"eag":254.2,"rid":[9184]},
{"oid":653,"typ":"int","nam":"Induan","lvl":5,"pid":46,"col":"#A4469F","lag":251.2,"eag":252.2,"rid":[47900]},
{"oid":652,"typ":"int","nam":"Olenekian","lvl":5,"pid":46,"col":"#B051A5","lag":247.2,"eag":251.2,"rid":[47900]},
{"oid":139,"typ":"int","nam":"Anisian","lvl":5,"pid":45,"col":"#BC75B7","lag":242,"eag":247.2,"rid":[47900]},
{"oid":138,"typ":"int","nam":"Ladinian","lvl":5,"pid":45,"col":"#C983BF","lag":237,"eag":242,"rid":[47900]},
{"oid":137,"typ":"int","nam":"Carnian","lvl":5,"pid":44,"col":"#C99BCB","lag":228,"eag":237,"rid":[47900]},
{"oid":136,"typ":"int","nam":"Norian","lvl":5,"pid":44,"col":"#D6AAD3","lag":208.5,"eag":228,"rid":[47900]},
{"oid":135,"typ":"int","nam":"Rhaetian","lvl":5,"pid":44,"col":"#E3B9DB","lag":201.3,"eag":208.5,"rid":[47900]},
{"oid":134,"typ":"int","nam":"Hettangian","lvl":5,"pid":43,"col":"#4EB3D3","lag":199.3,"eag":201.3,"rid":[47900]},
{"oid":133,"typ":"int","nam":"Sinemurian","lvl":5,"pid":43,"col":"#67BCD8","lag":190.8,"eag":199.3,"rid":[47900]},
{"oid":132,"typ":"int","nam":"Pliensbachian","lvl":5,"pid":43,"col":"#80C5DD","lag":182.7,"eag":190.8,"rid":[47900]},
{"oid":131,"typ":"int","nam":"Toarcian","lvl":5,"pid":43,"col":"#99CEE3","lag":174.1,"eag":182.7,"rid":[47900]},
{"oid":130,"typ":"int","nam":"Aalenian","lvl":5,"pid":42,"col":"#9AD9DD","lag":170.3,"eag":174.1,"rid":[47900]},
{"oid":129,"typ":"int","nam":"Bajocian","lvl":5,"pid":42,"col":"#A6DDE0","lag":168.3,"eag":170.3,"rid":[47900]},
{"oid":128,"typ":"int","nam":"Bathonian","lvl":5,"pid":42,"col":"#B3E2E3","lag":166.1,"eag":168.3,"rid":[47900]},
{"oid":127,"typ":"int","nam":"Callovian","lvl":5,"pid":42,"col":"#BFE7E5","lag":163.5,"eag":166.1,"rid":[47900]},
{"oid":126,"typ":"int","nam":"Oxfordian","lvl":5,"pid":41,"col":"#BFE7F1","lag":157.3,"eag":163.5,"rid":[47900]},
{"oid":125,"typ":"int","nam":"Kimmeridgian","lvl":5,"pid":41,"col":"#CCECF4","lag":152.1,"eag":157.3,"rid":[47900]},
{"oid":124,"typ":"int","nam":"Tithonian","lvl":5,"pid":41,"col":"#D9F1F7","lag":145,"eag":152.1,"rid":[47900]},
{"oid":123,"typ":"int","nam":"Berriasian","lvl":5,"pid":40,"col":"#8CCD60","lag":139.8,"eag":145,"rid":[47900]},
{"oid":122,"typ":"int","nam":"Valanginian","lvl":5,"pid":40,"col":"#99D36A","lag":132.9,"eag":139.8,"rid":[47900]},
{"oid":121,"typ":"int","nam":"Hauterivian","lvl":5,"pid":40,"col":"#A6D975","lag":129.4,"eag":132.9,"rid":[47900]},
{"oid":120,"typ":"int","nam":"Barremian","lvl":5,"pid":40,"col":"#B3DF7F","lag":125,"eag":129.4,"rid":[47900]},
{"oid":119,"typ":"int","nam":"Aptian","lvl":5,"pid":40,"col":"#BFE48A","lag":113,"eag":125,"rid":[47900]},
{"oid":118,"typ":"int","nam":"Albian","lvl":5,"pid":40,"col":"#CCEA97","lag":100.5,"eag":113,"rid":[47900]},
{"oid":117,"typ":"int","nam":"Cenomanian","lvl":5,"pid":39,"col":"#B3DE53","lag":93.9,"eag":100.5,"rid":[47900]},
{"oid":116,"typ":"int","nam":"Turonian","lvl":5,"pid":39,"col":"#BFE35D","lag":89.8,"eag":93.9,"rid":[47900]},
{"oid":115,"typ":"int","nam":"Coniacian","lvl":5,"pid":39,"col":"#CCE968","lag":86.3,"eag":89.8,"rid":[47900]},
{"oid":114,"typ":"int","nam":"Santonian","lvl":5,"pid":39,"col":"#D9EF74","lag":83.6,"eag":86.3,"rid":[47900]},
{"oid":113,"typ":"int","nam":"Campanian","lvl":5,"pid":39,"col":"#E6F47F","lag":72.1,"eag":83.6,"rid":[47900]},
{"oid":112,"typ":"int","nam":"Maastrichtian","lvl":5,"pid":39,"col":"#F2FA8C","lag":66,"eag":72.1,"rid":[47900]},
{"oid":111,"typ":"int","nam":"Danian","lvl":5,"pid":38,"col":"#FDB462","lag":61.6,"eag":66,"rid":[47900]},
{"oid":743,"typ":"int","nam":"Selandian","lvl":5,"pid":38,"col":"#FEBF65","lag":59.2,"eag":61.6,"rid":[47900]},
{"oid":110,"typ":"int","nam":"Thanetian","lvl":5,"pid":38,"col":"#FDBF6F","lag":56,"eag":59.2,"rid":[47900]},
{"oid":109,"typ":"int","nam":"Ypresian","lvl":5,"pid":37,"col":"#FCA773","lag":47.8,"eag":56,"rid":[47900]},
{"oid":108,"typ":"int","nam":"Lutetian","lvl":5,"pid":37,"col":"#FCB482","lag":41.3,"eag":47.8,"rid":[47900]},
{"oid":107,"typ":"int","nam":"Bartonian","lvl":5,"pid":37,"col":"#FDC091","lag":38,"eag":41.3,"rid":[47900]},
{"oid":106,"typ":"int","nam":"Priabonian","lvl":5,"pid":37,"col":"#FDCDA1","lag":33.9,"eag":38,"rid":[47900]},
{"oid":105,"typ":"int","nam":"Rupelian","lvl":5,"pid":36,"col":"#FED99A","lag":28.1,"eag":33.9,"rid":[47900]},
{"oid":104,"typ":"int","nam":"Chattian","lvl":5,"pid":36,"col":"#FEE6AA","lag":23.03,"eag":28.1,"rid":[47900]},
{"oid":103,"typ":"int","nam":"Aquitanian","lvl":5,"pid":35,"col":"#FFFF33","lag":20.44,"eag":23.03,"rid":[47900]},
{"oid":102,"typ":"int","nam":"Burdigalian","lvl":5,"pid":35,"col":"#FFFF41","lag":15.97,"eag":20.44,"rid":[47900]},
{"oid":101,"typ":"int","nam":"Langhian","lvl":5,"pid":35,"col":"#FFFF4D","lag":13.82,"eag":15.97,"rid":[47900]},
{"oid":100,"typ":"int","nam":"Serravallian","lvl":5,"pid":35,"col":"#FFFF59","lag":11.62,"eag":13.82,"rid":[47900]},
{"oid":99,"typ":"int","nam":"Tortonian","lvl":5,"pid":35,"col":"#FFFF66","lag":7.246,"eag":11.62,"rid":[47900]},
{"oid":98,"typ":"int","nam":"Messinian","lvl":5,"pid":35,"col":"#FFFF73","lag":5.333,"eag":7.246,"rid":[47900]},
{"oid":97,"typ":"int","nam":"Zanclean","lvl":5,"pid":34,"col":"#FFFFB3","lag":3.6,"eag":5.333,"rid":[47900]},
{"oid":96,"typ":"int","nam":"Piacenzian","lvl":5,"pid":34,"col":"#FFFFBF","lag":2.588,"eag":3.6,"rid":[47900]},
{"oid":741,"typ":"int","nam":"Gelasian","lvl":5,"pid":33,"col":"#FFEDB3","lag":1.806,"eag":2.588,"rid":[47900]},
{"oid":740,"typ":"int","nam":"Calabrian","lvl":5,"pid":33,"col":"#FFF2BA","lag":0.781,"eag":1.806,"rid":[47900]},
{"oid":923,"typ":"int","nam":"Middle Pleistocene","lvl":5,"pid":33,"col":"#FFF2C7","lag":0.126,"eag":0.781,"rid":[15443]},
{"oid":922,"typ":"int","nam":"Late Pleistocene","lvl":5,"pid":33,"col":"#FFF2D3","lag":0.0117,"eag":0.126,"rid":[15443]},
{"oid":3002,"typ":"int","nam":"Holocene","lvl":5,"pid":32,"col":"#FEF2E0","lag":0,"eag":0.0117,"rid":[47900]}
]
}
	<!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 http://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>
	{
	"records": [
	{"oid":753,"typ":"int","nam":"Archean","lvl":1,"pid":0,"col":"#F0047F","lag":2500,"eag":4000,"rid":[15443]},
	{"oid":752,"typ":"int","nam":"Proterozoic","lvl":1,"pid":0,"col":"#F73563","lag":541,"eag":2500,"rid":[47900]},
	{"oid":751,"typ":"int","nam":"Phanerozoic","lvl":1,"pid":0,"col":"#9AD9DD","lag":0,"eag":541,"rid":[47900]},
	{"oid":760,"typ":"int","nam":"Eoarchean","lvl":2,"pid":753,"col":"#DA037F","lag":3600,"eag":4000,"rid":[15443]},
	{"oid":759,"typ":"int","nam":"Paleoarchean","lvl":2,"pid":753,"col":"#F444A9","lag":3200,"eag":3600,"rid":[15443]},
	{"oid":758,"typ":"int","nam":"Mesoarchean","lvl":2,"pid":753,"col":"#F768A9","lag":2800,"eag":3200,"rid":[15443]},
	{"oid":757,"typ":"int","nam":"Neoarchean","lvl":2,"pid":753,"col":"#F99BC1","lag":2500,"eag":2800,"rid":[15443]},
	{"oid":756,"typ":"int","nam":"Paleoproterozoic","lvl":2,"pid":752,"col":"#F74370","lag":1600,"eag":2500,"rid":[47900]},
	{"oid":755,"typ":"int","nam":"Mesoproterozoic","lvl":2,"pid":752,"col":"#FDB462","lag":1000,"eag":1600,"rid":[47900]},
	{"oid":754,"typ":"int","nam":"Neoproterozoic","lvl":2,"pid":752,"col":"#FEB342","lag":541,"eag":1000,"rid":[47900]},
	{"oid":3,"typ":"int","nam":"Paleozoic","abr":"Pz","lvl":2,"pid":751,"col":"#99C08D","lag":252.2,"eag":541,"rid":[47900]},
	{"oid":2,"typ":"int","nam":"Mesozoic","abr":"Mz","lvl":2,"pid":751,"col":"#67C5CA","lag":66,"eag":252.2,"rid":[47900]},
	{"oid":1,"typ":"int","nam":"Cenozoic","abr":"Cz","lvl":2,"pid":751,"col":"#F2F91D","lag":0,"eag":66,"rid":[47900]},
	{"oid":770,"typ":"int","nam":"Siderian","lvl":3,"pid":756,"col":"#F74F7C","lag":2300,"eag":2500,"rid":[47900]},
	{"oid":769,"typ":"int","nam":"Rhyacian","lvl":3,"pid":756,"col":"#F75B89","lag":2050,"eag":2300,"rid":[47900]},
	{"oid":768,"typ":"int","nam":"Orosirian","lvl":3,"pid":756,"col":"#F76898","lag":1800,"eag":2050,"rid":[47900]},
	{"oid":767,"typ":"int","nam":"Statherian","lvl":3,"pid":756,"col":"#F875A7","lag":1600,"eag":1800,"rid":[47900]},
	{"oid":766,"typ":"int","nam":"Calymmian","lvl":3,"pid":755,"col":"#FDC07A","lag":1400,"eag":1600,"rid":[47900]},
	{"oid":765,"typ":"int","nam":"Ectasian","lvl":3,"pid":755,"col":"#F3CC8A","lag":1200,"eag":1400,"rid":[47900]},
	{"oid":764,"typ":"int","nam":"Stenian","lvl":3,"pid":755,"col":"#FED99A","lag":1000,"eag":1200,"rid":[47900]},
	{"oid":763,"typ":"int","nam":"Tonian","lvl":3,"pid":754,"col":"#FEBF4E","lag":850,"eag":1000,"rid":[47900]},
	{"oid":762,"typ":"int","nam":"Cryogenian","lvl":3,"pid":754,"col":"#FECC5C","lag":635,"eag":850,"rid":[47900]},
	{"oid":761,"typ":"int","nam":"Ediacaran","lvl":3,"pid":754,"col":"#FED96A","lag":541,"eag":635,"rid":[47900]},
	{"oid":22,"typ":"int","nam":"Cambrian","abr":"Cm","lvl":3,"pid":3,"col":"#7FA056","lag":485.4,"eag":541,"rid":[47900]},
	{"oid":21,"typ":"int","nam":"Ordovician","abr":"O","lvl":3,"pid":3,"col":"#009270","lag":443.4,"eag":485.4,"rid":[47900]},
	{"oid":20,"typ":"int","nam":"Silurian","abr":"S","lvl":3,"pid":3,"col":"#B3E1B6","lag":419.2,"eag":443.4,"rid":[47900]},
	{"oid":19,"typ":"int","nam":"Devonian","abr":"D","lvl":3,"pid":3,"col":"#CB8C37","lag":358.9,"eag":419.2,"rid":[47900]},
	{"oid":18,"typ":"int","nam":"Carboniferous","abr":"C","lvl":3,"pid":3,"col":"#67A599","lag":298.9,"eag":358.9,"rid":[47900]},
	{"oid":17,"typ":"int","nam":"Permian","abr":"P","lvl":3,"pid":3,"col":"#F04028","lag":252.2,"eag":298.9,"rid":[47900]},
	{"oid":16,"typ":"int","nam":"Triassic","abr":"Tr","lvl":3,"pid":2,"col":"#812B92","lag":201.3,"eag":252.2,"rid":[47900]},
	{"oid":15,"typ":"int","nam":"Jurassic","abr":"J","lvl":3,"pid":2,"col":"#34B2C9","lag":145,"eag":201.3,"rid":[47900]},
	{"oid":14,"typ":"int","nam":"Cretaceous","abr":"K","lvl":3,"pid":2,"col":"#7FC64E","lag":66,"eag":145,"rid":[47900]},
	{"oid":26,"typ":"int","nam":"Paleogene","abr":"Pg","lvl":3,"pid":1,"col":"#FD9A52","lag":23.03,"eag":66,"rid":[47900]},
	{"oid":25,"typ":"int","nam":"Neogene","abr":"Ng","lvl":3,"pid":1,"col":"#FFE619","lag":2.588,"eag":23.03,"rid":[47900]},
	{"oid":12,"typ":"int","nam":"Quaternary","lvl":3,"pid":1,"col":"#F9F97F","lag":0,"eag":2.588,"rid":[47900]},
	{"oid":1111,"typ":"int","nam":"Terreneuvian","lvl":4,"pid":22,"col":"#8CB06C","lag":521,"eag":541,"rid":[47900]},
	{"oid":1110,"typ":"int","nam":"Series 2","lvl":4,"pid":22,"col":"#99C078","lag":509,"eag":521,"rid":[47900]},
	{"oid":1109,"typ":"int","nam":"Series 3","lvl":4,"pid":22,"col":"#A6CF86","lag":497,"eag":509,"rid":[47900]},
	{"oid":780,"typ":"int","nam":"Furongian","lvl":4,"pid":22,"col":"#B3E095","lag":485.4,"eag":497,"rid":[47900]},
	{"oid":31,"typ":"int","nam":"Early Ordovician","lvl":4,"pid":21,"col":"#1A9D6F","lag":470,"eag":485.4,"rid":[47900]},
	{"oid":30,"typ":"int","nam":"Middle Ordovician","lvl":4,"pid":21,"col":"#4DB47E","lag":458.4,"eag":470,"rid":[47900]},
	{"oid":29,"typ":"int","nam":"Late Ordovician","lvl":4,"pid":21,"col":"#7FCA93","lag":443.4,"eag":458.4,"rid":[47900]},
	{"oid":62,"typ":"int","nam":"Llandovery","lvl":4,"pid":20,"col":"#99D7B3","lag":433.4,"eag":443.4,"rid":[47900]},
	{"oid":61,"typ":"int","nam":"Wenlock","lvl":4,"pid":20,"col":"#B3E1C2","lag":427.4,"eag":433.4,"rid":[47900]},
	{"oid":60,"typ":"int","nam":"Ludlow","lvl":4,"pid":20,"col":"#BFE6CF","lag":423,"eag":427.4,"rid":[47900]},
	{"oid":59,"typ":"int","nam":"Pridoli","lvl":4,"pid":20,"col":"#E6F5E1","lag":419.2,"eag":423,"rid":[47900]},
	{"oid":58,"typ":"int","nam":"Early Devonian","lvl":4,"pid":19,"col":"#E5AC4D","lag":393.3,"eag":419.2,"rid":[47900]},
	{"oid":57,"typ":"int","nam":"Middle Devonian","lvl":4,"pid":19,"col":"#F1C868","lag":382.7,"eag":393.3,"rid":[47900]},
	{"oid":56,"typ":"int","nam":"Late Devonian","lvl":4,"pid":19,"col":"#F1E19D","lag":358.9,"eag":382.7,"rid":[47900]},
	{"oid":28,"typ":"int","nam":"Mississippian","lvl":4,"pid":18,"col":"#678F66","lag":323.2,"eag":358.9,"rid":[47900]},
	{"oid":27,"typ":"int","nam":"Pennsylvanian","lvl":4,"pid":18,"col":"#99C2B5","lag":298.9,"eag":323.2,"rid":[47900]},
	{"oid":773,"typ":"int","nam":"Cisuralian","lvl":4,"pid":17,"col":"#EF5845","lag":272.3,"eag":298.9,"rid":[47900]},
	{"oid":772,"typ":"int","nam":"Guadalupian","lvl":4,"pid":17,"col":"#FB745C","lag":259.9,"eag":272.3,"rid":[47900]},
	{"oid":771,"typ":"int","nam":"Lopingian","lvl":4,"pid":17,"col":"#FBA794","lag":252.2,"eag":259.9,"rid":[47900]},
	{"oid":46,"typ":"int","nam":"Early Triassic","lvl":4,"pid":16,"col":"#983999","lag":247.2,"eag":252.2,"rid":[47900]},
	{"oid":45,"typ":"int","nam":"Middle Triassic","lvl":4,"pid":16,"col":"#B168B1","lag":237,"eag":247.2,"rid":[47900]},
	{"oid":44,"typ":"int","nam":"Late Triassic","lvl":4,"pid":16,"col":"#BD8CC3","lag":201.3,"eag":237,"rid":[47900]},
	{"oid":43,"typ":"int","nam":"Early Jurassic","lvl":4,"pid":15,"col":"#42AED0","lag":174.1,"eag":201.3,"rid":[47900]},
	{"oid":42,"typ":"int","nam":"Middle Jurassic","lvl":4,"pid":15,"col":"#80CFD8","lag":163.5,"eag":174.1,"rid":[47900]},
	{"oid":41,"typ":"int","nam":"Late Jurassic","lvl":4,"pid":15,"col":"#B3E3EE","lag":145,"eag":163.5,"rid":[47900]},
	{"oid":40,"typ":"int","nam":"Early Cretaceous","lvl":4,"pid":14,"col":"#8CCD57","lag":100.5,"eag":145,"rid":[47900]},
	{"oid":39,"typ":"int","nam":"Late Cretaceous","lvl":4,"pid":14,"col":"#A6D84A","lag":66,"eag":100.5,"rid":[47900]},
	{"oid":38,"typ":"int","nam":"Paleocene","lvl":4,"pid":26,"col":"#FDA75F","lag":56,"eag":66,"rid":[47900]},
	{"oid":37,"typ":"int","nam":"Eocene","lvl":4,"pid":26,"col":"#FDB46C","lag":33.9,"eag":56,"rid":[47900]},
	{"oid":36,"typ":"int","nam":"Oligocene","lvl":4,"pid":26,"col":"#FDC07A","lag":23.03,"eag":33.9,"rid":[47900]},
	{"oid":35,"typ":"int","nam":"Miocene","lvl":4,"pid":25,"col":"#FFFF00","lag":5.333,"eag":23.03,"rid":[47900]},
	{"oid":34,"typ":"int","nam":"Pliocene","lvl":4,"pid":25,"col":"#FFFF99","lag":2.588,"eag":5.333,"rid":[47900]},
	{"oid":33,"typ":"int","nam":"Pleistocene","lvl":4,"pid":12,"col":"#FFF2AE","lag":0.0117,"eag":2.588,"rid":[47900]},
	{"oid":32,"typ":"int","nam":"Holocene","lvl":4,"pid":12,"col":"#FEF2E0","lag":0,"eag":0.0117,"rid":[47900]},
	{"oid":1121,"typ":"int","nam":"Fortunian","lvl":5,"pid":1111,"col":"#99B575","lag":529,"eag":541,"rid":[47900]},
	{"oid":1120,"typ":"int","nam":"Stage 2","lvl":5,"pid":1111,"col":"#A6BA80","lag":521,"eag":529,"rid":[47900]},
	{"oid":1119,"typ":"int","nam":"Stage 3","lvl":5,"pid":1110,"col":"#A6C583","lag":514,"eag":521,"rid":[47900]},
	{"oid":1118,"typ":"int","nam":"Stage 4","lvl":5,"pid":1110,"col":"#B3CA8E","lag":509,"eag":514,"rid":[47900]},
	{"oid":1117,"typ":"int","nam":"Stage 5","lvl":5,"pid":1109,"col":"#B3D492","lag":504.5,"eag":509,"rid":[47900]},
	{"oid":1116,"typ":"int","nam":"Drumian","lvl":5,"pid":1109,"col":"#BFD99D","lag":500.5,"eag":504.5,"rid":[47900]},
	{"oid":1087,"typ":"int","nam":"Guzhangian","lvl":5,"pid":1109,"col":"#CCDFAA","lag":497,"eag":500.5,"rid":[47900]},
	{"oid":1114,"typ":"int","nam":"Paibian","lvl":5,"pid":780,"col":"#CCEBAE","lag":494,"eag":497,"rid":[47900]},
	{"oid":1113,"typ":"int","nam":"Jiangshanian","lvl":5,"pid":780,"col":"#D9F0BB","lag":489.5,"eag":494,"rid":[47900]},
	{"oid":1112,"typ":"int","nam":"Stage 10","lvl":5,"pid":780,"col":"#E6F5C9","lag":485.4,"eag":489.5,"rid":[47900]},
	{"oid":559,"typ":"int","nam":"Tremadocian","lvl":5,"pid":31,"col":"#33A97E","lag":477.7,"eag":485.4,"rid":[47900]},
	{"oid":1010,"typ":"int","nam":"Floian","lvl":5,"pid":31,"col":"#41B087","lag":470,"eag":477.7,"rid":[47900]},
	{"oid":1079,"typ":"int","nam":"Dapingian","lvl":5,"pid":30,"col":"#66C092","lag":467.3,"eag":470,"rid":[47900]},
	{"oid":556,"typ":"int","nam":"Darriwilian","lvl":5,"pid":30,"col":"#74C69C","lag":458.4,"eag":467.3,"rid":[47900]},
	{"oid":1009,"typ":"int","nam":"Sandbian","lvl":5,"pid":29,"col":"#8CD094","lag":453,"eag":458.4,"rid":[47900]},
	{"oid":1008,"typ":"int","nam":"Katian","lvl":5,"pid":29,"col":"#99D69F","lag":445.2,"eag":453,"rid":[47900]},
	{"oid":192,"typ":"int","nam":"Hirnantian","lvl":5,"pid":29,"col":"#A6DBAB","lag":443.4,"eag":445.2,"rid":[47900]},
	{"oid":191,"typ":"int","nam":"Rhuddanian","lvl":5,"pid":62,"col":"#A6DCB5","lag":440.8,"eag":443.4,"rid":[47900]},
	{"oid":190,"typ":"int","nam":"Aeronian","lvl":5,"pid":62,"col":"#B3E1C2","lag":438.5,"eag":440.8,"rid":[47900]},
	{"oid":189,"typ":"int","nam":"Telychian","lvl":5,"pid":62,"col":"#BFE6D1","lag":433.4,"eag":438.5,"rid":[47900]},
	{"oid":188,"typ":"int","nam":"Sheinwoodian","lvl":5,"pid":61,"col":"#BFE6C3","lag":430.5,"eag":433.4,"rid":[47900]},
	{"oid":785,"typ":"int","nam":"Homerian","lvl":5,"pid":61,"col":"#CCEBD1","lag":427.4,"eag":430.5,"rid":[47900]},
	{"oid":185,"typ":"int","nam":"Gorstian","lvl":5,"pid":60,"col":"#CCECDD","lag":425.6,"eag":427.4,"rid":[47900]},
	{"oid":184,"typ":"int","nam":"Ludfordian","lvl":5,"pid":60,"col":"#D9F0DF","lag":423,"eag":425.6,"rid":[47900]},
	{"oid":3001,"typ":"int","nam":"Pridoli","lvl":5,"pid":59,"col":"#E6F5E1","lag":419.2,"eag":423,"rid":[47900]},
	{"oid":183,"typ":"int","nam":"Lochkovian","lvl":5,"pid":58,"col":"#E5B75A","lag":410.8,"eag":419.2,"rid":[47900]},
	{"oid":182,"typ":"int","nam":"Pragian","lvl":5,"pid":58,"col":"#E5C468","lag":407.6,"eag":410.8,"rid":[47900]},
	{"oid":181,"typ":"int","nam":"Emsian","lvl":5,"pid":58,"col":"#E5D075","lag":393.3,"eag":407.6,"rid":[47900]},
	{"oid":180,"typ":"int","nam":"Eifelian","lvl":5,"pid":57,"col":"#F1D576","lag":387.7,"eag":393.3,"rid":[47900]},
	{"oid":179,"typ":"int","nam":"Givetian","lvl":5,"pid":57,"col":"#F1E185","lag":382.7,"eag":387.7,"rid":[47900]},
	{"oid":178,"typ":"int","nam":"Frasnian","lvl":5,"pid":56,"col":"#F2EDAD","lag":372.2,"eag":382.7,"rid":[47900]},
	{"oid":177,"typ":"int","nam":"Famennian","lvl":5,"pid":56,"col":"#F2EDC5","lag":358.9,"eag":372.2,"rid":[47900]},
	{"oid":55,"typ":"int","nam":"Tournaisian","lvl":5,"pid":28,"col":"#8CB06C","lag":346.7,"eag":358.9,"rid":[5954]},
	{"oid":54,"typ":"int","nam":"Visean","lvl":5,"pid":28,"col":"#A6B96C","lag":330.9,"eag":346.7,"rid":[5954]},
	{"oid":53,"typ":"int","nam":"Serpukhovian","lvl":5,"pid":28,"col":"#BFC26B","lag":323.2,"eag":330.9,"rid":[5954]},
	{"oid":52,"typ":"int","nam":"Bashkirian","lvl":5,"pid":27,"col":"#99C2B6","lag":315.2,"eag":323.2,"rid":[5954]},
	{"oid":51,"typ":"int","nam":"Moscovian","lvl":5,"pid":27,"col":"#B3CBB9","lag":307,"eag":315.2,"rid":[5954]},
	{"oid":50,"typ":"int","nam":"Kasimovian","lvl":5,"pid":27,"col":"#BFD0C5","lag":303.7,"eag":307,"rid":[5954]},
	{"oid":49,"typ":"int","nam":"Gzhelian","lvl":5,"pid":27,"col":"#CCD4C7","lag":298.9,"eag":303.7,"rid":[5954]},
	{"oid":151,"typ":"int","nam":"Asselian","lvl":5,"pid":773,"col":"#E36350","lag":295.5,"eag":298.9,"rid":[5954]},
	{"oid":150,"typ":"int","nam":"Sakmarian","lvl":5,"pid":773,"col":"#E36F5C","lag":290.1,"eag":295.5,"rid":[5954]},
	{"oid":149,"typ":"int","nam":"Artinskian","lvl":5,"pid":773,"col":"#E37B68","lag":279.3,"eag":290.1,"rid":[5954]},
	{"oid":148,"typ":"int","nam":"Kungurian","lvl":5,"pid":773,"col":"#E38776","lag":272.3,"eag":279.3,"rid":[5954]},
	{"oid":717,"typ":"int","nam":"Roadian","lvl":5,"pid":772,"col":"#FB8069","lag":268.8,"eag":272.3,"rid":[9184]},
	{"oid":146,"typ":"int","nam":"Wordian","lvl":5,"pid":772,"col":"#FB8D76","lag":265.1,"eag":268.8,"rid":[5954]},
	{"oid":145,"typ":"int","nam":"Capitanian","lvl":5,"pid":772,"col":"#FB9A85","lag":259.9,"eag":265.1,"rid":[5954]},
	{"oid":716,"typ":"int","nam":"Wuchiapingian","lvl":5,"pid":771,"col":"#FCB4A2","lag":254.2,"eag":259.9,"rid":[9184]},
	{"oid":715,"typ":"int","nam":"Changhsingian","lvl":5,"pid":771,"col":"#FCC0B2","lag":252.2,"eag":254.2,"rid":[9184]},
	{"oid":653,"typ":"int","nam":"Induan","lvl":5,"pid":46,"col":"#A4469F","lag":251.2,"eag":252.2,"rid":[47900]},
	{"oid":652,"typ":"int","nam":"Olenekian","lvl":5,"pid":46,"col":"#B051A5","lag":247.2,"eag":251.2,"rid":[47900]},
	{"oid":139,"typ":"int","nam":"Anisian","lvl":5,"pid":45,"col":"#BC75B7","lag":242,"eag":247.2,"rid":[47900]},
	{"oid":138,"typ":"int","nam":"Ladinian","lvl":5,"pid":45,"col":"#C983BF","lag":237,"eag":242,"rid":[47900]},
	{"oid":137,"typ":"int","nam":"Carnian","lvl":5,"pid":44,"col":"#C99BCB","lag":228,"eag":237,"rid":[47900]},
	{"oid":136,"typ":"int","nam":"Norian","lvl":5,"pid":44,"col":"#D6AAD3","lag":208.5,"eag":228,"rid":[47900]},
	{"oid":135,"typ":"int","nam":"Rhaetian","lvl":5,"pid":44,"col":"#E3B9DB","lag":201.3,"eag":208.5,"rid":[47900]},
	{"oid":134,"typ":"int","nam":"Hettangian","lvl":5,"pid":43,"col":"#4EB3D3","lag":199.3,"eag":201.3,"rid":[47900]},
	{"oid":133,"typ":"int","nam":"Sinemurian","lvl":5,"pid":43,"col":"#67BCD8","lag":190.8,"eag":199.3,"rid":[47900]},
	{"oid":132,"typ":"int","nam":"Pliensbachian","lvl":5,"pid":43,"col":"#80C5DD","lag":182.7,"eag":190.8,"rid":[47900]},
	{"oid":131,"typ":"int","nam":"Toarcian","lvl":5,"pid":43,"col":"#99CEE3","lag":174.1,"eag":182.7,"rid":[47900]},
	{"oid":130,"typ":"int","nam":"Aalenian","lvl":5,"pid":42,"col":"#9AD9DD","lag":170.3,"eag":174.1,"rid":[47900]},
	{"oid":129,"typ":"int","nam":"Bajocian","lvl":5,"pid":42,"col":"#A6DDE0","lag":168.3,"eag":170.3,"rid":[47900]},
	{"oid":128,"typ":"int","nam":"Bathonian","lvl":5,"pid":42,"col":"#B3E2E3","lag":166.1,"eag":168.3,"rid":[47900]},
	{"oid":127,"typ":"int","nam":"Callovian","lvl":5,"pid":42,"col":"#BFE7E5","lag":163.5,"eag":166.1,"rid":[47900]},
	{"oid":126,"typ":"int","nam":"Oxfordian","lvl":5,"pid":41,"col":"#BFE7F1","lag":157.3,"eag":163.5,"rid":[47900]},
	{"oid":125,"typ":"int","nam":"Kimmeridgian","lvl":5,"pid":41,"col":"#CCECF4","lag":152.1,"eag":157.3,"rid":[47900]},
	{"oid":124,"typ":"int","nam":"Tithonian","lvl":5,"pid":41,"col":"#D9F1F7","lag":145,"eag":152.1,"rid":[47900]},
	{"oid":123,"typ":"int","nam":"Berriasian","lvl":5,"pid":40,"col":"#8CCD60","lag":139.8,"eag":145,"rid":[47900]},
	{"oid":122,"typ":"int","nam":"Valanginian","lvl":5,"pid":40,"col":"#99D36A","lag":132.9,"eag":139.8,"rid":[47900]},
	{"oid":121,"typ":"int","nam":"Hauterivian","lvl":5,"pid":40,"col":"#A6D975","lag":129.4,"eag":132.9,"rid":[47900]},
	{"oid":120,"typ":"int","nam":"Barremian","lvl":5,"pid":40,"col":"#B3DF7F","lag":125,"eag":129.4,"rid":[47900]},
	{"oid":119,"typ":"int","nam":"Aptian","lvl":5,"pid":40,"col":"#BFE48A","lag":113,"eag":125,"rid":[47900]},
	{"oid":118,"typ":"int","nam":"Albian","lvl":5,"pid":40,"col":"#CCEA97","lag":100.5,"eag":113,"rid":[47900]},
	{"oid":117,"typ":"int","nam":"Cenomanian","lvl":5,"pid":39,"col":"#B3DE53","lag":93.9,"eag":100.5,"rid":[47900]},
	{"oid":116,"typ":"int","nam":"Turonian","lvl":5,"pid":39,"col":"#BFE35D","lag":89.8,"eag":93.9,"rid":[47900]},
	{"oid":115,"typ":"int","nam":"Coniacian","lvl":5,"pid":39,"col":"#CCE968","lag":86.3,"eag":89.8,"rid":[47900]},
	{"oid":114,"typ":"int","nam":"Santonian","lvl":5,"pid":39,"col":"#D9EF74","lag":83.6,"eag":86.3,"rid":[47900]},
	{"oid":113,"typ":"int","nam":"Campanian","lvl":5,"pid":39,"col":"#E6F47F","lag":72.1,"eag":83.6,"rid":[47900]},
	{"oid":112,"typ":"int","nam":"Maastrichtian","lvl":5,"pid":39,"col":"#F2FA8C","lag":66,"eag":72.1,"rid":[47900]},
	{"oid":111,"typ":"int","nam":"Danian","lvl":5,"pid":38,"col":"#FDB462","lag":61.6,"eag":66,"rid":[47900]},
	{"oid":743,"typ":"int","nam":"Selandian","lvl":5,"pid":38,"col":"#FEBF65","lag":59.2,"eag":61.6,"rid":[47900]},
	{"oid":110,"typ":"int","nam":"Thanetian","lvl":5,"pid":38,"col":"#FDBF6F","lag":56,"eag":59.2,"rid":[47900]},
	{"oid":109,"typ":"int","nam":"Ypresian","lvl":5,"pid":37,"col":"#FCA773","lag":47.8,"eag":56,"rid":[47900]},
	{"oid":108,"typ":"int","nam":"Lutetian","lvl":5,"pid":37,"col":"#FCB482","lag":41.3,"eag":47.8,"rid":[47900]},
	{"oid":107,"typ":"int","nam":"Bartonian","lvl":5,"pid":37,"col":"#FDC091","lag":38,"eag":41.3,"rid":[47900]},
	{"oid":106,"typ":"int","nam":"Priabonian","lvl":5,"pid":37,"col":"#FDCDA1","lag":33.9,"eag":38,"rid":[47900]},
	{"oid":105,"typ":"int","nam":"Rupelian","lvl":5,"pid":36,"col":"#FED99A","lag":28.1,"eag":33.9,"rid":[47900]},
	{"oid":104,"typ":"int","nam":"Chattian","lvl":5,"pid":36,"col":"#FEE6AA","lag":23.03,"eag":28.1,"rid":[47900]},
	{"oid":103,"typ":"int","nam":"Aquitanian","lvl":5,"pid":35,"col":"#FFFF33","lag":20.44,"eag":23.03,"rid":[47900]},
	{"oid":102,"typ":"int","nam":"Burdigalian","lvl":5,"pid":35,"col":"#FFFF41","lag":15.97,"eag":20.44,"rid":[47900]},
	{"oid":101,"typ":"int","nam":"Langhian","lvl":5,"pid":35,"col":"#FFFF4D","lag":13.82,"eag":15.97,"rid":[47900]},
	{"oid":100,"typ":"int","nam":"Serravallian","lvl":5,"pid":35,"col":"#FFFF59","lag":11.62,"eag":13.82,"rid":[47900]},
	{"oid":99,"typ":"int","nam":"Tortonian","lvl":5,"pid":35,"col":"#FFFF66","lag":7.246,"eag":11.62,"rid":[47900]},
	{"oid":98,"typ":"int","nam":"Messinian","lvl":5,"pid":35,"col":"#FFFF73","lag":5.333,"eag":7.246,"rid":[47900]},
	{"oid":97,"typ":"int","nam":"Zanclean","lvl":5,"pid":34,"col":"#FFFFB3","lag":3.6,"eag":5.333,"rid":[47900]},
	{"oid":96,"typ":"int","nam":"Piacenzian","lvl":5,"pid":34,"col":"#FFFFBF","lag":2.588,"eag":3.6,"rid":[47900]},
	{"oid":741,"typ":"int","nam":"Gelasian","lvl":5,"pid":33,"col":"#FFEDB3","lag":1.806,"eag":2.588,"rid":[47900]},
	{"oid":740,"typ":"int","nam":"Calabrian","lvl":5,"pid":33,"col":"#FFF2BA","lag":0.781,"eag":1.806,"rid":[47900]},
	{"oid":923,"typ":"int","nam":"Middle Pleistocene","lvl":5,"pid":33,"col":"#FFF2C7","lag":0.126,"eag":0.781,"rid":[15443]},
	{"oid":922,"typ":"int","nam":"Late Pleistocene","lvl":5,"pid":33,"col":"#FFF2D3","lag":0.0117,"eag":0.126,"rid":[15443]},
	{"oid":3002,"typ":"int","nam":"Holocene","lvl":5,"pid":32,"col":"#FEF2E0","lag":0,"eag":0.0117,"rid":[47900]}
	]
	}