31:T4b1,{ // herringbone pattern, using a 2x2 twill let gridSize = 16; let yarnWidth = 11; let borderWidth = 1; let warpColor = "white"; let weftColor = "steelblue"; let background = "white"; let borderColor = weftColor; let numWarp = Math.ceil(textWidth/(gridSize*2))*2; let numWeft = Math.ceil(200/gridSize); let margin = {top: 0, left: (textWidth-(numWarp * gridSize))/2} let width = textWidth; let height = numWeft * gridSize; let cxt = DOM.context2d(width, height) cxt.fillStyle = background; cxt.fillRect(0,0,width,height); const numWarpPerDiag = 5; // # warp threads per diagonal section const numWarpPerRepeat = numWarpPerDiag * 2; // # warp threads per pattern repeat let draft = Array(numWeft).fill(0) .map((x,i) => Array(numWarp).fill(0) .map((y,j) => { let col = j % (numWarpPerRepeat) return (col >= numWarpPerDiag) ? ((i + col) % 4 >= 2) : ((i + numWarpPerRepeat-col + 1) % 4 >= 2) })) drawFabric (cxt, margin.left, margin.top, gridSize, yarnWidth, borderWidth, warpColor, weftColor, borderColor, draft, false) return cxt.canvas }32:Te52,{ const svg = d3.select(DOM.svg(width, height)) .attr("id", "cleanupProgress"); const plot_yVals = 'newArticles'; const plot_yVals_neg = 'resolvedArticles'; const dataMaxIter = data.length - 1 const y = d3.scaleLinear() .domain([-d3.max(data, d => d[plot_yVals_neg]), d3.max(data, d => d[plot_yVals])]).nice() .range([height - margin.bottom, margin.top]); const area = negate => d3.area() .x(d => x(d.date)) .y0(y(0)) .y1(d => negate ? y(-d[plot_yVals_neg]) : y(d[plot_yVals])) .curve(d3.curveStep); svg.append("rect") // background .attr("x", x(data[0].date)) .attr("y", y(0)) .attr("width", width-margin.right-margin.left) .attr("height", y(y.domain()[0])-y(0)) .attr("fill","#f4fff4") const dataArea = svg.append("g") .attr("class", "dataArea") dataArea.append("path") // count increase (red) .datum(data) .attr("fill", "#c13434") .attr("d", area(false)) dataArea.append("path") // count decrease (green) .datum(data) .attr("fill", "green") .attr("d", area(true)); // add rectangles/text that are only displayed on hover // control visibility using CSS const hoverG = svg.append("g") .selectAll("g") .data(data) .enter().append("g") .attr("class", "hover") .attr("transform", (d,i) => `translate(${getSpanX(d,i).x0}, 0)`) const hoverBox = hoverG.append("g") .attr("class", "hoverBox") const hoverRect = hoverBox.append("g") .attr("class", "toggleDisplay") hoverRect.append("rect") .attr("y", margin.top) .attr("height", height - margin.top - margin.bottom) .attr("width", (d,i) => getSpanX(d,i).diff) .attr("fill", "#eee") hoverRect.append("rect") .attr("y", d => y(d[plot_yVals])) .attr("width", (d,i) => getSpanX(d,i).diff) .attr("height", d => y(0) - y(d[plot_yVals])) .attr("fill", "red") hoverRect.append("rect") .attr("y", y(0)) .attr("width", (d,i) => getSpanX(d,i).diff) .attr("height", d => y(-d[plot_yVals_neg]) - y(0)) .attr("fill", "#19c13f") hoverBox.append("rect") .attr("y", margin.top) .attr("height", height - margin.top - margin.bottom) .attr("width", (d,i) => getSpanX(d,i).diff) .attr("fill-opacity", 0) const hoverContent = hoverG.append("g") .attr("class", "hoverContent") .attr("transform", (d,i) => `translate(${i < (dataMaxIter/2) ? (2 + getSpanX(d,i).diff) : -2},${height * .75})`) .attr("text-anchor", (d,i) => i < (dataMaxIter/2) ? "start" : "end") .attr("font-size", "small") hoverContent.append("text") .text(d => timeFormat(d.date)) .attr("y", "-1em") hoverContent.append("text") .text(d => `${d[plot_yVals]} new, ${d[plot_yVals_neg]} resolved`) // draw axes and labels svg.append("g") .call(xAxis); svg.append("g") .call(yAxis(y)); const textOffset = 10; const labels = svg.append("g") .attr("fill", "#222") .attr("font", "sans-serif") if (y.domain()[0] === 0 && y.domain()[1] === 0) { labels.append("text") .text("NO DATA") .attr("x", width/2) .attr("y", height/2) .attr("text-anchor", "middle") } else { labels.append("text") .text("Resolved articles") .attr("x", margin.left + textOffset) .attr("y", height - margin.bottom - textOffset) labels.append("text") .text("New articles with errors") .attr("x", margin.left + textOffset) .attr("y", margin.top + textOffset) .attr("dominant-baseline", "hanging") } return svg.node(); }33:Te01,dateData = { const [min, max] = d3.extent(dateDiffs); const histX = d3.scaleLinear() .domain([min, max + 1])//[7,8])//.nice()//d3.extent(dateDiffs)).nice() .range([margin.left, width - margin.right]) const bins = d3.histogram() .domain(histX.domain()) .thresholds(histX.ticks(histX.domain()[1]-histX.domain()[0])) (dateDiffs) const barWidth=Math.max(0, histX(bins[0].x1) - histX(bins[0].x0)) const barMargin = 2 const histY = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]).nice() .range([height - margin.bottom, margin.top]) const histXAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(histX).ticks(Math.min(15,max-min+1)))//.tickSizeOuter(0)) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("Days between runs")) .call(g => g.selectAll(".tick text, .tick line").attr("transform", `translate(${barWidth/2},0)`)) const histYAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(histY)) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Number of bot runs")) const svg = d3.select(DOM.svg(width, height)) .attr("id", "histogram"); const bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(bins) .join("rect") .attr("x", d => histX(d.x0) + barMargin) .attr("width", barWidth - 2*barMargin) .attr("y", d => histY(d.length)) .attr("height", d => histY(0) - histY(d.length)) .append("title") .text(d => `${d.x1-d.x0 === 1 ? d.x0 : `${d.x1}–${d.x0}`} days: ${d.length} times${(d.length<10 && d.x1-d.x0 > 1) ? `\n(values: ${d} ${d.length>1?"days":"day"})`:''}`); // add rectangles/text that are only displayed on hover // control visibility using CSS const hoverG = svg.append("g") .selectAll("g") .data(bins) .enter().append("g") .attr("class", "hover") const maxIter = bins.length - 1 const hoverBox = hoverG.append("g") .attr("class", "hoverBox") const hoverContent = hoverG.append("g") .attr("class", "hoverContent") const hoverText = hoverContent.append("text") .attr("transform", (d,i) => `translate(${histX(d.x0) + (i > maxIter/2 ? -2 : barWidth + 2)}, ${height/4})`) .attr("font-size", "small") .attr("text-anchor", (d,i) => i > maxIter/2 ? "end" : "start") .text(d => `${d.x0} days: ${d.length} ${d.length===1 ? "run" : "runs"}`) const hoverRect = hoverBox.append("g") .attr("class", "toggleDisplay") hoverRect.append("rect") .attr("x", d => histX(d.x0) + barMargin) .attr("y", margin.top) .attr("width", barWidth - 2*barMargin) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#eee") hoverRect.append("rect") .attr("x", d => histX(d.x0) + barMargin) .attr("y", d => histY(d.length)) .attr("width", barWidth - 2*barMargin) .attr("height", d => histY(0) - histY(d.length)) .attr("fill", "#1171c1") hoverBox.append("rect") .attr("x", d => histX(d.x0)) .attr("y", margin.top) .attr("width", barWidth) .attr("height", height - margin.top - margin.bottom) .attr("fill-opacity", 0) svg.append("g") .call(histXAxis); svg.append("g") .call(histYAxis); return svg.node(); }34:T7d8,md`--- ### Why you can't import the source data directly _Note: As of July 17, 2019, I've switched implementation to a different CORS proxy service, since cors.io seems to be permanently down. As of August 30, 2019, bypasscors.herokuapp.com also seems to be down._ I initially tried loading the page content directly from the source, without using a [cors.io](https://cors.io) proxy: \`\`\`js // with proxy: // const url = "https://cors.io/?https://bambots.brucemyers.com/cwb/history/Textile_Arts.html"; // without proxy: const url = "https://bambots.brucemyers.com/cwb/history/Textile_Arts.html"; const html = await d3.html(url); \`\`\` However, this returns an error: \` TypeError: Origin https://lemonnish.static.observableusercontent.com is not allowed by Access-Control-Allow-Origin. \` The CORS permissions on the source page (specifically, the value assigned to [Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) in the response header) needs to be set to allow http requests from a remote webpage. For security reasons, modern web browsers prevent remote JavaScript from crawling a webpage unless explicity allowed (either by allowing scripts from a particular path/s, or by allowing * all). This particular webpage has no CORS permissions defined, so the broswer's default is to not allow any cross-site scripting access. To verify this, you can query the webpage header value in a terminal: \`\`\`sh > curl -i -X OPTIONS https://bambots.brucemyers.com/cwb/history/Textile_Arts.html HTTP/1.1 200 OK Date: Mon, 22 Apr 2019 04:57:18 GMT Server: Apache/2.4.25 (Debian) Allow: HEAD,HEAD,GET,HEAD,POST,OPTIONS Content-Length: 0 Content-Type: text/html \`\`\` However, the proxy service isn't always online, so I built in a fallback: if the proxy url fails to load data, then this notebook will instead access a (potentially out-of-date) static TSV version of the page, saved to a GitHub Gist. `35:Tcc3,function drawLinePlot(plotData, lastDatum, options = {}) { let {formatY, formatDatum, labelDatum = "Current count"} = options; const dataMaxIter = plotData.length - 1 const svg = d3.select(DOM.svg(width, height)) .attr("class", "linePlot"); const y = d3.scaleLinear() .domain([lockYAxis === "lock" ? 0 : d3.min(plotData.concat(lastDatum), d => d.y), d3.max(plotData.concat(lastDatum), d => d.y)]) .nice() .range([height - margin.bottom, margin.top]) // current status line and label const displayDatumAbove = lastDatum.y < ((y.domain()[1] - y.domain()[0]) * .95 + y.domain()[0]); svg.append("text") .attr("x", margin.left + 4) .attr("y", y(lastDatum.y) + (displayDatumAbove ? -4 : 4)) .attr("dominant-baseline", displayDatumAbove ? "baseline" : "hanging") .attr("font-size", "small") .attr("fill", "grey") .text((labelDatum === "" ? "" : labelDatum + ": ") + (formatDatum ? d3.format(formatDatum)(lastDatum.y) : lastDatum.y)) svg.append("path") .datum([{date: plotData[0].date, y: lastDatum.y}, {date: plotData[plotData.length-1].date, y: lastDatum.y}]) .attr("fill", "none") .attr("stroke", "lightgrey") .attr("stroke-width", 1) .attr("d", line(d => y(d.y))); // data line svg.append("path") .datum(plotData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line(d => y(d.y))); // add lines/dots/text that are only displayed on hover // control visibility using CSS const hoverG = svg.append("g") .selectAll("g") .data(plotData) .enter().append("g") .attr("class", "hover") const hoverBox = hoverG.append("g") .attr("class", "hoverBox") const hoverRect = hoverBox.append("g") .attr("class", "toggleDisplay") .attr("transform", d => `translate(${x(d.date)},0)`) hoverRect.append("line") .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "#eee") hoverBox.append("rect") .attr("x", (d,i) => getSpanX(d,i).x0) .attr("y", margin.top) .attr("width", (d,i) => getSpanX(d,i).diff) .attr("height", height - margin.top - margin.bottom) .attr("fill-opacity", 0) const hoverContent = hoverG.append("g") .attr("class", "hoverContent") .attr("transform", d => `translate(${x(d.date)},0)`) hoverContent.append("circle") .attr("cx", 0) .attr("cy", d => y(d.y)) .attr("r", 2.5) .attr("fill", "steelblue") const hoverText = hoverContent.append("g") .attr("transform", (d,i) => `translate(${i > dataMaxIter/2 ? -2 : 2}, ${height*.75})`) .attr("text-anchor", (d,i) => i > dataMaxIter/2 ? "end" : "start") .attr("font-size", "small") hoverText.append("text") .text(d => timeFormat(d.date)) .attr("y", "-1em") hoverText.append("text") .text(d => formatDatum ? d3.format(formatDatum)(d.y) : d.y) // draw axis svg.append("g") .call(xAxis); svg.append("g") .call(yAxis(y, formatY ? d3.format(formatY) : null)); return svg.node(); }36:[] 2f:{"title":"WikiProject Textile Arts: Article Cleanup","cells":[{"id":1107,"value":"md`# WikiProject Textile Arts: Article Cleanup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`\nWikipedia editors have access to a wide range of tools that make editing easier. One particular tool takes the form of a bot, the [CleanupWorklistBot](https://en.wikipedia.org/wiki/User:CleanupWorklistBot), that generates lists of all articles tagged with cleanup issues within a given [WikiProject](https://en.wikipedia.org/wiki/Wikipedia:WikiProject). These issues include tags such as [_citation needed_] and [_dead url_]. The bot refreshes the list of project issues once a week and produces a high-level summary of the historic progress.\n\n[WikiProject Textile Arts](https://en.wikipedia.org/wiki/Wikipedia:WikiProject_Textile_Arts) is a community of editors (albeit currently not a very active community) interested in improving the quality of textile art resources on Wikipedia. The associated cleanup listing is located [here](https://bambots.brucemyers.com/cwb/bycat/Textile_Arts.html), and the summary of historic data is [here](https://bambots.brucemyers.com/cwb/history/Textile_Arts.html).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"data_url = \"https://bambots.brucemyers.com/cwb/history/Textile_Arts.html\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2389,"value":"md`A (potentially outdated) copy of the data is stored to a GitHub Gist in case the CORS proxy service fails to work. This fallback url is ${rawData.errorMsg === '' ? \"**not** being used\" : \"currently being used\"}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2361,"value":"fallback_url = \"https://gist.githubusercontent.com/lemonnish/3649a7eb669f2ee73c7a46cd118226ab/raw/WikiProject_TextileArts_CleanupHistory\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2286,"value":"md`\nI created the visualizations below in order to visualize progress in reducing the backlog of cleanup issues for this WikiProject. The bot was last run ${timeFormat(lastData.date)}.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"md`### Select the date range to display:\n_The background of the slider shows the weakly count of all articles tagged for cleanup._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"viewof selectData = rangeSlider(rawData.data, \n d => d.date, \n value => d3.min(value.values.map(d=>d.cleanupIssues)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"viewof lockYAxis = checkbox({\n options: [{ value: \"lock\", label: \"Lock min y-axis values to 0\"}],\n value: \"lock\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`## Total number of articles in WikiProject Textile Arts\n\nThis number corresponds to the number of articles tagged as being relevant to the WikiProject; although newly written articles can be tagged this way, editors can also add the tag to old articles that should be part of the WikiProject.\n\nThis number has steadily increased over time, with occasional jumps corresponding to more activity in the project. Wikipedia was founded in January 2001, so although the trend in this data set is fairly linear (an average of 78 new articles per year), there must have been an early spike; for the missing data between 2001 and 2011, an average of 120 articles would have needed to be added per year.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"{\n const yVals = 'totalArticles'\n const plotData = data.map(d => ({date: d.date, y: d[yVals]}));\n const lastDatum = {date: lastData.date, y: lastData[yVals]};\n return drawLinePlot(plotData, lastDatum)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`## Number of articles tagged for cleanup\n\nBecause the November 2012 and May 2014 spikes don't correspond to a spikes in the count of all articles in the WikiProject, I assume that a bot auto-tagged many articles on those dates (or there was a flurry of manual issue-tagging on those dates, but I find that more unlikely). I don't have an explanation for the brief dip in numbers in July 2015.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"{\n const yVals = 'cleanupArticles'\n const plotData = data.map(d => ({date: d.date, y: d[yVals]}));\n const lastDatum = {date: lastData.date, y: lastData[yVals]};\n return drawLinePlot(plotData, lastDatum)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"md`## Percentage of articles tagged for cleanup\n\n_Number of articles tagged for cleanup_ ÷ _Total number of articles in the WikiProject Textile Arts_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"{\n const plotData = data.map(d => ({date: d.date, y: d.cleanupArticles / d.totalArticles}));\n const lastDatum = {date: lastData.date, y: lastData.cleanupArticles / lastData.totalArticles};\n return drawLinePlot(plotData, lastDatum,\n {formatY: '.0%', formatDatum: '.2%', labelDatum: \"Current value\"})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`## Number of cleanup issues\n\nSome Wikipedia articles only have a single issue, while others have many. When an article is tagged with a problem such as [_citation needed_], that tag also includes a date (format: \\`month YYYY\\`); within a single article, all identical tags that were added in the same month are, for the purpose of this count, treated as a single issue.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"{\n const yVals = 'cleanupIssues'\n const plotData = data.map(d => ({date: d.date, y: d[yVals]}));\n const lastDatum = {date: lastData.date, y: lastData[yVals]};\n return drawLinePlot(plotData, lastDatum)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`## Cleanup progress\n\nArticles are \"resolved\" when all issues are addressed, in which case that particular article no longer appears in the cleanup listing. I don't know why there is no data prior to October 2015.\n\n**Red:** Number of new articles with errors per week \n**Green:** Number of resolved articles per week`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1925,"value":"md`## Frequency of bot runs\n\nThe bot has usually but not always been run every 7 days. Here's a distribution of days between runs for the selected date range:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1936,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`---\n## Data\n\n1. \\`rawData\\`: import the raw HTML and parse the table contents\n2. \\`lastData\\`: store the last element of the full dataset\n3. \\`data\\`: get the subset of the dataset specified by the range slider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"rawData = {\n // access the url via a CORS proxy to prevent denied access:\n const url = `https://bypasscors.herokuapp.com/api/?url=${encodeURIComponent(data_url)}`\n let html, data, errorMsg\n \n try {\n html = await d3.html(url)\n data = convertTableToJSON(html)\n errorMsg = ''\n } catch(error) {\n data = await d3.tsv(fallback_url)\n errorMsg = error\n }\n \n // clean up data\n data = data.map(d => ({\n date: new Date(d.Date),\n totalArticles: +d[\"Total articles\"],\n cleanupArticles: +d[\"Cleanup articles\"],\n cleanupIssues: +d[\"Cleanup issues\"],\n newArticles: +d[\"New articles\"],\n resolvedArticles: +d[\"Resolved articles\"]\n }))\n if (isNaN(data[data.length - 1].date)) data = data.slice(0, -1)\n \n return {data: data, errorMsg: errorMsg}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"lastData = rawData.data[rawData.data.length-1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"data = selectData.data","pinned":false,"hidden":false,"mode":"ojs"},{"id":2067,"value":"dateDiffs = {\n const allDates = data.map(d => d.date)\n const startDates = allDates.slice(0,-1)\n const endDates = allDates.slice(1)\n \n return Array(endDates.length).fill(0)\n .map((x,i) => (endDates[i] - startDates[i])/(1000 * 60 * 60 * 24)) // convert milliseconds to days\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"md`---\n## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2279,"value":"getSpanX = (d,i) => {\n const dataMaxIter = data.length - 1;\n let x0, x1\n if (dataMaxIter === 0) return [margin.left,width-margin.right]\n x0 = (i === 0) ? x(d.date) : (x(data[i-1].date) + x(d.date))/2\n x1 = (i === dataMaxIter) ? x(d.date) : (x(data[i+1].date) + x(d.date))/2\n return {x0,x1, diff: x1-x0}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"line = yVals => d3.line()\n //.defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(yVals)","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"x = {\n const domain = d3.extent(data, d => d.date)\n return d3.scaleTime()\n .domain(true ? domain : [domain[0], d3.timeDay.offset(domain[1],7)])\n .range([margin.left, width - margin.right])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"yAxis = (y, format) => g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(format))\n //.call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"yAxisPercent = y => g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(d3.format(\".0%\")))\n //.call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"margin = ({left:40, right:10, top:10, bottom:20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"textWidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1741,"value":"function convertTableToJSON(tableDOM) {\n const header = Array.from(tableDOM.querySelectorAll(\"th\")).map(d => d.innerText)\n const table = Array.from(tableDOM.querySelectorAll(\"tbody tr\"))\n .map(d => {\n const entries = Array.from(d.querySelectorAll(\"td\")).map((x, i) => [header[i], x.innerText])\n const obj = {}\n for (const [key, value] of entries) {\n obj[key] = value\n }\n return obj\n })\n \n return table\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1906,"value":"timeFormat = t => d3.utcFormat(\"%B %d, %Y\")(t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"md`---\n## Display styling\n\n* Code block styling was inspired by [@observablehq/how-to-embed-a-notebook-in-a-react-app](/@observablehq/how-to-embed-a-notebook-in-a-react-app)\n* On-hover effects for all graphs was accomplished using CSS\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`---\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"import {drawFabric} from \"@lemonnish/weaving-imagery\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}