28:null 29:["$","title",null,{"children":"Geological Time Scale | Jules Blom | Observable"}] 2e:T193b,timescale = { let x; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height + 60]) .style("font", "10px sans-serif"); // Move whole tick SVG group down const scale = svg .append("g") .attr("id", "tickBar") .attr("transform", `translate(0,${height})`); x = d3.scaleLinear().range([5, width - 5]); // Create a new d3 partition layout const partition = d3.partition().size([width, height]).padding(0); const root = d3 .stratify() .id((d) => d.id) .parentId((d) => d.parentId)(intervals.records) .sum((d) => (d.level === 5 ? d.start - d.end : 0)); // Using level is not ideal partition(root); const rectGroup = svg.append("g").attr("id", "rectGroup"); const cell = rectGroup .selectAll("rect") .data(root.descendants()) .join("rect") .attr("x", (d) => d.x0) .attr("y", (d) => d.y0) .attr("stroke", "#fff") .attr("cursor", "pointer") .attr("stroke-width", "1px") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("fill", (d) => d.data.color) .attr("id", (d) => `t${d.data.id}`) .style("opacity", 0.83) .on("click", goTo); cell.append("title").text( (d) => `${d .ancestors() .map((d) => d.data.name) .reverse() .join(" > ")}` ); const uniqueAgesSet = new Set( root.descendants().map((node) => node.data.start) ); const uniqueAgesArray = Array.from(uniqueAgesSet).map((start) => root.descendants().find((node) => node.data.start === start) ); // Scale bar for the bottom of the graph const scaleBar = scale.selectAll("rect").data(uniqueAgesArray); const hash = scaleBar .join("g") .attr("class", (d) => `tickGroup s${d.depth}`) .attr("transform", (d) => `translate(${d.x0}, 0)`); hash .append("line") .attr("stroke", "#777") .attr("x1", 0) .attr("y1", 7.5) .attr("x2", 0) .attr("y2", (d) => 52 - d.depth * 8) .style("stroke-width", (d) => "0.05em"); hash .append("text") .attr("x", 0) .attr("y", (d) => 60 - d.depth * 8) .style("text-anchor", "middle") .style("font-size", (d) => `${1 - 0.08 * d.depth}em`) .attr("paint-order", "stroke") .attr("stroke-width", "1.5px") .attr("stroke", "#fff") .attr("stroke-linecap", "butt") .attr("stroke-linejoin", "miter") .text((d) => d.data.start); const textGroup = svg.append("g").attr("id", "textGroup"); // Add the full labels textGroup .selectAll("text.fullName") .data(root.descendants()) .join("text") .text((d) => d.data.name) .attr("width", function () { return this.getComputedTextLength(); }) .attr("height", (d) => d.y1 - d.y0) .attr("y", (d) => d.y0 + 15) .attr("x", labelX) .attr("class", (d) => `fullName level${d.depth}`) .attr("id", (d) => `l${d.data.id}`) .on("click", goTo); // Add the abbreviations textGroup .selectAll("text") .data(root.descendants()) .join("text") .text((d) => d.data.abr || d.data.name.charAt(0)) .attr("width", 30) .attr("height", (d) => d.y1 - d.y0) .attr("class", (d) => `abbr level${d.depth}`) .attr("id", (d) => `a${d.data.id}`) .attr("y", (d) => d.y0 + 15) .attr("x", labelAbbrX) .on("click", goTo); yield svg.node(); if (names.includes(selectPeriod["select-period"].trim())) { goToName(selectPeriod["select-period"].trim()); } function labelX(d) { const rectWidth = x(d.x1) - x(d.x0), rectX = x(d.x0); let labelWidth; try { labelWidth = svg.select(`#l${d.data.id}`).node().getComputedTextLength(); //this? } catch (err) { labelWidth = 25; } if (rectWidth - 8 < labelWidth) { svg.select(`#l${d.data.id}`).style("display", "none"); // Hide full name } else { svg.select(`#a${d.data.id}`).style("display", "none"); // Hide abbreviation } return rectX + (rectWidth - labelWidth) / 2; } function labelAbbrX(d) { const rectWidth = x(d.x1) - x(d.x0), rectX = x(d.x0); const abbrevWidth = svg .select(`#a${d.data.id}`) .node() .getComputedTextLength(); if (rectWidth - 8 < abbrevWidth) { svg.select(`#a${d.data.id}`).style("display", "none"); } return rectX + (rectWidth - abbrevWidth) / 2; } function goToName(d) { d = searchTree(root, "name", d); goTo(d); } function goTo(d) { // Reset all abbrevs and fullNames svg.selectAll(".fullName, .abbr").style("display", "block"); x = d3 .scaleLinear() .range([5, width - 5]) .domain([d.x0, d.x1]); // Define transition for concurrent animation const t = d3.transition().duration(300).ease(d3.easeLinear); // Hide lowest two time labels if (d.depth === 0 || d.depth === 1) { svg.selectAll(`.s5, .s4`).transition(t).style("display", "none"); } else { svg.selectAll(`.s5, .s4`).transition(t).style("display", "block"); } // Transition the rectangles svg .selectAll("rect") .transition(t) .attr("x", (d) => x(d.x0)) .attr("width", (d) => x(d.x1) - x(d.x0)); // Transition tick groups svg .selectAll(".tickGroup") .transition(t) .attr("transform", function (d) { d3.select(this).selectAll("text").style("text-anchor", "middle"); if (x(d.x0) === 5) { d3.select(this).select("text").style("text-anchor", "start"); } else if (x(d.x0) === width) { d3.select(this).select("text").style("text-anchor", "end"); } return `translate(${x(d.x0)}, 0)`; }); // Move the full names, svg .selectAll(".fullName") .transition(t) .attr("x", (d) => labelX(d)) .attr("height", (d) => d.y1 - d.y0); // Move the abbreviations svg .selectAll(".abbr") .transition(t) .attr("x", (d) => labelAbbrX(d)) .attr("height", (d) => d.y1 - d.y0); // Center whichever interval was clicked svg .select(`#l${d.data.id}`) .transition(t) .attr("x", width / 2); // Position all the ancestors labels in the middle of the scale if (d.parent) { const ancestors = d.ancestors(); ancestors.forEach((ancestor) => { svg .select(`#l${ancestor.id}, #a${ancestor.id}`) .transition(t) .attr("x", width / 2); }); } } return svg.node(); }2f:[] 2c:{"id":"bba5bcff3636901f","slug":"geological-timescale","title":"Geological Time Scale","thumbnail":"c3b3844d565d80264372d888b1a2249388402b53ef12b2ad852267f64d18c457","access_level":"public","create_time":"$D2019-09-08T18:33:03.479Z","update_time":"$D2022-03-04T14:13:46.334Z","view_time":null,"first_public_time":"$D2019-09-08T19:49:31.446Z","has_unpublished_edits":null,"fork":false,"stars":40,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":400,"publish_version":400,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null}],"members":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"title":"Geological Time Scale","cells":[{"id":383,"value":"# Geological Time Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"

