31:T413, The [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. Read more on [the ICS website](https://stratigraphy.org/). ## Credits * [Macrostrat's geological timescale](https://github.com/UW-Macrostrat/geo-timescale) (MIT License). * [International Commission on Stratigraphy](https://stratigraphy.org/) * [Sequences Icicle](https://observablehq.com/@kerryrodden/sequences-icicle) by Kerry Rodden (Apache 2.0 License) * [Sequences Sunburst](https://gist.github.com/kerryrodden/7090426) by Kerry Rodden (Google Inc Apache 2.0 License) * [Zoomable Icicle](https://observablehq.com/@d3/zoomable-icicle) by Mike Bostock (ISC Licence)32:T403,breadcrumb = { const svg = d3 .create("svg") .attr("viewBox", `0 0 ${breadcrumbWidth * 10} ${breadcrumbHeight}`) .style("font", "14px sans-serif") .style("margin", "5px"); const g = svg .selectAll("g") .data(timescale.sequence) .join("g") .attr("transform", (d, i) => `translate(${i * breadcrumbWidth}, 0)`); g.append("polygon") .attr("points", breadcrumbPoints) .attr("fill", (d) => d.data.color) .attr("stroke", "white"); g.append("text") .attr("x", (breadcrumbWidth + 10) / 2) .attr("y", breadcrumbHeight / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("fill", (d) => d.data.textColor ?? "black") .text((d) => d.data.name); // svg // .append("text") // .text(timescale.percentage > 0 ? icicle.percentage + "%" : "") // .attr("x", (timescale.sequence.length + 0.5) * breadcrumbWidth) // .attr("y", breadcrumbHeight / 2) // .attr("dy", "0.35em") // .attr("text-anchor", "middle"); return svg.node(); }33:T185e,viewof timescale = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height + margins.bottom]) .style("font", font); const g = svg.append("g"); // Make this into a view, so that the currently hovered sequence is available to the breadcrumb const element = svg.node(); let focus = root; element.value = { selected: names[0], sequence: [] }; element.dispatchEvent(new CustomEvent("input")); let hideSmallTicks = true; const cellGroup = g.append("g").attr("id", "cells"); const cell = cellGroup .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); const rect = cell .append("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("fill", (d) => d.data.color) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("cursor", "pointer") .on("pointerenter", (event, d) => { // Get the ancestors of the current segment const sequence = d.ancestors().reverse(); // Highlight the ancestors cell.attr("fill-opacity", (d) => { return sequence.includes(d) ? 1.0 : 0.5; }); // Update the value of this view with the currently hovered sequence element.value = { ...element.value, sequence }; element.dispatchEvent(new CustomEvent("input")); }) .on("click", clicked); svg.on("pointerleave", () => { cell.attr("fill-opacity", 1); // Update the value of this view element.value = { ...element.value, sequence: [] }; element.dispatchEvent(new CustomEvent("input")); }); cell.append("title").text((d) => { const sequence = d .ancestors() .map((d) => d.data.name) .reverse(); return `${sequence.join(" > ")}`; }); const text = cell .append("text") .style("user-select", "none") .attr("pointer-events", "none") .attr("x", (d) => { const textX = (d.x1 - d.x0) / 2; return Number.isNaN(textX) ? -1000 : textX; // not sure checking NaN is necessary }) .attr("y", (d) => (d.y1 - d.y0) / 2) .attr("fill", (d) => d.data.textColor ?? "black") .attr("fill-opacity", labelVisible) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text((d) => { const rectWidth = d.x1 - d.x0; const labelWidth = getTextWidth(d.data.name, font); const abbrev = d.data.abr || d.data.name.charAt(0); return rectWidth - 10 < labelWidth ? abbrev : d.data.name; }); // Append ages ticks scale bar const ticksGroup = g .append("g") .attr("id", "ticks") .attr("transform", `translate(0,${height - margins.bottom})`); // Move tick group down ticksGroup.call((g) => ticks(g, makeTicksData(root), hideSmallTicks)); svg.call( d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([1, 8]) .on("zoom", zoomed) .on("end", () => { rect.attr("cursor", "pointer"); }) ); if (selectedInterval) { const matchNode = root.find((d) => d.data.name === selectedInterval); clicked(null, matchNode); } function clicked(event, p) { focus = p === focus ? p.parent : p; hideSmallTicks = [0, 1].includes(focus.depth); // sync input to clicked node if (event) { set(viewof selectInterval[0], [focus.data.name]); } const focusAncestors = focus.ancestors().slice(1); // Ignore clicked node itself element.value = { ...element.value, selected: focus.data.name }; element.dispatchEvent(new CustomEvent("input")); const t = event ? d3.transition().duration(450).ease(d3.easeCubicInOut) : null; // Can't transition when using input, bit of a hack // Show a bit of the neighbouring cells on focus of an interval const leftNeighbor = focus.data.start === root.data.start ? 0 : neighborWidth; const rightNeighbor = focus.data.end === root.data.end ? 0 : neighborWidth; const focusWidth = focus.x1 - focus.x0; // partition width of focused node root.each((d) => { const widthMinusNeighbors = width - rightNeighbor - leftNeighbor; const target = { x0: leftNeighbor + ((d.x0 - focus.x0) / focusWidth) * widthMinusNeighbors, x1: leftNeighbor + ((d.x1 - focus.x0) / focusWidth) * widthMinusNeighbors, y0: d.y0, y1: d.y1 }; d.target = target; }); // Reset drag g.transition(t).attr("transform", "translate(0,0)"); cell .transition(t) .attr("transform", (d) => `translate(${d.target.x0},${d.target.y0})`); rect .transition(t) .attr("width", (d) => d.target.x1 - d.target.x0) .attr("stroke", "white") .attr("stroke-width", 1); if (event) { d3.select(this) .transition(t) .attr("stroke", "black") .attr("stroke-width", 1.5); d3.select(this.parentNode).raise(); } text .transition(t) .attr("fill-opacity", (d) => focusAncestors.includes(d) ? 1 : labelVisible(d.target) ) .attr("x", (d) => { // Position all the ancestors labels in the middle if (focusAncestors.includes(d)) { return -d.target.x0 + width / 2; } const rectWidth = d.target.x1 - d.target.x0; const textX = rectWidth / 2; return Number.isNaN(textX) ? width / 2 : textX; }) .text((d) => { const rectWidth = d.target.x1 - d.target.x0; const labelWidth = getTextWidth(d.data.name, font); const abbrev = d.data.abr || d.data.name.charAt(0); return rectWidth - 8 < labelWidth ? abbrev : d.data.name; }); ticksGroup.call((g) => ticks(g, makeTicksData(root), hideSmallTicks, t)); } function zoomed(e) { if (!root.target) return; const translateX = e.transform.x; // Do not allow scrolling beyond left- and rightmost node // These conditions are not completely correct🚨 if ( translateX + root.target.x0 > 0 || root.x1 - translateX > root.target.x1 ) return; rect.attr("cursor", "grabbing"); g.attr("transform", `translate(${translateX},0)`); } return element; }34:T61c,ticks = (g, data, hideSmallTicks, t) => g .selectAll("g") .data(data) .join( (enter) => { const tick = enter .append("g") .attr("transform", (d) => `translate(${d.x}, 0)`) .attr("text-anchor", (d) => d.x === 0 ? "start" : d.x === width ? "end" : "middle" ) .attr("opacity", (d) => hiddenLevels.includes(d.depth) && hideSmallTicks ? 0 : 1 ); tick .append("line") .attr("stroke", "#555") .attr("stroke-width", 1) .attr("x1", 0) .attr("y1", 2) .attr("x2", 0) .attr("y2", (d) => margins.bottom - d.depth * tickLength); tick .append("text") .attr("x", 0) .attr("y", (d) => margins.bottom - d.depth * tickLength + 4) .attr("dominant-baseline", "hanging") .attr("font-size", (d) => `${1 - 0.05 * d.depth}em`) .text((d) => d.text) .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 2) .attr("stroke", "white"); }, (update) => update .transition(t) .attr("opacity", (d) => [4, 5].includes(d.depth) && hideSmallTicks ? 0 : 1 ) .attr("transform", (d) => `translate(${d.targetX}, 0)`) .attr("dominant-baseline", "hanging") .attr("text-anchor", (d) => d.targetX === 0 ? "start" : d.targetX === width ? "end" : "middle" ) )35:[{"id":"c6a68b626fc5910bfa405450b43aa31101bfa2fe0caaeda50af16202d61cfce06105fb0a750fc0f513d917825f904f86e6bd0209386c886da4257818073ee407","href":"https://static.observableusercontent.com/files/c6a68b626fc5910bfa405450b43aa31101bfa2fe0caaeda50af16202d61cfce06105fb0a750fc0f513d917825f904f86e6bd0209386c886da4257818073ee407","name":"intervals@2.json","type":"application/json","lastModified":1630752798162.185,"size":34012},{"id":"a10e5240c863e3054bd7fe3b77811f63497c868b4909a101a53dc5462e08c7c4789206906c7984918131012b34ae8b1daef3233012d85254b395d0632eade435","href":"https://static.observableusercontent.com/files/a10e5240c863e3054bd7fe3b77811f63497c868b4909a101a53dc5462e08c7c4789206906c7984918131012b34ae8b1daef3233012d85254b395d0632eade435","name":"intervals@3.json","type":"application/json","lastModified":1630784704834.452,"size":34012}] 2f:{"title":"Geological Time Scale 2021","cells":[{"id":1872,"value":"# Geological Time Scale 2021\n","pinned":false,"hidden":false,"mode":"md"},{"id":1428,"value":"

\n \n

This is an update and refactor of [UW-Macrostrat/geo-timescale](https://github.com/UW-Macrostrat/geo-timescale/), see the [GitHub repository](https://github.com/UW-Macrostrat/geo-timescale/issues/3).\n

\n\n

\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":2388,"value":"viewof selectInterval = Inputs.search(names, {\n value: names[0], // initial\n datalist: names,\n label: \"Go to interval\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":894,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2316,"value":"selectedInterval = selectInterval.length === 1 ? selectInterval[0] : null","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"makeTicksData = (root) => {\n const uniqueStartAges = new Set(\n root.descendants().map((node) => node.data.start)\n );\n\n const ticksData = Array.from(uniqueStartAges)\n .map((start) =>\n root.descendants().find((node) => node.data.start === start)\n )\n .map((d) => ({\n x: d.x0,\n depth: d.depth,\n targetX: d?.target?.x0 || 0,\n text: d.data.start\n }));\n\n const now = {\n x: root.x1,\n depth: 0,\n targetX: root?.target?.x1 || width,\n text: 0\n };\n\n ticksData.push(now);\n\n return ticksData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"labelVisible = (d) => +(d.x1 - d.x0 > 14)","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"// Via https://stackoverflow.com/questions/1636842/svg-get-text-element-width\nfunction getTextWidth(text, font) {\n // re-use canvas object for better performance\n var canvas =\n getTextWidth.canvas ||\n (getTextWidth.canvas = document.createElement(\"canvas\"));\n var context = canvas.getContext(\"2d\");\n context.font = font;\n var metrics = context.measureText(text);\n \n return metrics.width;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"// From https://observablehq.com/@kerryrodden/sequences-icicle by Kerry Rodden\n// Generate a string that describes the points of a breadcrumb SVG polygon.\nfunction breadcrumbPoints(d, i) {\n const tipWidth = 10;\n const points = [];\n points.push(\"0,0\");\n points.push(`${breadcrumbWidth},0`);\n points.push(`${breadcrumbWidth + tipWidth},${breadcrumbHeight / 2}`);\n points.push(`${breadcrumbWidth},${breadcrumbHeight}`);\n points.push(`0,${breadcrumbHeight}`);\n if (i > 0) {\n // Leftmost breadcrumb; don't include 6th vertex.\n points.push(`${tipWidth},${breadcrumbHeight / 2}`);\n }\n return points.join(\" \");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"// Create a new d3 partition layout\npartition = (data) =>\n d3\n .partition()\n .size([width, height - margins.bottom])\n .padding(0)(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1943,"value":"// https://observablehq.com/@observablehq/synchronized-inputs\nfunction set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n // input.dispatchEvent(new CustomEvent(\"input\"));\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1078,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1060,"value":"intervals = FileAttachment(\"intervals@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"names = intervals.map((d) => d.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"hierarchicalData = d3\n .stratify()(intervals)\n .sum((d) => (d.leaf ? d.start - d.end : 0))\n .sort((a, b) => b.start - a.start)","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"root = partition(hierarchicalData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":931,"value":"## Dimensions & Constants","pinned":false,"hidden":false,"mode":"md"},{"id":2084,"value":"hiddenLevels = [4, 5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"tickLength = margins.bottom / (root.height + 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"breadcrumbWidth = 120","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"breadcrumbHeight = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"font = `${fontSize}px sans-serif`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"neighborWidth = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"fontSize = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"margins = ({ bottom: 60 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1024,"value":"d3 = import(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2479,"value":"import { freelanceBanner } from \"@julesblm/freelance-banner\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2262,"value":"

To Do

🕷Bug clicking Holocene doesn't show top 2 levels
Nice to have: Vertical layout on narrow screen like [Sequences Icicle](https://observablehq.com/@kerryrodden/sequences-icicle)

","pinned":false,"hidden":false,"mode":"md"},{"id":1919,"value":"## Changes\n\n* Uses D3 v7\n* Refactored and simplified code\n* No longer makes uses of a scaleLinear\n* Better SVG structure (one interval label and rect are children of a cell group)\n* More idiomatic D3 code making a lot less use of DOM selection to make it work.\n* Latest ICS data\n* Addedd breadcrumbs\n* Highlight hovered interval and its ancestors\n","pinned":false,"hidden":false,"mode":"md"}],"files":"$W35","stdlib":"1","titling":"auto"}