31:T436,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); return svg.node() }32:Ta16,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 - labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.date), yScale(d0.value)], labelRect)) } let i0 = 1, iMax = 50; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }); }33:T60f,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(voronoiData) .enter().append("path") .attr("d", d => "M" + d.join("L") + "Z") .style("fill", d => d.data.colors.light) .style("fill-opacity", .3) .style("stroke", "#fff"); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".line-point") .data(flatData) .enter().append("circle") .attr("r", 2) .attr("transform", d => `translate(${xScale(d.date)}, ${yScale(d.value)})`) .style("fill", d => d.colors.dark) return svg.node() }34:T5e8,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3) g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.dark); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".line-point") .data(largestVoronoiData) .enter().append("circle") .attr("r", 2) .attr("transform", d => `translate(${d.point})`) .style("fill", d => d.colors.dark); return svg.node() }35:T65f,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark); return svg.node() }36:T98b,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + d.point[0] - labelWidth / 2, labelRight = labelPadding + d.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + d.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + d.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; g.append("polygon") .attr("points", labelRect.join(" ")) .style("fill", "none") .style("stroke", "black"); }); }37:Td74,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".centroid-point") .data(largestVoronoiData) .enter().append("circle") .attr("r", 2) .attr("transform", d => `translate(${d.centroid})`); g.selectAll(".centroid-line") .data(largestVoronoiData) .enter().append("line") .attr("x1", d => d.point[0]) .attr("x2", d => d.centroid[0]) .attr("y1", d => d.point[1]) .attr("y2", d => d.centroid[1]) .style("stroke", "black"); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); let bBox = g.append("polygon") .style("fill", "none") .style("stroke", "black"); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; bBox.attr("points", labelRect.join(" ")); return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.date), yScale(d0.value)], labelRect)) } let i0 = 1, iMax = 50; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }); }38:Ta20,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.date), yScale(d0.value)], labelRect)); } let i0 = 1, iMax = 50; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }); }39:[] 2f:{"title":"Directly labelling lines","cells":[{"id":143,"value":"md`# Directly labelling lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`A common goal of data visualization is to show how some values have changed over time. More often than not, you will use a line chart for this purpose. But when you want to show several different values in the same chart, you will need to come up with a way to explain to your reader which line represents which value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`All too often, chart designers will resort to adding an external legend. When confronted with such designs, readers must glance back and forth between the chart and the legend, wasting cognitive energy on a task that does not contribute to understanding the data. The solution? Label the lines directly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`Below, I present a method for directly labelling lines that works with many data sets.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`Step 1: Compute the voronoi diagram for each point on the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`Step 2: For each line's points, calculate the largest voronoi cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`Step 3: Place the label at the point of the largest cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`Step 4: Compute the bounding box of each label.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`Step 5: Move the label towards the voronoi cell's centroid until none of the lines' points fall within the label's bounding box.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`Nice chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`I have tested this method on several charts, and it works very well for charts with three or fewer lines, and sometimes even more. It also works on small screens, though not as frequently.\n\nNote that in the while loop, I set the iMax variable to 50. That represents the maximum number of pixels from the point of origin that you are willing to move the label. If the loop reaches iMax without having found a suitable position for the label (or if any of the labels' polygons overlap each other, another potential problem), then it is time to abandon this folly and make a legend. Hey, at least you tried.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"toc({ heading: \"Jump to code:\", selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"margin = ({\n left: 20,\n bottom: 20,\n right: 60,\n top: 10\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"height = width * .5;","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"chartWidth = width - margin.left - margin.right;","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"chartHeight = height - margin.top - margin.bottom;","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"xScale = d3.scaleTime()\n .domain([new Date(2010, 0, 1), new Date(2010, 3, 1)])\n .range([0, chartWidth]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"yScale = d3.scaleLinear()\n .domain([0, 20])\n .range([chartHeight, 0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"xAxisGenerator = d3.axisBottom(xScale)\n .tickValues(d3.range(0, 4).map(d => new Date(2010, d, 1)));","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"yAxisGenerator = d3.axisLeft(yScale)\n .tickValues(d3.range(0, 30, 5));","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"lineGenerator = d3.line()\n .x(d => xScale(d.date))\n .y(d => yScale(d.value));","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`### Data arrays`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"fruits = d3.csv(\"https://gist.githubusercontent.com/HarryStevens/2ca674b53b0ea1ab806a3e704386c4c9/raw/3828df9890fbe0ff8b5259e2e3f9ebd1d38984bc/fruits.csv\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"data = parseData(fruits)","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"lineData = parseLineData(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"flatData = parseFlatData(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"voronoiData = {\n const v = [...new d3.Delaunay((flatData.map(d => [xScale(d.date), yScale(d.value)])).flat()).voronoi([0, 0, chartWidth, chartHeight]).cellPolygons()];\n for (let i = 0, l = v.length; i < l; i++){\n v[i].data = flatData[i];\n }\n return v;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"largestVoronoiData = parseLargestVoronoi(flatData, voronoiData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"colors = ({\n Apples: {\n light: \"#fb9a99\",\n dark: \"#e31a1c\"\n },\n Blueberries: {\n light: \"#a6cee3\",\n dark: \"#1f78b4\"\n },\n Carrots: {\n light: \"#fdbf6f\",\n dark: \"#ff7f00\"\n },\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"md `### Data parsers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"parseData = data => {\n const output = [];\n for (let i = 0, l = data.length; i < l; i++){\n let d = data[i],\n o = {},\n s = d.Date.split(\"/\"),\n yyyy = +(\"20\" + s[2]),\n mm = s[0] - 1,\n dd = +s[1];\n\n o.date = new Date(yyyy, mm, dd);\n\n for (let col in d){\n if (col !== \"Date\"){\n o[col] = +d[col];\n }\n }\n \n output.push(o);\n }\n \n return output;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"parseLineData = data => {\n const output = [];\n \n let i = 0;\n for (let col in data[0]){\n if (i > 0) {\n let o = {\n key: col, \n light: colors[col].light,\n dark: colors[col].dark,\n data: []\n };\n \n for (let i0 = 0, l0 = data.length; i0 < l0; i0++){\n let d0 = data[i0];\n \n o.data.push({\n date: d0.date,\n value: d0[col]\n });\n }\n \n output.push(o);\n }\n i++;\n }\n \n return output;\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"parseFlatData = data => {\n const output = [],\n columns = [];\n \n let i = 0;\n for (let col in data[0]){\n columns.push(col);\n if (i > 0) {\n for (let i0 = 0, l0 = data.length; i0 < l0; i0++){\n let d0 = data[i0];\n \n output.push({\n date: d0.date,\n value: d0[col],\n key: col,\n colors: colors[col]\n });\n }\n\n }\n i++;\n }\n \n output.columns = columns;\n return output; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"parseLargestVoronoi = (flatData, voronoiData) => {\n let output = {};\n for (let i = 1, l = flatData.columns.length; i < l; i++){\n output[flatData.columns[i]] = {area: 0}\n }\n \n for (let i = 0, l = voronoiData.length; i < l; i++){\n let o = {},\n cell = voronoiData[i],\n area = geometric.polygonArea(cell),\n key = cell.data.key;\n \n if (area > output[key].area){\n output[key].centroid = geometric.polygonCentroid(cell);\n output[key].point = [xScale(cell.data.date), yScale(cell.data.value)];\n output[key].angle = geometric.lineAngle([output[key].point, output[key].centroid]);\n output[key].area = area;\n output[key].polygon = cell;\n output[key].colors = colors[key];\n }\n }\n \n let output2 = [];\n for (let key in output){\n output[key].key = key;\n output2.push(output[key]);\n }\n \n return output2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"last = array => array[array.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"import {toc} from \"@harrystevens/toc@129\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"geometric = require(\"geometric@2\");","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}