\n \n

See the [new & improved 2021 version](/@julesblm/geological-time-scale-2021)

\n\n

\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"\n\n\nThe [ICS](http://www.stratigraphy.org/) geological time scale divides the Earth's history into intervals that relate to geological strata. The boundaries between intervals are usually significant events in the history of the Earth like mass extinction events or changes in climate. The primary defined divisions of time are eons. Eons are divided into eras, which are in turn divided into periods, epochs and ages.\n\n## Credits\nBased on [Macrostrat's timescale](https://github.com/UW-Macrostrat/geo-timescale). Observabled, updated and tweaked by me.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof selectPeriod = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"intervals=d3.json('https://gist.githubusercontent.com/JulesBlm/12ca086ddee2fa38a92ef6c89fc631e6/raw/e957b8894d565ec12bd0eb0ab0b0dd291c392785/intervals.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"names = intervals.records.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 160","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Via https://stackoverflow.com/questions/9133500/how-to-find-a-node-in-a-tree-with-javascript\nfunction searchTree(node, property, match){\n if (property === \"name\" || \"id\" || \"mid\" || \"end\" || \"\") {\n if (node.data[property] === match){\n return node;\n } else if (node.children != null){\n let result = null;\n for (let i=0; result === null && i < node.children.length; i++) {\n result = searchTree(node.children[i], property, match);\n }\n return result;\n }\n return null;\n } else {\n console.warn(\"Property can't be used to search\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"// Via https://stackoverflow.com/questions/38224875/replacing-d3-transform-in-d3-v4\nfunction getTranslation(transform) {\n // Create a dummy g for calculation purposes only. This will never\n // be appended to the DOM and will be discarded once this function \n // returns.\n const g = document.createElementNS(\"http://www.w3.org/2000/svg\", \"g\");\n\n // Set the transform attribute to the provided string value.\n g.setAttributeNS(null, \"transform\", transform);\n\n // consolidate the SVGTransformList containing all transformations\n // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get\n // its SVGMatrix. \n const matrix = g.transform.baseVal.consolidate().matrix;\n\n // As per definition values e and f are the ones for the translation.\n return [matrix.e, matrix.f];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"// TODO make small hierarchy of the divisions\n// divisions = [\"Eons\", \"Era\", \"Epoch\", \"Ages\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"import {form} from \"@mbostock/form-input\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@v5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"