31:T3312,// fast rendering, performance still not optimal zoomableV6 = { let t1 = performance.now(); let data = authPaths//.slice(0,10) // paths.filter((d) => d.size > 0); const canvas = document.createElement("canvas"); const resolution = 2,maxCanvasWidth = 512; const textSize = 7; const textPointers = []; // Specify the chart’s dimensions. const height = 1024; const radius = height / 6.6; // Create the color scale. const color = d3.scaleOrdinal( d3.quantize(d3.interpolateSinebow, topics.size + 7) ); // Convert paths to hierarchy const hierarchy = d3.stratify().path((d) => d.path)(data); hierarchy .sum((d) => Math.pow(d?.freq, Math.max(0.000001, weight))) .sort((a, b) => b.value - a.value); const root = d3.partition().size([2 * Math.PI, hierarchy.height + 1])( hierarchy ); //root.each(d => d.current = d); // only added for readability..? const f = d3.format(".4f"); // Create the arc generator. const arc = d3.arc() .startAngle(d => (d.x0)) .endAngle(d => (d.x1)) .padAngle(d => (Math.min((d.x1 - d.x0) / 2, 0.005))) .padRadius((radius * 1.5)) .innerRadius(d =>( d.y0 * radius)) .outerRadius(d =>(Math.max(d.y0 * radius, d.y1 * radius - 1))) // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) .attr("image-rendering","optimizeSpeed") .classed("burstview", true); const defs = svg.append("defs"); // Beware: not scoped.. const style = ` `; defs.html(); let chunkGroup = defs.append("g").attr("id", "text-chunks"); let offsetGroup = defs.append("g").attr("id", "text-offsets"); const format = d3.format(",d"); const g = svg .append("g") .attr("id", "main") // .attr("text-rendering", "optimizeSpeed") .style("font", "10px sans-serif"); //.style("transform","rotatex(-45deg) rotateZ(-45deg) translateZ(-1em)") //.style("transform-style","preserve-3d") // Append the arcs with hover interactions const path = g .append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", (d) => { // mutate data once instead of root.each() ? d.current = d; d.label = d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")"; while (d.depth > 1) d = d.parent; return color(d.id.split("/").pop()); }) .attr("fill-opacity", (d) => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.current) ? "auto" : "none")) .attr("d", (d) => arc(d.current)) path.on("mouseover", showPath).on("mouseout", function (event, d) { // Restore arc opacity d3.select(this).attr("opacity", 1); // OPTIONAL: Hide the central label // centralLabel.select("text").style("opacity", 0); }); // Make them clickable if they have children. path .filter((d) => d.children) .style("cursor", "pointer") .on("click", clicked); path.append("title").text( (d) => `$${d .ancestors() .map((d, n) => d.id.split("/").at(-1)) .reverse() .join("/")}\n${format(d.value)}` ); // opacity is performance hog const label = g.append("g") // .attr("id","labels") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectChildren() .data(root.descendants().slice(1)) .join("rect") // predefine label at group level // .attr("width",10).attr("height",10).attr("x",-5).attr("y",-5) // debugging .attr("fill-opacity", d=> +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)) .classed("lq",d=>!labelVisible(d.current)) /*const vector = label.append("text") .attr("font-size",textSize) .attr("dy", "0.35em") .text(d=>d.label) // .classed('hq',true) // .style("display","none")*/ /*const uses = label.append("svg").attr("id", (_, i) => `rendered-text-${i}`);*/ label.call(function (sel) { //let target = uses.nodes(); let data = sel.data(); let text = data.map((d) => d.label); let rendered = renderTextToCanvasChunks(text, { size: textSize, resolution, maxCanvasWidth, gap: 10 }); let chunks = chunkGroup .selectChildren() .data(rendered) .join("image") .attr("id", (_, i) => `v6-chunk-${i}`) .attr("href", (d) => d.dataURL) .attr("width", (d) => d.chunkWidth) .attr("height", (d) => d.chunkHeight) // .attr("x",0).attr("y",0) // .attr("image-rendering", "optimizeSpeed") .attr("preserveAspectRatio","xMaxYMax meet") // .attr("width", 1) // .attr("height", 1); // .attr("patternUnits","userSpaceOnUse") let t1 = performance.now(); chunks.each(function (chunk, ci) { // let t1 = performance.now() textPointers.push((textPointers.at(-1) ?? 0) + chunk.textObjects.length); // You can't splice... only slice or filter // let clips = d3.selectAll(target.splice(0,textPointers.at(-1) - (textPointers.at(-2) ?? 0) - 1)) // let clips = d3.selectAll(target.slice((textPointers.at(-2) ?? 0), textPointers.at(-1))) // Filter and assign textMetrics on label subgroups based on textPointer offsets let subgroup = sel.filter( (d, i) => { if(i >= (textPointers.at(-2) ?? 0) && i < textPointers.at(-1)) { Object.assign(d, { metrics: chunk.textObjects[i - (textPointers.at(-2) ?? 0)] }) return true } else { return false } } ) .attr("fill", (d)=> `url(#v6-offset-${d.metrics.id})`) .attr("width", item=> item.metrics.width) .attr("height", chunk.chunkHeight) .attr("x", item=> -item.metrics.width/2) .attr("y", item=> -item.metrics.height/2) // Create a unique pattern 'view' by negatively offsetting 'use' elements let clips = d3.create('svg:pattern') // !!! Never forget to declare NS .selectChildren() .data(subgroup.data()) .join("pattern") .attr("id",(d)=>`v6-offset-${d.metrics.id}`) // Squeezes the pattern somewhat to prevent bleeding edges // Pattern offset method .attr("width",1.1) .attr("height",1.1) // Pattern viewBox method // .attr("viewBox",item=> `${item.metrics.offset},${0},${item.metrics.width},${chunk.chunkHeight}`) // .attr("width",1) // .attr("height",1) // No scaling method // .attr("width",chunk.chunkWidth) // .attr("height",chunk.chunkHeight) // .attr("patternUnits","userSpaceOnUse") // .attr("patternContentUnits","objectBoundingBox"); let uses = clips.append("use").attr("href",`#v6-chunk-${ci}`).attr("x",d=>-d.metrics.offset).attr("y",0) //.append("rect") .attr("width",10).attr("height",10)//.attr("x",-5).attr("y",-5) // debugging offsetGroup.node().append(...clips.nodes()) }); }); // console.log(chunkGroup.node()) // Add a central label group for displaying the hovered cell label (can be merged with the above)? const centralLabel = g .append("g") .attr("class", "central-label") .attr("text-anchor", "middle") //.attr("pointer-events", "none") .style("user-select", "none"); const parent = g .append("circle") .datum(root) .attr("class", "hitbox") .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); let currentDepth = 0; // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); // track depth let depth = d3.select(event.target).datum().depth; if (depth + currentDepth == 0) { return; } else if (depth == 0 && currentDepth > 0) { --currentDepth; } else { currentDepth = depth; } root.each( (d) => (d.target = { x0:Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1:Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }) ); // Single transition overridden for arcs and labels separately const t = svg.transition().duration(event.altKey ? 7500 : 800); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path .transition(t) .tween("data", (d) => { const i = d3.interpolate(d.current, d.target); return (t) => (d.current = i(t)); }) .filter(function (d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", (d) => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.target) ? "auto" : "none")) .attrTween("d", (d) => () => arc(d.current)); // Transition labels label // hide all labels except source -> target => TO DO: merge interrupted transition selections .classed("lq", d=> !(labelVisible(d.current) || labelVisible(d.target))) .transition(t) .filter(function (d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }) .attr("fill-opacity", (d,i) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)) // causes issues on fast clicking t.on("start", (event) => svg.classed("tweening", true)); t.on("end", (event) => svg.classed("tweening", null)); } // Handle central label display function showPath(event, d) { // Lower the arc's opacity d3.select(this).attr("opacity", 0.5); // Clear any existing tspans in the central label centralLabel.selectAll("text").remove(); // Split the full path into segments const pathSegments = d.id .replace("/", "") .replaceAll("/", "/ v /") .split("/") .filter((d) => d); const lineHeight = 1.2; // Line height in em units const totalHeight = pathSegments.length * lineHeight; // Create a new text element for the central label const labelText = centralLabel .append("text") // Adjust vertical position to center the entire block .attr( "y", ("-" + (totalHeight / 2 - lineHeight) + "em").replace(/\-\-.*/, "") ) // '--0...em quickfix' .attr("font-size", "20px") .attr("fill", "#000") .style("opacity", 1); // Make the label visible // Add each segment as a tspan pathSegments.forEach((segment, i) => { labelText .append("tspan") .attr("x", 0) // Align all tspans horizontally .attr("dy", i === 0 ? "0em" : `${lineHeight}em`) // Add spacing between lines .text(segment); }); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { let visible = d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.035; return visible; } function labelTransform(d) { const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = ((d.y0 + d.y1) / 2) * radius; return `rotate(${(x - 90).toFixed(1)}) translate(${y.toFixed(0)},0) rotate(${x < 180 ? 0 : 180})`; } // Final view setup let pane = focus(svg.attr("transform-origin", "center")).attr("viewBox", [ -height / 2, -height / 2, height, height ]); let gap = -1; pane .insert("rect", "#main") .attr("id", "bg") .attr("x", "-1000%") .attr("y", "-1000%") .attr("width", "2000%") .attr("height", "2000%") .attr("fill", "white"); pane.attr( "style", ` padding: ${gap}px; width: ${width - gap * 2}; max-width: ${width - gap * 2}; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transform-origin: center; user-select: none; max-height: 820px; filter: invert(90%) sepia(7%) contrast(125%) brightness(175%); ` ); let time; // console.log(pane.html()) pane = pane.node(); return { time: ((time = performance.now() - t1), console.log("V6 Rendered in", time), time), pane }.pane; }32:T2ee2,// Texts rendered as SVG with a viewbox over a rect filled with pattern zoomableV5 = { let t1 = performance.now(); let data = authPaths; // paths.filter((d) => d.size > 0); const canvas = document.createElement("canvas"); const resolution = 2; const textSize = 7; const textPointers = []; // Specify the chart’s dimensions. const height = 1024; const radius = height / 6.6; // Create the color scale. const color = d3.scaleOrdinal( d3.quantize(d3.interpolateSinebow, topics.size + 7) ); // Convert paths to hierarchy const hierarchy = d3.stratify().path((d) => d.path)(data); hierarchy .sum((d) => Math.pow(d?.freq, Math.max(0.000001, weight))) .sort((a, b) => b.value - a.value); const root = d3.partition().size([2 * Math.PI, hierarchy.height + 1])( hierarchy ); //root.each(d => d.current = d); // only added for readability..? // Create the arc generator. const arc = d3 .arc() .startAngle((d) => d.x0) .endAngle((d) => d.x1) .padAngle((d) => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius((d) => d.y0 * radius) .outerRadius((d) => Math.max(d.y0 * radius, d.y1 * radius - 1)); // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) // .attr("text-rendering","optimizeSpeed") .classed("burstview", true); const defs = svg.append("defs"); // Beware: not scoped.. const style = ` `; defs.html(style); let chunkGroup = defs.append("g").attr("id", "text-chunks"); const format = d3.format(",d"); const g = svg .append("g") .attr("id", "main") .attr("text-rendering", "optimizeSpeed") .style("font", "10px sans-serif"); //.style("transform","rotatex(-45deg) rotateZ(-45deg) translateZ(-1em)") //.style("transform-style","preserve-3d") // Append the arcs with hover interactions const path = g .append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", (d) => { // mutate data once instead of root.each() ? d.current = d; d.label = d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")"; while (d.depth > 1) d = d.parent; return color(d.id.split("/").pop()); }) .attr("fill-opacity", (d) => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.current) ? "auto" : "none")) .attr("d", (d) => arc(d.current)); path.on("mouseover", showPath).on("mouseout", function (event, d) { // Restore arc opacity d3.select(this).attr("opacity", 1); // OPTIONAL: Hide the central label // centralLabel.select("text").style("opacity", 0); }); // Make them clickable if they have children. path .filter((d) => d.children) .style("cursor", "pointer") .on("click", clicked); path.append("title").text( (d) => `$${d .ancestors() .map((d, n) => d.id.split("/").at(-1)) .reverse() .join("/")}\n${format(d.value)}` ); // opacity is performance hog const label = g .append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectChildren() .data(root.descendants().slice(1)) .join("g") // predefine label at group level .attr("fill-opacity", d=> +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)) .classed("lq", d=> !labelVisible(d.current)) /*const vector = label.append("text") .attr("font-size",textSize) .attr("dy", "0.35em") .text(d=>d.label) // .classed('hq',true) // .style("display","none")*/ const uses = label.append("svg").attr("id", (_, i) => `rendered-text-${i}`); label.call(function (sel) { let target = uses.nodes(); let data = sel.data(); let text = data.map((d) => d.label); let rendered = renderTextToCanvasChunks(text, { size: textSize, resolution, gap: 1 }); let chunks = chunkGroup .selectChildren() .data(rendered) .join("pattern") .attr("id", (_, i) => "chunk" + (i + 0)) .attr("width", 1) .attr("height", 1); // .attr("width", (d) => d.chunkWidth) // .attr("height", (d) => d.chunkHeight) // .attr("patternUnits","userSpaceOnUse") let textures = chunks .append("image") .attr("href", (d) => d.dataURL) .attr("width", (d) => d.chunkWidth) .attr("height", (d) => d.chunkHeight) .attr("image-rendering", "optimizeSpeed"); let t1 = performance.now(); chunks.each(function (chunk, ci) { // let t1 = performance.now() textPointers.push((textPointers.at(-1) ?? 0) + chunk.textObjects.length); // You can't splice... only slice or filter // let clips = d3.selectAll(target.splice(0,textPointers.at(-1) - (textPointers.at(-2) ?? 0) - 1)) // let clips = d3.selectAll(target.slice((textPointers.at(-2) ?? 0), textPointers.at(-1))) // Filter and assign textMetrics based on textPointer offsets let clips = uses.filter( (d, i) => { if(i >= (textPointers.at(-2) ?? 0) && i < textPointers.at(-1)) { Object.assign(d, { metrics: chunk.textObjects[i - (textPointers.at(-2) ?? 0)] }) return true } else { return false } } ).attr("viewBox",item=>`${item.metrics.offset},0,${item.metrics.width},${chunk.chunkHeight}`) .attr("width", item=> item.metrics.width) .attr("height", chunk.chunkHeight+1) .attr("x", item=> -item.metrics.width/2) .attr("y", item=> -item.metrics.height/2) //.style("display", d=> labelVisible(d.current) ? "unset" : "none") let rects = clips.append("rect") .attr("fill",`url(#chunk${ci})`) .attr("width",chunk.chunkWidth) .attr("height",chunk.chunkHeight) .attr("fill-opacity", d=> +labelVisible(d.current)) }); }); // console.log(label.data()) // Add a central label group for displaying the hovered cell label (can be merged with the above)? const centralLabel = g .append("g") .attr("class", "central-label") .attr("text-anchor", "middle") //.attr("pointer-events", "none") .style("user-select", "none"); const parent = g .append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); let currentDepth = 0; // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); // track depth let depth = d3.select(event.target).datum().depth; if (depth + currentDepth == 0) { return; } else if (depth == 0 && currentDepth > 0) { --currentDepth; } else { currentDepth = depth; } root.each( (d) => (d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }) ); // Single transition overridden for arcs and labels separately const t = svg.transition().duration(event.altKey ? 7500 : 750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path .transition(t) .tween("data", (d) => { const i = d3.interpolate(d.current, d.target); return (t) => (d.current = i(t)); }) .filter(function (d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", (d) => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.target) ? "auto" : "none")) .attrTween("d", (d) => () => arc(d.current)); // Transition labels label .classed("lq", d=> !(labelVisible(d.current) || labelVisible(d.target))) .transition(t) .filter(function (d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }) .attr("fill-opacity", (d) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)) .selectAll('rect') .attr("fill-opacity", (d) => +labelVisible(d.target)) // causes issues on fast clicking t.on("start", (event) => svg.classed("tweening", true)); t.on("end", (event) => svg.classed("tweening", null)); } // Handle central label display function showPath(event, d) { // Lower the arc's opacity d3.select(this).attr("opacity", 0.5); // Clear any existing tspans in the central label centralLabel.selectAll("text").remove(); // Split the full path into segments const pathSegments = d.id .replace("/", "") .replaceAll("/", "/ v /") .split("/") .filter((d) => d); const lineHeight = 1.2; // Line height in em units const totalHeight = pathSegments.length * lineHeight; // Create a new text element for the central label const labelText = centralLabel .append("text") // Adjust vertical position to center the entire block .attr( "y", ("-" + (totalHeight / 2 - lineHeight) + "em").replace(/\-\-.*/, "") ) // '--0...em quickfix' .attr("font-size", "20px") .attr("fill", "#000") .style("opacity", 1); // Make the label visible // Add each segment as a tspan pathSegments.forEach((segment, i) => { labelText .append("tspan") .attr("x", 0) // Align all tspans horizontally .attr("dy", i === 0 ? "0em" : `${lineHeight}em`) // Add spacing between lines .text(segment); }); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { let visible = d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; return visible; } function labelTransform(d) { const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = ((d.y0 + d.y1) / 2) * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } // Final view setup let pane = focus(svg.attr("transform-origin", "center")).attr("viewBox", [ -height / 2, -height / 2, height, height ]); let gap = -1; pane .insert("rect", "#main") .attr("id", "bg") .attr("x", "-1000%") .attr("y", "-1000%") .attr("width", "2000%") .attr("height", "2000%") .attr("fill", "white"); pane.attr( "style", ` padding: ${gap}px; width: ${width - gap * 2}; max-width: ${width - gap * 2}; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transform-origin: center; user-select: none; max-height: 820px; filter: invert(90%) sepia(7%) contrast(125%) brightness(175%); ` ); let time; // console.log(pane.html()) pane = pane//.node(); return { time: ((time = performance.now() - t1), console.log("V5 Rendered in", time), time), pane }//.pane; }33:T296f,zoomableV4 = { let t1 = performance.now() let data = authPaths // paths.filter((d) => d.size > 0); const canvas = document.createElement('canvas') const resolution = 2; const textSize = 7; const textPointers = []; // Specify the chart’s dimensions. const height = 1024; const radius = height / 6.6 ; // Create the color scale. const color = d3.scaleOrdinal( d3.quantize(d3.interpolateSinebow, topics.size +7) ); // Convert paths to hierarchy const hierarchy = d3 .stratify() .path((d) => d.path)(data) hierarchy .sum(d=>Math.pow(d?.freq,Math.max(0.000001,weight))) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); //root.each(d => d.current = d); // only added for readability..? // Create the arc generator. const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) // .attr("text-rendering","optimizeSpeed") .classed("burstview",true) const defs = svg.append("defs"); // Beware: not scoped.. const style = (` `); defs.html(style); let chunkGroup = defs.append('g').attr("id","text-chunks") const format = d3.format(",d"); const g = svg.append("g") .attr("id","main") .attr("text-rendering","optimizeSpeed") .style("font", "10px sans-serif") //.style("transform","rotatex(-45deg) rotateZ(-45deg) translateZ(-1em)") //.style("transform-style","preserve-3d") // Append the arcs with hover interactions const path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { // mutate data once instead of root.each() ? d.current = d d.label = d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")" while (d.depth > 1) d = d.parent; return color(d.id.split('/').pop()); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)) path.on("mouseover", showPath) .on("mouseout", function (event, d) { // Restore arc opacity d3.select(this).attr("opacity",1); // OPTIONAL: Hide the central label // centralLabel.select("text").style("opacity", 0); }); // Make them clickable if they have children. path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); path.append("title") .text(d => `$${d.ancestors().map((d,n) => d.id.split('/').at(-1)).reverse().join("/")}\n${format(d.value)}`); // opacity is performance hog const label = g.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectChildren() .data(root.descendants().slice(1)) .join("g") // predefine label at group level .attr("opacity", (d) => +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)) /*const vector = label.append("text") .attr("font-size",textSize) .attr("dy", "0.35em") .text(d=>d.label) // .classed('hq',true) // .style("display","none")*/ const uses = label.append("svg") .attr("id",(_,i)=>`rendered-text-${i}`) label.call(function (sel) { let target = uses.nodes(); let data = sel.data(); let text = data.map((d) => d.label); let rendered = renderTextToCanvasChunks(text, { size: textSize, resolution:0.75, gap:1, }); let chunks = chunkGroup .selectChildren() .data(rendered) .join("image") .attr("id", (_, i) => "chunk" + (i + 0)) .attr("href", (d) => d.dataURL) .attr("width", (d) => d.chunkWidth) .attr("height", (d) => d.chunkHeight) .attr("image-rendering", "optimizeSpeed"); let t1 = performance.now(); chunks.each(function (chunk,ci) { // let t1 = performance.now() textPointers.push((textPointers.at(-1)??0)+chunk.textObjects.length) // You can't splice... only slice or filter //let clips = d3.selectAll(target.splice(0,textPointers.at(-1) - (textPointers.at(-2) ?? 0) - 1)) let clips = d3.selectAll(target.slice((textPointers.at(-2) ?? 0), textPointers.at(-1))) //let clips = uses.filter((d,i)=> i >= (textPointers.at(-2) ?? 0) && i <= textPointers.at(-1) /*+1*/) .data(chunk.textObjects) .attr("viewBox",item=>`${item.offset},0,${item.width},${chunk.chunkHeight}`) .attr("width", item=> item.width) .attr("height", chunk.chunkHeight) .attr("x", item=> -item.width/2) .attr("y", item=> -item.height/2) .append("use").attr("href",`#chunk${ci}`) }); }); // console.log(uses.nodes().map(d=>d.outerHTML)) // Add a central label group for displaying the hovered cell label (can be merged with the above)? const centralLabel = g.append("g") .attr("class", "central-label") .attr("text-anchor", "middle") //.attr("pointer-events", "none") .style("user-select", "none"); const parent = g.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); let currentDepth = 0 // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); // track depth let depth = d3.select(event.target).datum().depth if(depth + currentDepth ==0) { return } else if(depth == 0 && currentDepth > 0) { --currentDepth } else { currentDepth = depth; } root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); // Single transition overridden for arcs and labels separately const t = svg.transition().duration(event.altKey ? 7500 : 750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); // Transition labels label.transition(t) .filter(function (d) { return +this.getAttribute("opacity") || labelVisible(d.target); }) .attr("opacity", (d) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)) // causes issues on fast clicking t.on("start",(event)=> svg.classed('tweening',true)) t.on("end",(event)=> svg.classed('tweening',null)) } // Handle central label display function showPath(event, d) { // Lower the arc's opacity d3.select(this).attr("opacity", 0.5); // Clear any existing tspans in the central label centralLabel.selectAll("text").remove(); // Split the full path into segments const pathSegments = d.id .replace("/", "") .replaceAll("/", "/ v /") .split("/") .filter((d) => d); const lineHeight = 1.2; // Line height in em units const totalHeight = pathSegments.length * lineHeight; // Create a new text element for the central label const labelText = centralLabel .append("text") // Adjust vertical position to center the entire block .attr("y", ("-" + (totalHeight / 2 - lineHeight) + "em").replace(/\-\-.*/,'')) // '--0...em quickfix' .attr("font-size", "20px") .attr("fill", "#000") .style("opacity", 1); // Make the label visible // Add each segment as a tspan pathSegments.forEach((segment, i) => { labelText .append("tspan") .attr("x", 0) // Align all tspans horizontally .attr("dy", i === 0 ? "0em" : `${lineHeight}em`) // Add spacing between lines .text(segment); }); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { let visible = d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; return visible; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } // Final view setup let pane = focus(svg.attr('transform-origin', 'center')) .attr('viewBox', [-height / 2, -height / 2, height, height]); let gap = -1; pane.insert('rect', '#main') .attr('id', 'bg') .attr('x', '-1000%') .attr('y', '-1000%') .attr('width', '2000%') .attr('height', '2000%') .attr('fill', 'white'); pane.attr('style', ` padding: ${gap}px; width: ${width - (gap * 2)}; max-width: ${width - (gap * 2)}; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transform-origin: center; user-select: none; max-height: 820px; filter: invert(90%) sepia(7%) contrast(125%) brightness(175%); `); let time; // console.log(pane.html()) pane = pane//.node() return { time: (time=performance.now()-t1,// console.log("Rendered in",time), time), pane }//.pane } 34:T2c2a,zoomableV3 = { let t1 = performance.now() let data = authPaths // paths.filter((d) => d.size > 0); const canvas = document.createElement('canvas') const resolution = 2; const textSize = 7; const textPointers = []; // Specify the chart’s dimensions. const height = 1024; const radius = height / 6.6 ; // Create the color scale. const color = d3.scaleOrdinal( d3.quantize(d3.interpolateSinebow, topics.size +7) ); // Convert paths to hierarchy const hierarchy = d3 .stratify() .path((d) => d.path)(data) hierarchy .sum(d=>Math.pow(d?.freq,Math.max(0.000001,weight))) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); //root.each(d => d.current = d); // only added for readability..? // Create the arc generator. const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) // .attr("text-rendering","optimizeSpeed") .classed("burstview",true) const defs = svg.append("defs"); // Beware: not scoped.. const style = (` `); defs.html(style); let chunkGroup = defs.append('g').attr("id","text-chunks") let offsetGroup = defs.append('g').attr("id","text-offsets") const format = d3.format(",d"); const g = svg.append("g") .attr("id","main") .attr("text-rendering","optimizeSpeed") .style("font", "10px sans-serif") //.style("transform","rotatex(-45deg) rotateZ(-45deg) translateZ(-1em)") //.style("transform-style","preserve-3d") // Append the arcs with hover interactions const path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { // mutate data once instead of root.each() ? d.current = d while (d.depth > 1) d = d.parent; return color(d.id.split('/').pop()); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)) path.on("mouseover", showPath) .on("mouseout", function (event, d) { // Restore arc opacity d3.select(this).attr("opacity",1); // OPTIONAL: Hide the central label // centralLabel.select("text").style("opacity", 0); }); // Make them clickable if they have children. path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); path.append("title") .text(d => `$${d.ancestors().map((d,n) => d.id.split('/').at(-1)).reverse().join("/")}\n${format(d.value)}`); const label = g.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectChildren() .data(root.descendants().slice(1)) .join("g") .attr("opacity", (d) => +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)) const vector = label.append("text") .attr("font-size",textSize) .attr("dy", "0.35em") .text(d=>(d.label= d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")")) // .classed('hq',true) // .style("display","none") const uses = label.append("use") .attr("id",(_,i)=>`rendered-text-${i}`) label.call(function (sel) { let t1 = performance.now(); let data = sel.data(); let text = data.map((d) => d.label); let rendered = renderTextToCanvasChunks(text, { size: textSize, resolution, gap:2, }); let chunks = chunkGroup .selectChildren() .data(rendered) .join("image") .attr("id", (_, i) => "chunk" + (i + 0)) .attr("href", (d) => d.dataURL) .attr("width", (d) => d.chunkWidth) .attr("height", (d) => d.chunkHeight) // .attr("image-rendering", "optimizeSpeed"); //.attr("preserveAspectRatio", "xMidYMid meet"); // Preserve aspect ratio // each and .data dont play nice when associating data to external groups // so use vanilla .append instead chunks.each(function (chunk,ci) { //let flat = all.data().flatMap((d,i)=>d.textObjects) // console.log([...offsetGroup]) let offsetNode = d3 .create('svg:g') .selectChildren() .data( chunk.textObjects /*.slice(0,2)*/ /*=> to check inner group binding*/ ) .join("g"); let clip = offsetNode .append("clipPath") .attr("id", (d, i) => "textCrop" + (d.id + 0)) .attr("opacity",1) // .attr("clipPathUnits","objectBoundingBox") clip .append("rect") .attr("x",d=>d.offset) .attr("width", (d) => d.width) .attr("height", chunk.chunkHeight) .attr("fill", "black"); offsetGroup.node().append(...offsetNode.nodes()); // console.log(clip.nodes().map(d=>d.outerHTML)) //console.log(offsetNode.nodes().length) //group.each(clip=>textPointers.push(ci)) textPointers.push((textPointers.at(-1)??0)+chunk.textObjects.length) }); }); uses.attr("href",(_,i)=> `#chunk${textPointers.findIndex(p=> p > i)}`) .attr("clip-path", (d, i) => `url(#textCrop${i})`) //.attr("filter", (d, i) => `url(#textOffset${i})`) .attr("x", (d,i)=>(d.metrics = defs.select(`#textCrop${i}`).datum(),-d.metrics.offset -d.metrics.width/2)) .attr("y", (d,i)=>-d.metrics.height/2) .classed("lq",true) vector.remove() // console.log(uses.nodes().map(d=>d.outerHTML)) // Add a central label group for displaying the hovered cell label (can be merged with the above)? const centralLabel = g.append("g") .attr("class", "central-label") .attr("text-anchor", "middle") //.attr("pointer-events", "none") .style("user-select", "none"); const parent = g.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); let currentDepth = 0 // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); // track depth let depth = d3.select(event.target).datum().depth if(depth + currentDepth ==0) { return } else if(depth == 0 && currentDepth > 0) { --currentDepth } else { currentDepth = depth; } root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); // Single transition overridden for arcs and labels separately const t = svg.transition().duration(event.altKey ? 7500 : 750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); // Transition labels label.transition(t) .filter(function (d) { return +this.getAttribute("opacity") || labelVisible(d.target); }) .attr("opacity", (d) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)) // causes issues on fast clicking t.on("start",(event)=> svg.classed('tweening',true)) t.on("end",(event)=> svg.classed('tweening',null)) } // Handle central label display function showPath(event, d) { // Lower the arc's opacity d3.select(this).attr("opacity", 0.5); // Clear any existing tspans in the central label centralLabel.selectAll("text").remove(); // Split the full path into segments const pathSegments = d.id .replace("/", "") .replaceAll("/", "/ v /") .split("/") .filter((d) => d); const lineHeight = 1.2; // Line height in em units const totalHeight = pathSegments.length * lineHeight; // Create a new text element for the central label const labelText = centralLabel .append("text") // Adjust vertical position to center the entire block .attr("y", ("-" + (totalHeight / 2 - lineHeight) + "em").replace(/\-\-.*/,'')) // '--0...em quickfix' .attr("font-size", "20px") .attr("fill", "#000") .style("opacity", 1); // Make the label visible // Add each segment as a tspan pathSegments.forEach((segment, i) => { labelText .append("tspan") .attr("x", 0) // Align all tspans horizontally .attr("dy", i === 0 ? "0em" : `${lineHeight}em`) // Add spacing between lines .text(segment); }); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { let visible = d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; return visible; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } // Final view setup let pane = focus(svg.attr('transform-origin', 'center')) .attr('viewBox', [-height / 2, -height / 2, height, height]); let gap = -1; pane.insert('rect', '#main') .attr('id', 'bg') .attr('x', '-1000%') .attr('y', '-1000%') .attr('width', '2000%') .attr('height', '2000%') .attr('fill', 'white'); pane.attr('style', ` padding: ${gap}px; width: ${width - (gap * 2)}; max-width: ${width - (gap * 2)}; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transform-origin: center; user-select: none; max-height: 820px; filter: invert(90%) sepia(7%) contrast(125%) brightness(175%); `); let time; // console.log(pane.html()) pane = pane//.node() return { time: (time=performance.now()-t1,//console.log("Rendered in",time), time), pane } } 35:T3308,zoomableV1 = { let t1 = performance.now() let data = authPaths // paths.filter((d) => d.size > 0); const canvas = document.createElement('canvas') const resolution = 3//text rendering resolution const TextRenderer = new TextRenderQueueV2(3,2) const textSize = 10; const textMap = window.textMap = (window.textMap ?? new Map()); // => be sure not to destroy at the wrong time when using ObjectURL links instead of Data URLs // => probably better to implement caching on the TextRender class itself invalidation.then(()=>TextRenderer.destroy()) // Specify the chart’s dimensions. const height = 1024; const radius = height / 6.6 ; // Create the color scale. const color = d3.scaleOrdinal( d3.quantize(d3.interpolateSinebow, topics.size +7) ); // Convert paths to hierarchy const hierarchy = d3 .stratify() .path((d) => d.path)(data) hierarchy .sum(d=>Math.pow(d?.freq,Math.max(0.000001,weight))) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); root.each(d => d.current = d); const f = d3.format(".3f"); // Create the arc generator. const arc = d3.arc() .startAngle(d => f(d.x0)) .endAngle(d => f(d.x1)) .padAngle(d => f(Math.min((d.x1 - d.x0) / 2, 0.005))) .padRadius(f(radius * 1.5)) .innerRadius(d =>f( d.y0 * radius)) .outerRadius(d =>f(Math.max(d.y0 * radius, d.y1 * radius - 1))) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) .attr("text-rendering","optimizeSpeed") .classed("burstview",true) const defs = svg.append("defs"); const style = (` `); defs.html(style) const format = d3.format(",d"); const g = svg.append("g").attr("id","main") .attr("text-rendering","optimizeSpeed") .style("font", "10px sans-serif") //.style("transform","rotatex(-45deg) rotateZ(-45deg) translateZ(-1em)") //.style("transform-style","preserve-3d") // Append the arcs with hover interactions const path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.id.split('/').pop()); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)) .on("mouseover", showPath) .on("mouseout", function (event, d) { // Restore arc opacity d3.select(this).attr("opacity",1); // OPTIONAL: Hide the central label // centralLabel.select("text").style("opacity", 0); }); // Make them clickable if they have children. path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); path.append("title") .text(d => `$${d.ancestors().map((d,n) => d.id.split('/').at(-1)).reverse().join("/")}\n${format(d.value)}`); const label = g .append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("g") .data(root.descendants().slice(1)) .join(asyncEnter) function syncEnter(enter) { let root = enter .append("g") .attr("opacity", (d) => +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)); let vector = root .append("text") .attr("dy", "0.35em") .attr("font-size", textSize) .text( (d) => d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")" ) .classed("hq",true) // TODO: rasterise nodes during build.. -> to textures? // Even better: async render nodes, and have the .join(update=> ...) reflect the availability of rendered nodes let text = root .append("image") .attr("xlink:href", (d) => { let textContent = d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")"; let render = renderText(textContent, { canvas, size: textSize, resolution }); d.w = render.width / resolution; d.h = render.height / resolution; return render.data; }) //.attr("preserveAspectRatio", "xMidYMid meet") .attr("width", (d) => d.w) .attr("height", (d) => d.h) .attr("x", (d) => -d.w / 2) .attr("y", (d) => -(d.h / 2) + 1) .classed("lq", true); return root; } function asyncEnter(enter) { let t1 = performance.now() let root = enter .append("g") .attr("opacity", (d) => +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)); let vector = root .append("text") .attr("dy", "0.35em") .attr("font-size", textSize) .text( //"" (d) => d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")" ) .classed("hq", true); // TODO: rasterise nodes during build.. -> to textures? // Even better: async render nodes, and have the .join(update=> ...) reflect the availability of rendered nodes let text = root.append("image") //.attr("xlink:href", "") .attr("image-rendering","optimizeSpeed") .attr("preserveAspectRatio", "xMidYMid meet") // Preserve aspect ratio .classed("lq", true) // Method 1 .call(async function(d) { const data = d.data(); const nodes = d.nodes(); const size = data.length; let list = /*await Promise.all*/(data.map(d=> { const textContent = d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")"; return textMap.has(textContent+resolution) ? textMap.get(textContent+resolution) : TextRenderer.render(textContent, { size: textSize, resolution }); } ))//.then(data=> { let i = 0 //data.forEach((render,i)=>{ for await (const render of list) { if(!textMap.has(render.textContent+resolution)) { textMap.set(render.textContent+resolution,render) } let node = nodes[/*parseInt(render.id)*/ i]; // cache miss when using render.id somehow node.setAttribute("href",render/*.data*/.link) node.setAttribute("width",render.width / resolution) node.setAttribute("height",render.height / resolution) node.setAttribute("x",-render.width / (2 * resolution)) node.setAttribute("y",-(render.height / (2 * resolution)) + 1) vector._groups[0][/*parseInt(render.id)*/i].remove() i++; }//) console.log("TextNodes Rendered in", ~~(performance.now()-t1)) // TextRenderer.destroy(); }) // }) // Method 2: Is this iterated NxN? /*text.each(async function (d, i) { const textContent = d.id.split("/").pop().slice(0, 24) + " (" + format(d.value) + ")"; const render = await TextRenderer.render(textContent, { size: textSize, resolution }); // Update low-quality image d3.select(this) .attr("xlink:href", render.data) .attr("width", render.width / resolution) .attr("height", render.height / resolution) .attr("x", -render.width / (2 * resolution)) .attr("y", -(render.height / (2 * resolution)) + 1); // Update high-quality text //vector._groups[0][i].textContent = textContent; });*/ return root; } // Add a central label group for displaying the hovered cell label (can be merged with the above)? const centralLabel = g.append("g") .attr("class", "central-label") .attr("text-anchor", "middle") //.attr("pointer-events", "none") .style("user-select", "none"); const parent = g.append("circle") .datum(root) .attr("class", "hitbox") .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); let currentDepth = 0 // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); // track depth let depth = d3.select(event.target).datum().depth if(depth + currentDepth ==0) { return } else if(depth == 0 && currentDepth > 0) { --currentDepth } else { currentDepth = depth; } root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); // Single transition overridden for arcs and labels separately const t = svg.transition().duration(event.altKey ? 7500 : 750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); // Transition labels // Note: labels are groups now label.transition(t) .filter(function (d) { return +this.getAttribute("opacity") || labelVisible(d.target); }) .attr("opacity", (d) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)); t.on("start",(event)=> svg.classed('tweening',true)) t.on("end",(event)=> svg.classed('tweening',null)) } // Handle central label display function showPath(event, d) { // Lower the arc's opacity d3.select(this).attr("opacity", 0.5); // Clear any existing tspans in the central label centralLabel.selectAll("text").remove(); // Split the full path into segments const pathSegments = d.id .replace("/", "") .replaceAll("/", "/ v /") .split("/") .filter((d) => d); const lineHeight = 1.2; // Line height in em units const totalHeight = pathSegments.length * lineHeight; // Create a new text element for the central label const labelText = centralLabel .append("text") // Adjust vertical position to center the entire block .attr("y", ("-" + (totalHeight / 2 - lineHeight) + "em").replace(/\-\-.*/,'')) // '--0...em quickfix' .attr("font-size", "20px") .attr("fill", "#000") .style("opacity", 1); // Make the label visible // Add each segment as a tspan pathSegments.forEach((segment, i) => { labelText .append("tspan") .attr("x", 0) // Align all tspans horizontally .attr("dy", i === 0 ? "0em" : `${lineHeight}em`) // Add spacing between lines .text(segment); }); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { let visible = d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; return visible; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${(x - 90).toFixed(1)}) translate(${y.toFixed(0)},0) rotate(${x < 180 ? 0 : 180})`; } // Final view setup let pane = focus(svg.attr('transform-origin', 'center')) .attr('viewBox', [-height / 2, -height / 2, height, height]); let gap = -1; pane.insert('rect', 'g') .attr('id', 'bg') .attr('x', '-1000%') .attr('y', '-1000%') .attr('width', '2000%') .attr('height', '2000%') .attr('fill', 'white'); pane.attr('style', ` padding: ${gap}px; width: ${width - (gap * 2)}; max-width: ${width - (gap * 2)}; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transform-origin: center; user-select: none; max-height: 820px; filter: invert(90%) sepia(7%) contrast(125%) brightness(175%); `); let time; pane = pane.node(); return { time: ((time = performance.now() - t1), // console.log("Rendered in",time), time), pane }.pane; }36:T16e4,/** * Function to handle focus and zoom behavior for an SVG element. * @param {d3.Selection} svg - The SVG element to apply focus and zoom behavior. * @param {Object} options - Optional configuration object. * @param {Function} options.end - Callback function to execute when zoom ends. */ function focus(svg, { end = () => {} } = {}) { // Select the 'g' element within the SVG and initialize pointer coordinates. const g = svg.select("#main"); const pointer = { x: 0, y: 0 }; let scaleExtent = [0.25,32] // Set attributes for the SVG element and extract viewBox dimensions. const [x, y, w, h] = svg .attr("tabindex", 0) .attr("focusable", "true") .attr("viewBox") .split(/\,| /); // Define constants for precision and initialize D3 zoom behavior. const res = 10 ** 3; const div = 10 ** -3; const zoom = d3.zoom().interpolate(d3.interpolate); // Store references to text nodes and their replacement rects. let textNodes = []; let rectReplacements = []; let lod = g.append('g') /** * Replaces text nodes with rectangles for performance optimization. */ function replaceTextWithRects() { textNodes = g.selectAll(".optimize").nodes(); // Store all text nodes. if (textNodes.length === 0) return; // Create rectangles to replace text nodes. rectReplacements = textNodes.map((textNode) => { const bbox = textNode.getBBox(); // Get bounding box of the text node. return lod .append("rect") .attr("x", bbox.x) .attr("y", bbox.y+bbox.height/2) .attr("width", bbox.width) .attr("height", bbox.height/2) .attr("transform",textNode.getAttribute('transform')) .style("display",textNode.getAttribute('fill-opacity') == 1 ? null : 'none' ) .attr("fill-opacity",textNode.getAttribute('fill-opacity')) //.attr("shape-rendering","optimizeSpeed") .attr("fill", "#333") // Match the text color. .node(); }); // Hide the original text nodes. g.selectAll(".optimize").style("display", "none"); } /** * Restores the original text nodes and removes rectangles. */ function restoreTextNodes() { if (rectReplacements.length === 0) return; // Remove the replacement rectangles. // rectReplacements.forEach((rect) => rect.remove()); lod.html(""); rectReplacements = []; // Restore the visibility of the original text nodes. g.selectAll(".optimize").style("display", null); } // Configure zoom behavior with extent, scale extent, and event listeners. svg.call( zoom .extent([ [0, 0], [w, h], ]) .scaleExtent(scaleExtent) .on("start", ({ sourceEvent }) => { svg.classed("zooming", /*sourceEvent?.type &&*/ sourceEvent?.type !== "touchstart" && sourceEvent?.type !== "mousedown"); // replaceTextWithRects(); // Replace text nodes with rects at the start of zooming. }) .on("zoom", ({ transform }) => { g.attr("transform", transform); }) .on("end", () => { svg.classed("zooming", null); // restoreTextNodes(); // Restore text nodes at the end of zooming. end(); // optional after zoom callback }) ); // Apply initial zoom scale and bind additional event listeners. svg.call(zoom.scaleBy, 1); svg.on("dblclick.zoom blur", resetZoom); svg.on("pointermove", (e) => { pointer.x = d3.pointer(e, g.node())[0]; pointer.y = d3.pointer(e, g.node())[1]; }); /** * Resets the zoom transformation to its identity state. * @param {Event} event - The triggering event. */ function resetZoom(event) { event.stopPropagation(); svg .transition() .duration(450) .call(zoom.transform, d3.zoomIdentity); } // Handle keyboard navigation and zoom control. svg.on("keydown", (event) => { event.preventDefault(); event.stopPropagation(); const step = 16; // Step size for arrow key translations. const key = event.key || event.keyCode; // Support for older browsers (e.g., Safari). // Issue: backspace sometimes interupted by other .on handlers switch (key) { case "Escape": case "Backspace": case "Esc": case 27: svg.select('.hitbox').dispatch("click"); svg .transition() .duration(1250) .call( zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0) ); break; case "0": svg .transition() .duration(750) .call( zoom.interpolate(d3.interpolate).transform, d3 .zoomIdentity .translate(w / 2, h / 2) .scale(5) .translate(pointer.x * -1 / 1.125, pointer.y * -1 / 1.125) ); break; case "+": case "=": case 187: svg .transition() .duration(450) .call(zoom.scaleBy, 2, [0, 0]); break; case "-": case 189: svg .transition() .duration(450) .call(zoom.scaleBy, 0.5, [0, 0]); break; case "ArrowLeft": case "Left": case 37: svg.call(zoom.translateBy, step, 0); break; case "ArrowRight": case "Right": case 39: svg.call(zoom.translateBy, -step, 0); break; case "ArrowUp": case "Up": case 38: svg.call(zoom.translateBy, 0, step); break; case "ArrowDown": case "Down": case 40: svg.call(zoom.translateBy, 0, -step); break; case "Enter": svg.node().parentElement.requestFullscreen(); break; default: console.log(`Key pressed: '${key}'`); } }); return svg; }37:T1748,function inertiaFocus(svg, { end = () => {} } = {}) { const g = svg.select("g"); const pointer = { x: 0, y: 0 }; const [x, y, w, h] = svg .attr("tabindex", 0) .attr("focusable", "true") .attr("viewBox") .split(/\,| /); const res = 10 ** 3; const div = 10 ** -3; const zoom = d3.zoom().interpolate(d3.interpolate); let textNodes = []; let rectReplacements = []; let lod = g.append('g'); function replaceTextWithRects() { textNodes = g.selectAll(".optimize").nodes(); if (textNodes.length === 0) return; rectReplacements = textNodes.map((textNode) => { const bbox = textNode.getBBox(); return lod .append("rect") .attr("x", bbox.x) .attr("y", bbox.y + bbox.height / 2) .attr("width", bbox.width) .attr("height", bbox.height / 2) .attr("transform", textNode.getAttribute('transform')) .style("display", textNode.getAttribute('fill-opacity') == 1 ? null : 'none') .attr("fill-opacity", textNode.getAttribute('fill-opacity')) .attr("fill", "#333") .node(); }); g.selectAll(".optimize").style("display", "none"); } function restoreTextNodes() { if (rectReplacements.length === 0) return; lod.html(""); rectReplacements = []; g.selectAll(".optimize").style("display", null); } svg.call( zoom .extent([ [0, 0], [w, h], ]) .scaleExtent([0.5, 32]) .on("start", ({ sourceEvent }) => { svg.classed("zooming", sourceEvent?.type !== "touchstart" && sourceEvent?.type !== "mousedown"); }) .on("zoom", ({ transform }) => { g.attr("transform", transform); }) .on("end", () => { svg.classed("zooming", null); end(); }) ); svg.call(zoom.scaleBy, 1); svg.on("dblclick.zoom blur", resetZoom); svg.on("pointermove", (e) => { pointer.x = d3.pointer(e, g.node())[0]; pointer.y = d3.pointer(e, g.node())[1]; }); function resetZoom(event) { event.stopPropagation(); svg .transition() .duration(450) .call(zoom.transform, d3.zoomIdentity); } // State for key presses and velocities const keyState = { ArrowLeft: false, ArrowRight: false, ArrowUp: false, ArrowDown: false, }; const velocity = { x: 0, y: 0 }; const acceleration = 0.5; // Acceleration per frame const friction = 0.95; // Deceleration factor let animationFrameId = null; function updatePanning() { if ( keyState.ArrowLeft || keyState.ArrowRight || keyState.ArrowUp || keyState.ArrowDown ) { // Update velocity based on key states if (keyState.ArrowLeft) velocity.x += acceleration; if (keyState.ArrowRight) velocity.x -= acceleration; if (keyState.ArrowUp) velocity.y += acceleration; if (keyState.ArrowDown) velocity.y -= acceleration; // Apply translation svg.call(zoom.translateBy, velocity.x, velocity.y); } else { // Apply friction to slow down velocity.x *= friction; velocity.y *= friction; // Stop animation if velocity is near zero if (Math.abs(velocity.x) < 0.1 && Math.abs(velocity.y) < 0.1) { velocity.x = 0; velocity.y = 0; return; } // Apply translation svg.call(zoom.translateBy, velocity.x, velocity.y); } // Continue animation loop animationFrameId = requestAnimationFrame(updatePanning); } svg.on("keydown", (event) => { event.preventDefault(); event.stopPropagation(); const key = event.key || event.keyCode; switch (key) { case "Escape": case "Backspace": case "Esc": case 27: svg .transition() .duration(1250) .call( zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0) ); break; case "0": svg .transition() .duration(750) .call( zoom.interpolate(d3.interpolate).transform, d3 .zoomIdentity .translate(w / 2, h / 2) .scale(5) .translate(pointer.x * -1 / 1.125, pointer.y * -1 / 1.125) ); break; case "+": case "=": case 187: svg .transition() .duration(450) .call(zoom.scaleBy, 2, [0, 0]); break; case "-": case 189: svg .transition() .duration(450) .call(zoom.scaleBy, 0.5, [0, 0]); break; case "ArrowLeft": case "Left": case 37: keyState.ArrowLeft = true; if (!animationFrameId) updatePanning(); break; case "ArrowRight": case "Right": case 39: keyState.ArrowRight = true; if (!animationFrameId) updatePanning(); break; case "ArrowUp": case "Up": case 38: keyState.ArrowUp = true; if (!animationFrameId) updatePanning(); break; case "ArrowDown": case "Down": case 40: keyState.ArrowDown = true; if (!animationFrameId) updatePanning(); break; case "Enter": svg.node().parentElement.requestFullscreen(); break; default: console.log(`Key pressed: '${key}'`); } }); svg.on("keyup", (event) => { const key = event.key || event.keyCode; switch (key) { case "ArrowLeft": case "Left": case 37: keyState.ArrowLeft = false; break; case "ArrowRight": case "Right": case 39: keyState.ArrowRight = false; break; case "ArrowUp": case "Up": case 38: keyState.ArrowUp = false; break; case "ArrowDown": case "Down": case 40: keyState.ArrowDown = false; break; } }); return svg; }38:T1bad,// include inertial pan + zoom (optimised: partial d3 transition fix -> still interrupts when switching between keyboard/touch) function focus5(svg, { end = () => {} } = {}) { var g = svg.select("g"), pointer = { x: 0, y: 0 }; // Use hardware-accelerated CSS properties g.style("will-change", "transform"); let [x, y, w, h] = svg .attr("tabindex", 0) .attr("focusable", "true") .attr("viewBox") .split(/\,| /) .map(Number); let zoom = d3.zoom().interpolate(d3.interpolate); // --- Native Physics Mirror --- // Tracks state directly to avoid reading from the DOM/D3 in the loop let state = { x: 0, y: 0, k: 1 }; svg .call( zoom .extent([ [0, 0], [w, h] ]) .scaleExtent([0.5, 32]) .on("start", ({ sourceEvent }) => { // If a user drags/pinches via mouse/touch, ingest the current state if (sourceEvent) { const t = d3.zoomTransform(svg.node()); state.x = t.x; state.y = t.y; state.k = t.k; } }) .on("zoom", ({ sourceEvent, transform }) => { svg.classed("zooming", sourceEvent?.type !== "touchstart"); // FIX: Always keep local state mirrors in sync with D3's internal transform matrix. // If sourceEvent is null/undefined, it means D3's programmatic transition is driving. state.x = transform.x; state.y = transform.y; state.k = transform.k; // Fast hardware-accelerated rendering string g.style( "transform", `translate3d(${state.x}px, ${state.y}px, 0px) scale(${state.k})` ); }) .on("end", () => (svg.classed("zooming", null), end())) ) .call(zoom.scaleBy, 1); svg.on("dblclick.zoom blur", resetZoom); svg.on("pointermove", (e) => { pointer = d3.pointer(e, g.node()); }); function resetZoom(event) { event.stopPropagation(); svg.transition().duration(450).call(zoom.transform, d3.zoomIdentity); } // --- Inertia State Variables --- let velocity = { x: 0, y: 0 }; let vZoom = 0; let keysActive = { Up: 0, Down: 0, Left: 0, Right: 0, ZoomIn: 0, ZoomOut: 0 }; let animFrameId = null; // --- Constants for Tuning --- const FRICTION = 0.9; const ACCELERATION = 2.5; const STOP_THRESHOLD = 0.05; const ZOOM_FRICTION = 0.85; const ZOOM_ACCELERATION = 0.005; const ZOOM_STOP_THRESHOLD = 0.0002; // --- Core Inertial Loop --- function updateInertia() { let ax = -(keysActive.Right - keysActive.Left) * ACCELERATION; let ay = -(keysActive.Down - keysActive.Up) * ACCELERATION; let az = (keysActive.ZoomIn - keysActive.ZoomOut) * ZOOM_ACCELERATION; velocity.x += ax; velocity.y += ay; vZoom += az; velocity.x *= FRICTION; velocity.y *= FRICTION; vZoom *= ZOOM_FRICTION; let totalSpeed = Math.sqrt( velocity.x * velocity.x + velocity.y * velocity.y ); let absZoomSpeed = Math.abs(vZoom); if ( totalSpeed > STOP_THRESHOLD || absZoomSpeed > ZOOM_STOP_THRESHOLD || ax !== 0 || ay !== 0 || az !== 0 ) { svg.classed("zooming", true); // 1. Zoom Math (Pure Local Execution) if (absZoomSpeed > ZOOM_STOP_THRESHOLD || az !== 0) { let factor = 1 + vZoom; let nextScale = state.k * factor; if (nextScale < 0.5) { factor = 0.5 / state.k; nextScale = 0.5; } if (nextScale > 32) { factor = 32 / state.k; nextScale = 32; } let cx = 0; // w / 2; let cy = 0; // h / 2; // Matrix scale arithmetic relative to viewport center anchor state.x = cx - (cx - state.x) * factor; state.y = cy - (cy - state.y) * factor; state.k = nextScale; } // 2. Pan Math (Pure Local Execution) if (totalSpeed > STOP_THRESHOLD || ax !== 0 || ay !== 0) { state.x += velocity.x; state.y += velocity.y; } // 3. Direct DOM Write (Bypasses D3 overhead completely) g.style( "transform", `translate3d(${state.x}px, ${state.y}px, 0px) scale(${state.k})` ); animFrameId = requestAnimationFrame(updateInertia); } else { // Reset movement variables velocity.x = 0; velocity.y = 0; vZoom = 0; animFrameId = null; svg.classed("zooming", null); // 4. Silent Synchronization back to D3 when movement stops completely // Keeps mouse-wheel and gestures seamlessly aligned for the next interaction svg.call( zoom.transform, d3.zoomIdentity.translate(state.x, state.y).scale(state.k) ); end(); } } function startLoop() { if (!animFrameId) animFrameId = requestAnimationFrame(updateInertia); } // --- Keyboard Event Handlers --- svg.on("keydown", function (event) { event.preventDefault(); event.stopPropagation(); let s = svg; var key = event.key || event.keyCode; switch (key) { case "Escape": case "Backspace": case "Esc": case 27: s.interrupt(); s.transition() .duration(1250) .call( zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0) ); break; case "0": s.interrupt(); s.transition() .duration(750) .call( zoom.interpolate(d3.interpolate).transform, d3.zoomIdentity .translate(w / 2, h / 2) .scale(6) .translate((pointer[0] * -1) / 1.125, (pointer[1] * -1) / 1.125) ); break; case "+": case "=": case 187: keysActive.ZoomIn = 1; startLoop(); break; case "-": case 189: keysActive.ZoomOut = 1; startLoop(); break; case "ArrowUp": case 38: keysActive.Up = 1; startLoop(); break; case "ArrowDown": case 40: keysActive.Down = 1; startLoop(); break; case "ArrowLeft": case 37: keysActive.Left = 1; startLoop(); break; case "ArrowRight": case 39: keysActive.Right = 1; startLoop(); break; case "Enter": this.parentElement.requestFullscreen(); break; } }); svg.on("keyup", function (event) { var key = event.key || event.keyCode; switch (key) { case "+": case "=": case 187: keysActive.ZoomIn = 0; break; case "-": case 189: keysActive.ZoomOut = 0; break; case "ArrowUp": case 38: keysActive.Up = 0; break; case "ArrowDown": case 40: keysActive.Down = 0; break; case "ArrowLeft": case 37: keysActive.Left = 0; break; case "ArrowRight": case 39: keysActive.Right = 0; break; } }); return svg; } 39:T3d23,// Prompt: map keyphrases to canonical form canonical = ({ "language acquisition": "language acquisition", "second language learning": "language acquisition", "second language": "language acquisition",//"second language", "second language acquisition": "language acquisition", "language learning": "language acquisition", "error analysis": "error analysis", "attitudes": "attitudes", "cerebral dominance": "brain asymmetry", "motivation": "motivation", "brain asymmetry": "brain asymmetry", "child language": "child language", "foreign language teaching": "language teaching", "grammatical morphemes": "grammatical morphemes", "language teaching": "language teaching", "adult learners": "adult learners", "adult second language acquisition": "language acquisition", "adult second language learning": "language acquisition", "affective factors": "affective factors", "bilingualism": "bilingualism", "children": "children", "English syntax": "syntax", "foreigner talk": "foreigner talk", "formal instruction": "formal instruction", "hemispheric specialization": "brain asymmetry", "interlanguage": "interlanguage", "language": "language", "language aptitude": "language aptitude", "linguistics": "linguistics", "Monitor Model": "Monitor Model", "pronunciation": "pronunciation", "right hemisphere": "brain asymmetry", "adult second language performance": "language performance", "aphasia": "aphasia", "auditory evoked potentials": "auditory evoked potentials", "cerebral asymmetry": "brain asymmetry", "cerebral organization": "brain asymmetry", "child speech": "child language", "children's speech": "child language", "Chinese child": "child language", "competence": "competence", "creativity": "creativity", "critical period": "critical period", "discourse analysis": "discourse analysis", "education": "education", "English": "English", "ESL proficiency": "language proficiency", "ESL students": "ESL learners", "factor analysis": "factor analysis", "first language": "first language", "foreign language": "foreign language", "formal and informal environments": "learning environments", "German learners": "language learners", "hemispheric asymmetry": "brain asymmetry", "individual differences": "individual differences", "instruction": "instruction", "introduction": "introduction", "L2 acquisition": "language acquisition", "language development": "language development", "language learning strategies": "language learning strategies", "language proficiency": "language proficiency", "lateralization": "brain asymmetry", "learner errors": "learner errors", "left hemisphere": "brain asymmetry", "Monitor": "Monitor Model", "morpheme acquisition": "morpheme acquisition", "morpheme order": "morpheme order", "multilingualism": "multilingualism", "natural order": "natural order", "neurology": "neurology", "psycholinguistics": "psycholinguistics", "second language learner": "language learner", "second language teaching": "language teaching", "TESOL": "TESOL", "theory and practice": "theory and practice", "two studies": "studies", "achievement measures": "achievement measures", "acquisition": "language acquisition", "acquisition data": "acquisition data", "adolescents": "adolescents", "adult learner": "adult learners", "adult second language production": "language production", "adult verbal interaction": "verbal interaction", "adults": "adults", "age": "age", "age differences": "age differences", "age factor": "age factor", "agrammaticism": "agrammaticism", "appositional mind": "appositional mind", "aptitude": "language aptitude", "aptitude tests": "language aptitude", "asymmetry": "brain asymmetry", "attitude": "attitudes", "attitude variables": "attitudes", "audition": "audition", "bilateral alpha activity": "brain asymmetry", "bilingual education": "bilingualism", "bilingual syntax": "syntax", "Bilingual Syntax measure": "syntax", "biological foundations": "biological foundations", "brain damage": "brain damage", "buttons": "buttons", "case report": "case study", "case study": "case study", "cerebral commissurotomy": "brain asymmetry", "cerebral hemispheric asymmetry": "brain asymmetry", "child acquisition": "child language", "child development": "child development", "child grammar": "child language", "child language acquisition": "child language", "child language development": "child language", "child learners": "child language", "child listener": "child language", "childhood": "childhood", "Chinese speakers": "language speakers", "classroom": "classroom", "classroom implications": "classroom", "classroom learning": "classroom", "classroom settings": "classroom", "cognitions": "cognitions", "cognitive factors": "cognitive factors", "cognitive strategies": "cognitive strategies", "cognitive-affective traits": "affective factors", "college graduates": "college graduates", "commands": "commands", "commissurotomy": "brain asymmetry", "communication": "communication", "communicative competence": "communicative competence", "comparative studies": "studies", "compartmentalized control": "brain asymmetry", "conscious grammar": "grammar", "contextual factors": "contextual factors", "contrasting structures": "syntax", "contrastive analysis": "contrastive analysis", "contrastive data": "contrastive data", "corpus callosum": "brain asymmetry", "cortical speech areas": "brain asymmetry", "cross-cultural": "cross-cultural", "cross-sectional study": "studies", "current issues": "current issues", "delayed oral practice": "oral practice", "derivational complexity": "syntax", "developmental parameters": "child development", "developmental psychology": "developmental psychology", "developmental sequence": "developmental sequence", "developmental sequences": "developmental sequence", "developmental theory": "developmental theory", "dichotic listening": "brain asymmetry", "difficulty order": "difficulty order", "discourse": "discourse", "ear asymmetry": "brain asymmetry", "EEG": "EEG", "EEG study": "EEG", "EFL proficiency": "language proficiency", "ego states": "ego states", "empathy": "empathy", "English acquisition": "language acquisition", "English and Spanish": "language", "English as a foreign language": "foreign language", "English structures": "syntax", "epilepsy": "epilepsy", "error sources": "error analysis", "error treatment": "error analysis", "errors": "learner errors", "ESL classrooms": "classroom", "ESL compositions": "ESL learners", "ESL learner": "ESL learners", "ESL learners": "ESL learners", "ESL sequences": "ESL learners", "ESL teaching": "language teaching", "ESL variables": "ESL learners", "ESOL classroom": "classroom", "experimental task": "experimental task", "experiments": "experiments", "feedback": "feedback", "first language learners": "language learners", "foreign accents": "foreign accents", "foreign language grammar": "grammar", "foreign language learning": "language acquisition", "foreign language testing": "language testing", "foreigner-talk": "foreigner talk", "foreigners": "foreigners", "formal-functional distinction": "formal-functional distinction", "free responses": "free responses", "free speech": "speech", "French language": "language", "French learning": "language acquisition", "functional plasticity": "brain asymmetry", "general language proficiency": "language proficiency", "good language learner": "language learner", "good language learners": "language learner", "grammaticality judgments": "grammaticality judgments", "group work": "group work", "handedness": "handedness", "Hebrew-English bilinguals": "bilingualism", "hemisphere specialization": "brain asymmetry", "hemispherectomy": "brain asymmetry", "human mind": "human mind", "hypercorrection": "hypercorrection", "hypnotizability": "hypnotizability", "imitation": "imitation", "importance": "importance", "individual variation": "individual differences", "infant grasp": "infant grasp", "infant language": "child language", "input data": "input data", "integrated control": "brain asymmetry", "intelligence": "intelligence", "intensive language training": "language training", "intensive training": "language training", "interaction patterns": "interaction patterns", "interhemispheric plasticity": "brain asymmetry", "interlanguage hypothesis": "interlanguage", "introspective study": "introspective study", "Japanese child": "child language", "Japanese learner": "language learners", "Japanese learners": "language learners", "L1 influence": "first language", "L2 competence": "language proficiency", "language behavior": "language behavior", "language composition": "language composition", "language disorders": "language disorders", "language heterogeneity": "language heterogeneity", "language input": "language input", "language learner diary": "language learner", "language of teaching": "language teaching", "language pedagogy": "language teaching", "language representation": "language representation", "language specialization": "language specialization", "language teaching method": "language teaching", "language testing": "language testing", "language training": "language training", "language understanding": "language understanding", "lateral eye movements": "brain asymmetry", "laterality effects": "brain asymmetry", "learner error": "learner errors", "learning behaviors": "learning behaviors", "learning problems": "learning problems", "learning strategy": "learning strategies", "linguistic and non-linguistic functions": "linguistic functions", "linguistic competence": "linguistic competence", "linguistic input": "language input", "linguistic register": "linguistic register", "linguistic theory": "linguistic theory", "logical thinking": "logical thinking", "maternal speech style": "motherese", "maturational constraints": "maturational constraints", "meaning": "meaning", "memory": "memory", "metalinguistic awareness": "metalinguistic awareness", "methodologies": "methodologies", "methodology": "methodologies", "methods": "methodologies", "Mexican-Americans": "Mexican-Americans", "minimal language teaching": "language teaching", "Monitor use": "Monitor Model", "morphemes": "morphemes", "mother's speech": "motherese", "motherese": "motherese", "motivational variables": "motivation", "multivariate analysis": "multivariate analysis", "musical perception": "musical perception", "mutually exclusive hypotheses": "hypotheses", "native language": "first language", "native speaker": "native speaker", "native-like accent": "accent", "natural approach": "natural approach", "natural environment": "natural environment", "natural sequences": "natural order", "natural setting": "natural environment", "naturalistic L2 acquisition": "language acquisition", "negation": "syntax", "neglected component": "neglected component", "neurolinguistics": "neurolinguistics", "neurological correlates": "neurological correlates", "newborn": "newborn", "non-interference": "non-interference", "Northwest Amazon": "Northwest Amazon", "notional syllabuses": "syllabuses", "noun inflection": "syntax", "ontogeny": "ontogeny", "oral practice": "oral practice", "oral production": "language production", "oral work": "oral practice", "overgeneralization": "overgeneralization", "paradoxes": "paradoxes", "parallel structures": "syntax", "patterns": "patterns", "personality": "personality", "personality characteristics": "personality", "personality variables": "personality", "physical response": "physical response", "physiological responses": "physiological responses", "Piaget": "Piaget", "politeness": "politeness", "postsemantic processes": "postsemantic processes", "practice": "practice", "productive ability": "productive ability", "pronunciation testing": "pronunciation", "proper intake": "proper intake", "psychological variables": "psychological variables", "psychology": "psychology", "quality vs quantity": "quality vs quantity", "research": "research", "research program": "research", "research trends": "research trends", "routines": "routines", "rules": "rules", "second language environment": "language environment", "second language performance": "language performance", "second language proficiency": "language proficiency", "second language research": "language research", "second language strategies": "language learning strategies", "second-language learning": "language acquisition", "selectivity": "selectivity", "self-esteem": "self-esteem", "semantic development": "semantic development", "sentence modalities": "syntax", "significance": "significance", "simple codes": "simple codes", "SLOPE test": "SLOPE test", "social factors": "social factors", "social psychology": "social psychology", "Spanish immersion": "language immersion", "Spanish learners": "language learners", "Spanish-speaking learner": "language learners", "speaking later": "speaking later", "speech": "speech", "speech act": "speech act", "speech disturbances": "speech disturbances", "speech functions": "speech functions", "speech inability": "speech inability", "speech integration": "speech integration", "speech perception": "speech perception", "speech region": "brain asymmetry", "speech specialization": "speech specialization", "speech to children": "motherese", "speech transcription": "speech transcription", "statistical analysis": "statistical analysis", "strategies": "learning strategies", "structural change": "structural change", "student errors": "learner errors", "student factors": "student factors", "studies": "studies", "success prediction": "success prediction", "successful learners": "successful learners", "successful learning": "successful learning", "syntactic development": "syntax", "syntactic regularities": "syntax", "syntax acquisition": "syntax", "syntax measure": "syntax", "syntax teaching": "syntax", "syntax theory": "syntax", "syntax variation": "syntax", "tachistoscopic recognition": "brain asymmetry", "teacher attitude": "teacher attitude", "teacher feedback": "teacher feedback", "teaching trends": "teaching trends", "temporal lobe seizures": "temporal lobe seizures", "temporal perception": "temporal perception", "TESL": "TESOL", "test distortion": "test distortion", "theoretical linguistics": "linguistic theory", "total physical response": "total physical response", "transfer learning": "transfer learning", "transfer strategy": "transfer strategy", "transferability": "transferability", "traumatic aphasia": "aphasia", "trends": "trends", "universal strategies": "universal strategies", "university students": "university students", "unpublished": "unpublished", "variations": "variations", "verb inflection": "syntax", "verbal environment": "verbal environment", "verbal perception": "verbal perception", "Vietnamese child": "child language", "visual field": "brain asymmetry", "visual fields": "brain asymmetry", "visual perception": "visual perception", "whole vs parts": "whole vs parts", "wild child": "wild child", "young children": "children" })3a:T21c9,// prompt: I have this JSON object of keyphrases. It is your job to map each keyphrase to a single canonical topic, so that I can group them later. Replace each null entry with the appropriate topic: fields = ({ "language acquisition": "Language Learning", "brain asymmetry": "Neuroscience", "syntax": "Linguistics", "child language": "Language Development", "language teaching": "Education", "second language": "Language Learning", "error analysis": "Language Learning", "language proficiency": "Language Assessment", "attitudes": "Psychology", "ESL learners": "Language Learning", "language learners": "Language Learning", "motivation": "Psychology", "Monitor Model": "Language Learning", "classroom": "Education", "bilingualism": "Multilingualism", "language": "Linguistics", "language aptitude": "Language Learning", "learner errors": "Language Learning", "language learner": "Language Learning", "studies": "Research", "grammatical morphemes": "Linguistics", "adult learners": "Language Learning", "affective factors": "Psychology", "children": "Child Development", "foreigner talk": "Sociolinguistics", "interlanguage": "Language Learning", "pronunciation": "Phonetics and Phonology", "first language": "Language Learning", "motherese": "Language Development", "formal instruction": "Education", "linguistics": "Linguistics", "language performance": "Language Assessment", "aphasia": "Neuroscience", "foreign language": "Language Learning", "individual differences": "Psychology", "language learning strategies": "Language Learning", "natural order": "Language Learning", "TESOL": "Education", "oral practice": "Language Learning", "language training": "Education", "methodologies": "Education", "personality": "Psychology", "auditory evoked potentials": "Neuroscience", "competence": "Linguistics", "creativity": "Psychology", "critical period": "Language Development", "discourse analysis": "Linguistics", "education": "Education", "English": "Linguistics", "factor analysis": "Research", "learning environments": "Education", "instruction": "Education", "introduction": "General", "language development": "Language Development", "morpheme acquisition": "Linguistics", "morpheme order": "Linguistics", "multilingualism": "Multilingualism", "neurology": "Neuroscience", "psycholinguistics": "Linguistics", "theory and practice": "Education", "language production": "Linguistics", "case study": "Research", "child development": "Child Development", "grammar": "Linguistics", "developmental sequence": "Language Development", "EEG": "Neuroscience", "language testing": "Language Assessment", "speech": "Phonetics and Phonology", "language input": "Language Learning", "learning strategies": "Language Learning", "linguistic theory": "Linguistics", "natural environment": "Sociolinguistics", "research": "Research", "achievement measures": "Language Assessment", "acquisition data": "Language Learning", "adolescents": "Child Development", "verbal interaction": "Sociolinguistics", "adults": "Adult Learning", "age": "Psychology", "age differences": "Psychology", "age factor": "Psychology", "agrammaticism": "Neuroscience", "appositional mind": "Psychology", "audition": "Neuroscience", "biological foundations": "Neuroscience", "brain damage": "Neuroscience", "buttons": "Miscellaneous", "childhood": "Child Development", "language speakers": "Sociolinguistics", "cognitions": "Psychology", "cognitive factors": "Psychology", "cognitive strategies": "Psychology", "college graduates": "Education", "commands": "Linguistics", "communication": "Sociolinguistics", "communicative competence": "Linguistics", "contextual factors": "Sociolinguistics", "contrastive analysis": "Linguistics", "contrastive data": "Linguistics", "cross-cultural": "Sociolinguistics", "current issues": "General", "developmental psychology": "Psychology", "developmental theory": "Child Development", "difficulty order": "Linguistics", "discourse": "Linguistics", "ego states": "Psychology", "empathy": "Psychology", "epilepsy": "Neuroscience", "experimental task": "Research", "experiments": "Research", "feedback": "Education", "foreign accents": "Sociolinguistics", "foreigners": "Sociolinguistics", "formal-functional distinction": "Linguistics", "free responses": "Research", "grammaticality judgments": "Linguistics", "group work": "Education", "handedness": "Neuroscience", "human mind": "Psychology", "hypercorrection": "Linguistics", "hypnotizability": "Psychology", "imitation": "Psychology", "importance": "General", "infant grasp": "Child Development", "input data": "Research", "intelligence": "Psychology", "interaction patterns": "Sociolinguistics", "introspective study": "Research", "language behavior": "Linguistics", "language composition": "Linguistics", "language disorders": "Neuroscience", "language heterogeneity": "Sociolinguistics", "language representation": "Neuroscience", "language specialization": "Neuroscience", "language understanding": "Linguistics", "learning behaviors": "Psychology", "learning problems": "Psychology", "linguistic functions": "Linguistics", "linguistic competence": "Linguistics", "linguistic register": "Sociolinguistics", "logical thinking": "Psychology", "maturational constraints": "Language Development", "meaning": "Linguistics", "memory": "Psychology", "metalinguistic awareness": "Linguistics", "Mexican-Americans": "Sociolinguistics", "morphemes": "Linguistics", "multivariate analysis": "Research", "musical perception": "Neuroscience", "hypotheses": "Research", "native speaker": "Sociolinguistics", "accent": "Phonetics and Phonology", "natural approach": "Language Learning", "neglected component": "General", "neurolinguistics": "Neuroscience", "neurological correlates": "Neuroscience", "newborn": "Child Development", "non-interference": "Sociolinguistics", "Northwest Amazon": "Sociolinguistics", "syllabuses": "Education", "ontogeny": "Language Development", "overgeneralization": "Language Learning", "paradoxes": "General", "patterns": "Linguistics", "physical response": "Psychology", "physiological responses": "Neuroscience", "Piaget": "Child Development", "politeness": "Sociolinguistics", "postsemantic processes": "Linguistics", "practice": "Education", "productive ability": "Linguistics", "proper intake": "Language Learning", "psychological variables": "Psychology", "psychology": "Psychology", "quality vs quantity": "General", "research trends": "Research", "routines": "Linguistics", "rules": "Linguistics", "language environment": "Sociolinguistics", "language research": "Research", "selectivity": "General", "self-esteem": "Psychology", "semantic development": "Linguistics", "significance": "General", "simple codes": "Linguistics", "SLOPE test": "Language Assessment", "social factors": "Sociolinguistics", "social psychology": "Psychology", "language immersion": "Language Learning", "speaking later": "Language Development", "speech act": "Linguistics", "speech disturbances": "Neuroscience", "speech functions": "Phonetics and Phonology", "speech inability": "Neuroscience", "speech integration": "Neuroscience", "speech perception": "Phonetics and Phonology", "speech specialization": "Neuroscience", "speech transcription": "Phonetics and Phonology", "statistical analysis": "Research", "structural change": "Linguistics", "student factors": "Education", "success prediction": "Language Assessment", "successful learners": "Language Learning", "successful learning": "Language Learning", "teacher attitude": "Education", "teacher feedback": "Education", "teaching trends": "Education", "temporal lobe seizures": "Neuroscience", "temporal perception": "Neuroscience", "test distortion": "Language Assessment", "total physical response": "Language Learning", "transfer learning": "Language Learning", "transfer strategy": "Language Learning", "transferability": "Language Learning", "trends": "General", "universal strategies": "Language Learning", "university students": "Education", "unpublished": "Research", "variations": "Linguistics", "verbal environment": "Sociolinguistics", "verbal perception": "Neuroscience", "visual perception": "Neuroscience", "whole vs parts": "General", "wild child": "Language Development" })3b:T4ee,phraseAuthors = { let keep = new Set( Object.entries( Object.groupBy( prep.flatMap((d) => d.authors.map((d) => d.last)), (d) => d ) ) .filter((d) => d[1].length > 1) .sort((a, b) => b[1].length - a[1].length) .map((d) => d[0]) ); let also = new Set( prep .flatMap((d) => d.authors.flatMap((a) => d.keyphrase.map((d) => [d, a.last])) ) .filter((d) => counts.get(canonical[d[0]]).freq > 6) .map((d) => d[1]) ); // return prep.map( ({authors,keyphrase})=>Object.fromEntries(authors.map(a=>[a.last,keyphrase]))) // return prep.flatMap( ({authors,keyphrase})=> authors.map(a=> ({[a.last]:keyphrase}))) return Object.fromEntries( Object.entries( Object.groupBy( prep .flatMap(({ authors, keyphrase }) => authors.flatMap((a) => keyphrase.map((p) => [canonical[p], a.last])) ) .filter((d) => keep.has(d[1]) || also.has(d[1])), (d) => d[0] ) ).map((d) => [ d[0], Object.fromEntries( Object.entries(Object.groupBy(d[1], (d) => d[1])) .map((d) => [d[0], d[1].length]) .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])) ) ]) ); } 3c:T410,/* Prompt: This is a list of authors. Your task is to transform this list into structured data. The desired format is JSON with citation entries converted to an array of shallow objects of the format: ``` { "authors": [ { "author1_initials": "...", "author1_firstname": "...", // expand initials if you're confident "author1_lastname": "..." }, { "author2_firstnameOrInitial": "...", // if multiple authors "author2_firstname": "...", // if multiple authors, expand initials if you're confident "author2_lastname": "..." // if multiple authors }, { ... // optional authors } ], "year": "...", "title": "...", "publication": "...", // if available "edition": "", // if available "conference": "", // if available "location": "" // if avaiable "pages": [startNum,endNum], "keyphrase": ["descriptive_phrase"] } ``` */ Krashen1981Acquisition = FileAttachment("Krashen (1981) - Second Language Acquisition and Second Language Learning (refs).json").json()3d:T594,function renderText( textContent,{ canvas = document.createElement('canvas'), family = "Arial", size = 10, resolution = 1 } = {}) { // Get or reuse canvas const ctx = canvas.getContext("2d"); // Set the font size and family, scaled by resolution const font = `${size * resolution}px ${family}`; ctx.font = font; // Measure the text dimensions using advanced text metrics const metrics = ctx.measureText(textContent); // Calculate the actual bounding box dimensions const ascent = Math.round(metrics.actualBoundingBoxAscent); const descent = Math.round(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); // Total width and height of the bounding box const width = left + right; const height = ascent + descent; // Resize the canvas to fit the text bounding box (also clears the canvas) canvas.width = width; canvas.height = height; // Set font style on the 2D context again after resizing ctx.font = font; // Draw the text onto the canvas, aligned to the bounding box ctx.fillStyle = "black"; // Default text color ctx.fillText( textContent, left, // Offset to align the left edge of the text ascent // Offset to align the baseline of the text ); // Output data and convert to DataURL return { width, height, data: canvas.toDataURL("image/png") }; }3e:[{"id":"9ff1b35fd31e87174ad4d2db5819626e91693c071191da6da5dcb7ef37f242a929f61ac97b62501d5da8670f1206ef8a7628f07d0fa5bdbde33e66f7f673b873","href":"https://static.observableusercontent.com/files/9ff1b35fd31e87174ad4d2db5819626e91693c071191da6da5dcb7ef37f242a929f61ac97b62501d5da8670f1206ef8a7628f07d0fa5bdbde33e66f7f673b873","name":"Krashen (1981) - Second Language Acquisition and Second Language Learning (refs).json","type":"application/json","lastModified":1738492759320.102,"size":136319}] 2f:{"title":"Performant Sunburst Component","cells":[{"id":0,"value":"# Performant Sunburst Component\n## Stephen Krashen's *Second Language Acquisition* (1981)","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"Using the new [Qwen2.5-Max](https://huggingface.co/spaces/Qwen/Qwen2.5-Max-Demo) and `Object.groupBy` to extract and summarise bibliographies, keyphrases and topics. Some performance trickery to speed up transitions compared to @mbostock's implementation.\n\n+ Hides text nodes during transitions and interactions\n+ Shows pre-rendered text nodes instead\n + 2025-02-04: (pre-rendering takes some time tho, especially on mobile)\n + 2025-02-05: faster pre-rendering implementation, tidier joins","pinned":false,"hidden":false,"mode":"md"},{"id":682,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":686,"value":"### Zoomable Sunburst\n`pinch to zoom | click + enter for fullscreen | backspace to reset`","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"viewof topK = Inputs.range([1, 100], {label: \"Top K\", step: 1, value: 8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"viewof weight = Inputs.range([0.000000, 1], {label: \"Reweigh\", value:0.5,step: 0.05})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5284,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5137,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4899,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4269,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2573,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4063,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":5934,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"## Data processing","pinned":false,"hidden":false,"mode":"md"},{"id":2862,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"counts = new Map(\n Object.entries(\n Object.groupBy(\n Object.entries(\n Object.groupBy(\n Krashen1981Acquisition.flatMap((d) => d.keyphrase),\n (d) => d\n )\n )\n .sort((a, b) => b[1].length - a[1].length || a[0].localeCompare(b[0]))\n .map((d) => [canonical[d[0]], { freq: d[1].length, form: d[0] }]),\n (d) => d[0]\n )\n )\n .map((d) => [\n d[0],\n {\n freq: d[1].reduce((pool, item) => pool + item[1].freq, 0),\n list: d[1].map((d) => d[1])\n }\n ])\n .sort((a, b) => b[1].freq - a[1].freq)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"topics = new Map(\n Object.entries(\n Object.groupBy(\n Array.from(counts.entries()).map((d) => [\n fields[d[0]],\n d[0],\n d[1].freq,\n d[1].list\n ]),\n (d) => d[0]\n )\n ).map((d) => [\n d[0],\n {\n size: d[1].reduce((pool, item) => pool + item[2], 0),\n list: d[1]\n .reduce(\n (pool, item) =>\n pool.concat(\n item[3].map(({ freq, form }) => ({\n size: item[2],\n freq,\n term: item[1],\n form\n }))\n ),\n []\n )\n .sort(\n (a, b) =>\n b.size - a.size || b.freq - a.freq || a.form.localeCompare(b.form)\n )\n }\n ]).sort( (a,b) => b[1].size - a[1].size || a[0].localeCompare(b[1]))\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"paths = Array.from(topics.entries()).flatMap((d) =>\n d[1].list.slice(0,topK).map(({ term, form, size, freq }) => ({\n area: d[0],\n path: term == form ? `${d[0]}/${term}` : `${d[0]}/${term}/${form}`,\n freq: term == form ? /*size*/ freq : freq,\n size:d[1].size\n }))\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2631,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":2028,"value":"prep = Krashen1981Acquisition.map(({ authors, keyphrase, year }) => ({\n authors: authors.map((d) =>\n Object.fromEntries(\n Object.entries(d).map((d) => [\n d[0].split(\"_\")[1].replace(\"name\", \"\"),\n d[1]\n ])\n )\n ),\n keyphrase,\n year: parseInt(year)\n }));","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"authPaths = Array.from(topics.entries()).flatMap((d) =>\n [...new Set(d[1].list.map((d) => d.term))].flatMap((p) =>\n [{ path: d[0] + \"/\" + p , freq: undefined }].concat(\n Object.entries(phraseAuthors[p] ?? { \"\": 0 }).map((a) => ({\n path: d[0] + \"/\" + p + \"/\" + a[0],\n last: a[0],\n freq: a[1]\n }))\n )\n )\n).filter(d=>d.freq>0)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"### Data & Imports","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3812,"value":"import {TextRender} from \"@dleeftink/render-text-async\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3968,"value":"import {TextRenderQueueV2} from \"@dleeftink/render-text-async\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4130,"value":"import {renderTextToCanvasChunks} from \"c9303064d85176d4\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3454,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}