31:T1474,function timescale(b_age, t_age, w, h) { //Define an svg, dimensions are defined by the svgWidth and svgHeight cells below const svg = d3 .create("svg") .attr("width", w + 100) .attr("height", h + 10); //.attr("transform", "translate(0,20)"); //Filter the full data by the age range specified in the b_age and t_age cells var intervalsInAgeRange = intervals.records .filter(({ end }) => end <= b_age) .filter(({ start }) => start >= t_age) .concat(intervals.records.filter(({ name }) => name === "Geologic Time")); for (let i = 0; i < intervalsInAgeRange.length; i++) { if (intervalsInAgeRange[i].end < t_age) { intervalsInAgeRange[i].end = t_age; } if (intervalsInAgeRange[i].start > b_age) { intervalsInAgeRange[i].start = b_age; } } //D3.stratify figures out parent-child relationships based on id fields in the data and also assigns rectangle specs and colors to each block. This data is used for drawing the rectangles var rootFromIntervalsInRange = d3 .stratify() .id(d => d.id) .parentId(d => d.parentId)(intervalsInAgeRange); partition( rootFromIntervalsInRange.sum(d => (d.level === 5 ? d.start - d.end : 0)) ); //generates vertices for each rectangle, overwrites rootFromIntervalsInRange ////Draw colored rectangles for the geologic periods const rectGroup = svg.append("g").attr("id", "rectGroup"); const cell = rectGroup .selectAll("rect") .data(rootFromIntervalsInRange.descendants()) .join("rect") //The coordinates used to draw the rectangles and fill color come from d3.stratify. Check the rootFromIntervasInRange cell below .attr("y", d => svgHeight - d.x1) //x and y are switched here to position the rectangles vertically .attr("x", d => d.y0) .attr("stroke", "#fff") .attr("cursor", "pointer") .attr("stroke-width", "1px") .attr("height", d => d.x1 - d.x0) //height and width are switched here to position the rectangles vertically .attr("width", d => d.y1 - d.y0) .attr("fill", d => d.data.color) .attr("id", d => `t${d.data.id}`) .style("opacity", 0.83); //Append a title element to the rectgroup to display on mouseover cell.append("title").text( d => `${d .ancestors() .map(d => d.data.name) .reverse() .join(" > ")}` ); // Label Rectangles const textGroup = svg.append("g").attr("id", "textGroup"); //yield svg.node(); //Full Names - print this if the rectangle is large enough textGroup .selectAll("fullName") .data(rootFromIntervalsInRange.descendants()) .enter() .append("text") .text(d => d.data.name) .attr("width", function() { return this.getComputedTextLength(); }) .attr("height", d => d.y1 - d.y0) .attr("x", d => d.y0 - 40) .attr("y", d => centerY(d) + 5) .attr( "transform", d => "rotate(-90 " + centerX(d) + " " + centerY(d) + " )" ) .attr("class", d => `fullName level${d.depth}`) .attr("id", d => `l${d.data.id}`) .style("display", d => hideLongLabels(d)); // Abbreviated names - use these for the smaller rectangles textGroup .selectAll("abbrevs") .data(rootFromIntervalsInRange.descendants()) .enter() .append("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("x", d => d.y0 + 5) .attr("y", d => centerY(d) + 5) .attr("transform", d => "rotate(-90 " + centerX(d) + " " + centerY(d) + ")") .style("display", d => hideLongAbbrvs(d)); // Add a scale bar const scale = svg .append("g") .attr("id", "tickBar") .attr("transform", `translate(${svgWidth},0)`); //Create array with age data for each rectangle to make the scalebar const uniqueAgesSet = new Set( rootFromIntervalsInRange.descendants().map(node => node.data.start) ); const uniqueAgesArray = Array.from(uniqueAgesSet).map(start => rootFromIntervalsInRange .descendants() .find(node => node.data.start === start) ); const scaleBar = scale.selectAll("rect").data(uniqueAgesArray); // Position scale bar to the right of the rectangles const hash = scaleBar .enter() .append("g") .attr("class", d => `tickGroup s${d.depth}`) .attr("transform", d => `translate(0, ${svgHeight - d.x0})`); //Add stroke lines to scalebar - longer strokes for the older generations, shorter strokes for children hash .append("line") .attr("stroke", "#777") .attr("y1", 0) .attr("x1", 5) .attr("y2", 0) .attr("x2", d => 52 - d.depth * 8) .style("stroke-width", d => "0.05em"); //Add labels to scalebar hash .append("text") .attr("y", 5) .attr("x", d => 70 - d.depth * 8) .style("fill", "#00000") .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") // .style("fill", "#ffffff") .text(d => d.data.start); return svg.node(); }32:[] 2f:{"title":"Vertical Geological Timescale","cells":[{"id":0,"value":"md`# Vertical Geological Timescale\n\nA vertical version of the [Geological Timescale by julesblm](https://observablehq.com/@julesblm/geological-timescale), without the interactive features.
\n(Need to fix the overlapping text labels)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"md `Enter the age range to display:`","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"b_age = 800 //Start age","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"t_age=0 //Termination age","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"timescale(b_age, t_age, svgWidth, svgHeight)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"html`` ","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"svgHeight=1010 ","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"svgWidth=150","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"//Returns the x coordinate of the center of the rectangle \nfunction centerX(d) { \n const centerX= d.y0+(((d.y1)-(d.y0))/2);\n return centerX;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"//Returns the y coordinate of the center of the rectangle\nfunction centerY(d) {\n const centerY= svgHeight-d.x1+(((d.x1)-(d.x0))/2);\n return centerY;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"//If the rectangle is too narrow, there isn't enough room for the label - return none for display style\nfunction hideLongLabels(d) {\n const rectWidth = (d.x1) - (d.x0);\n let response = \"\";\n if (rectWidth < 120) {\n response = \"none\";\n }\n return (response);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"//If the rectangle is too wide, the full sze label will be printed - hide the abbreviation - return none for display style\n//If the rectangle is too narrow for an abbreviation - return none for display style\nfunction hideLongAbbrvs(d) {\n const rectWidth = (d.x1) - (d.x0);\n let response = \"\";\n if (rectWidth > 120) {\n response = \"none\";\n }\n if (rectWidth < 20) {\n response = \"none\";\n }\n return (response);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"partition = d3.partition()\n .size([svgHeight, svgWidth])\n .padding(0);","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":" //D3.stratify figures out parent-child relationships based on id fields in the data and also assigns rectangle specs and colors to each block. This data is used for drawing the rectangles\nrootFromIntervalsInRange_test = d3.stratify()\n .id(d => d.id)\n .parentId(d => d.parentId )(intervalsInAgeRange_test); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"//Filter the full data by the age range specified in the b_age and t_age cells\nintervalsInAgeRange_test = intervals.records\n .filter(({ end }) => end <= 168)\n .filter(({ start }) => start >= 0)\n .concat(intervals.records.filter(({ name }) => name === \"Geologic Time\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"test2={\n var arr=intervalsInAgeRange_test;\n for (let i=0; i b_age){arr[i].start=b_age;}\n }\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"//Geological time scale data\nintervals=d3.json('https://gist.githubusercontent.com/JulesBlm/12ca086ddee2fa38a92ef6c89fc631e6/raw/e957b8894d565ec12bd0eb0ab0b0dd291c392785/intervals.json')","pinned":false,"hidden":false,"mode":"ojs"},{"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 === \"nam\" || \"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"},{"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"},{"id":142,"value":"import {form} from \"@mbostock/form-input\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}