A modular D3.js-based geologic time scale that utilizes data from the Paleobiology Database. The repo can be found here.
Last active
January 18, 2021 21:02
-
-
Save jczaplew/7546689 to your computer and use it in GitHub Desktop.
Geologic Time Scale
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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]} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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