Skip to content

Instantly share code, notes, and snippets.

@jczaplew
Last active January 18, 2021 21:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jczaplew/7546689 to your computer and use it in GitHub Desktop.
Save jczaplew/7546689 to your computer and use it in GitHub Desktop.
Geologic Time Scale
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Language" content="en" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<title>Geologic Time</title>
<link rel="stylesheet" href="timescale.css" />
</head>
<body>
<div id="geoTime"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="timescale.js"></script>
<script type="text/javascript">
// Start
timescale.init("geoTime");
</script>
</body>
</html>
{
"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]}
]
}
.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;
}
// 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 data = { oid: 0, col: "#000000", nam: "Geologic Time", children: [] },
interval_hash = { 0: data },
currentInterval,
dragStart, transformStart;
return {
"init": function(div) {
var w = 960,
h = 130,
x = d3.scale.linear().range([0, w - 5]),
y = d3.scale.linear().range([0, h]),
newX = 0.01;
var drag = d3.behavior.drag()
.origin(function() {
var t = d3.select(".timescale g");
return {x: -newX, y: 0};
})
.on("dragstart", function() {
dragStart = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY];
transformStart = d3.transform(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(transformStart[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", w)
.attr("height", h)
.append("g");
var scale = time.append("g")
.attr("id", "tickBar")
.attr("transform", "translate(0,125)");
// 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);
}
// Create a new d3 partition layout
var partition = d3.layout.partition()
.sort(function(d) { d3.ascending(d); })
.value(function(d) { return d.total; });
var rectGroup = time.append("g")
.attr("id", "rectGroup");
// Create the rectangles
rectGroup.selectAll("rect")
.data(partition.nodes(data))
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.dx); })
.attr("height", function(d) { return y(d.dy); })
.attr("fill", function(d) { return d.col || "#000000"; })
.attr("id", function(d) { return "t" + d.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(partition.nodes(data));
var hash = scaleBar.enter().append("g")
.attr("class", function(d) {return "tickGroup s" + d.lvl})
.attr("transform", function(d) { return "translate(" + x(d.x) + ", 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.eag == 0.0117) ? "end" : "middle"; })
.style("font-size", "0.65em")
.style("fill", "#777")
.text(function(d) {return d.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(partition.nodes(data))
.enter().append("svg:text")
.text(function(d) { return d.nam; })
.attr("x", 1)
.attr("y", function(d) { return y(d.y) + 15;})
.attr("width", function() { return this.getComputedTextLength(); })
.attr("height", function(d) { return y(d.dy); })
.attr("class", function(d) { return "fullName level" + d.lvl; })
.attr("id", function(d) { return "l" + d.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(partition.nodes(data))
.enter().append("svg:text")
.attr("x", 1)
.attr("y", function(d) { return y(d.y) + 15; })
.attr("width", 30)
.attr("height", function(d) { return y(d.dy); })
.text(function(d) { return d.abr || d.nam.charAt(0); })
.attr("class", function(d) { return "abbr level" + d.lvl; })
.attr("id", function(d) { return "a" + d.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();
// 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.nam === parent;
}).attr("x", 430);
d3.selectAll('.fullName').filter(function(d) {
return d.nam === parent;
}).attr("x", 430);
loc += ".parent";
}
d3.selectAll('.abbr').filter(function(d) {
return d.nam === parent;
}).attr("x", 430);
d3.selectAll('.fullName').filter(function(d) {
return d.nam === parent;
}).attr("x", 430);
}
},
"labelAbbrX": function(d) {
var rectWidth = parseFloat(d3.select("#t" + d.oid).attr("width")),
rectX = parseFloat(d3.select("#t" + d.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.oid).node().getComputedTextLength();
} catch(err) {
labelWidth = 11;
}
if (rectWidth - 8 < labelWidth) {
d3.select("#a" + d.oid).style("display", "none");
}
return rectX + (rectWidth - labelWidth) / 2;
},
"labelX": function(d) {
var rectWidth = parseFloat(d3.select("#t" + d.oid).attr("width")),
rectX = parseFloat(d3.select("#t" + d.oid).attr("x"));
var labelWidth;
try {
labelWidth = d3.select("#l" + d.oid).node().getComputedTextLength();
} catch(err) {
labelWidth = 25;
}
if (rectWidth - 8 < labelWidth) {
d3.select("#l" + d.oid).style("display", "none");
} else {
d3.select("#a" + d.oid).style("display", "none");
}
return rectX + (rectWidth - labelWidth) / 2;
},
"labelY": function(d) {
var rectHeight = parseFloat(d3.select("#t" + d.oid).attr("height")),
rectY = parseFloat(d3.select("#t" + d.oid).attr("y")),
labelHeight = d3.select("#l" + d.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.oid).attr("height")),
rectY = parseFloat(d3.select("#t" + d.oid).attr("y")),
labelHeight = d3.select("#l" + d.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.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,
x = d3.scale.linear().range([5, 955]);
x.domain([d.x, d.x + d.dx]);
// "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 (x(d.x) == 5) {
d3.select(this).select("text")
.style("text-anchor", "start");
} else if (x(d.x) == 955) {
d3.select(this).select("text")
.style("text-anchor", "end");
}
return "translate(" + x(d.x) + ", 0)";
});
// When complete, calls labelTrans()
d3.selectAll("rect").transition()
.duration(750)
.each(function(){ ++n; })
.attr("x", function(d) { return x(d.x); })
.attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
.each("end", function() { if (!--n) { timescale.labelTrans(d); }});
},
"labelTrans": function(d) {
// var n keeps track of the transition
var n = 0,
x = d3.scale.linear().range([0, 955]),
y = d3.scale.linear().range([0, 120]);
x.domain([d.x, d.x + d.dx]);
// Move the full names
d3.selectAll(".fullName").transition()
.duration(10)
.each(function(){ ++n; })
.attr("x", function(d) { return timescale.labelX(d); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
.each("end", function() { if (!--n) { timescale.labelLevels(d); }});
// Move the abbreviations
d3.selectAll(".abbr").transition()
.duration(300)
.each(function(){ ++n; })
.attr("x", function(d) { return timescale.labelAbbrX(d); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
.each("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
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment