31:T5d0,chart = { const svg = d3.create("svg") .attr("title", data.barChartSVGTitle) .attr("class", "chart") .attr("viewBox", [0, 0, width, height]); const defs = svg .append("defs"); const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `) svg.append("g") .attr("class", "chart-title") .call(chartTitle); svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", "bar") .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d.y)) .style("fill", barColor); svg.append("path") .attr("id", "linear-regression-fitted-line") .datum(regressionEndpoints) .attr("fill", "none") .attr("filter", pencil) // optional pencil filter styling .attr("stroke", "#534e7a") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d3.line() .x(d => x(d.x)) .y(d => y(d.y))); svg.append("g") .attr("class", "chart-by") .call(chartBy) return svg.node(); }32:T41f,render_data_table = (data, options = {}) => { let caption = ""; let ariaLabelledbyCaption = ""; if (options.caption) { caption = `${options.caption}`; ariaLabelledbyCaption = `aria-labelledby="caption"`; } let theadRowHeaderCells; if (options.columns) { theadRowHeaderCells = options.columns.map((d) => { return `${d}` }); } else { theadRowHeaderCells = Object.keys(data[0]).map((d, i) => { return `${d}` }); } let focusable = 'tabindex="0"'; if (options.focusable === false) { focusable = ''; } return html`

${caption} ${theadRowHeaderCells} ${data.map(row => { return html`${Object.values(row).map(col => { return ``; })}`; })}

${col}

`}33:T63d,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 21 Jun 2020.csv").text(); const rowConversionFunction = ({ "Day": dayCount, "Title": title, "URL": url, "Number of cells": y, "Date": x }) => ({ dayCount, title, url, x: timeParser(x), dayOfWeek: d3.timeFormat("%a")(timeParser(x)), weekOfYear: d3.timeFormat("%W")(timeParser(x)), y: +y }); let dataObjectTarget = d3.csvParse(csvString, rowConversionFunction); let minWeek = d3.min(dataObjectTarget, d => d.weekOfYear); dataObjectTarget = dataObjectTarget.map(d => ({...d, weekOfYear: "Week " + (d.weekOfYear - minWeek + 1)})); // dataObjectTarget = d3.rollups(dataObjectTarget, v => d3.format("d")(d3.mean(v, d => d.y)), d => d3.timeFormat("%a")(d.dayOfWeek)) // .map(d => ({x: d[0], y: d[1] })); const extraPropertiesSource = { xAxisLabel: "Day of the week", yAxisLabel: "Cells", barChartSVGTitle: "This bar chart shows cells written each day of the week", barChartTitle: "Cells written 25 April – 20 June 2020", barChartCaption: "This chart shows cells written each day of the week across notebooks in the “Journal: Getting Started with Data Viz” collection, 25 April – 20 June 2020.", tableCaption: "This table shows cells written each day of the week across notebooks 25 April – 20 June 2020."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }34:[{"id":"3e7cf67cbb037bd7af02f9e45471244357a9b6cf07f0b96e1b9048191f5d7dd131dea646e72f1af17751d5dc355c386e3f71302c9e296b47c777d577308de68b","href":"https://static.observableusercontent.com/files/3e7cf67cbb037bd7af02f9e45471244357a9b6cf07f0b96e1b9048191f5d7dd131dea646e72f1af17751d5dc355c386e3f71302c9e296b47c777d577308de68b","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 21 Jun 2020.csv","type":"text/csv","lastModified":1592907349861.951,"size":12743}] 2f:{"title":"23 June 2020: Linear Regression","cells":[{"id":0,"value":"md`# 23 June 2020: Linear Regression`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`After [22 June 2020: D3 Bar Chart Brush (Work In Progress)](https://observablehq.com/@didoesdigital/22-june-2020-d3-bar-chart-brush-work-in-progress), I am taking a break from brushes because that was exhausting. Let's detour through linear regression, which I've been wondering about for a while.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9837,"value":"md`I'm continuing to chart the cells I've written across notebooks in Observable in: [Journal: Getting Started with Data Viz](https://observablehq.com/collection/@didoesdigital/journal-getting-started-with-data-viz-collection).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10806,"value":"md`## Linear regression`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10810,"value":"md`While it appears D3 now has regression built in (see [Introducing d3-regression by Harry Stevens](https://observablehq.com/@harrystevens/introducing-d3-regression)), we're going to use the [Simple Statistics](https://simplestatistics.org/) package, which is a popular choice:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10621,"value":"ss = require(\"simple-statistics@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10639,"value":"md`First we determine the **linear regression**:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10633,"value":"md`\n> Simple linear regression is a simple way to find a fitted line between a set of coordinates. This algorithm finds the slope and y-intercept of a regression line using the least sum of squares.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10643,"value":"md`This gives us the slope of the fitted line, \\`m\\`, and the [y-intercept](https://en.wikipedia.org/wiki/Y-intercept), \\`b\\` (where the line passes through Y at X0):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10653,"value":"linearRegression = ss.linearRegression(data.map(d => ([+d.x, d.y]))); // coerce d.x date to a number","pinned":true,"hidden":false,"mode":"ojs"},{"id":10647,"value":"md`Then we create a **linear regression line** function using that linear regression info, so we can pass in any X value and it will tell us the corresponding Y value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10663,"value":"linearRegressionLine = ss.linearRegressionLine(linearRegression);","pinned":true,"hidden":false,"mode":"ojs"},{"id":10761,"value":"md`To draw the line, we only need to know the end points of the regression line for our chart, which we calculate using our linear regression line function on the first and last data points:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10746,"value":"regressionEndpoints = [\n { x: data[0].x, y: linearRegressionLine(+data[0].x) },\n { x: data[data.length - 1].x, y: linearRegressionLine(+data[data.length - 1].x) }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":10732,"value":"md`Finally, we draw the linear regression fitted line using our regression end points, a D3 line generator, and an SVG path:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9076,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":10847,"value":"md`Fantastic!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10624,"value":"md`## Resources`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":10626,"value":"md`\n- [Simple Statistics](https://simplestatistics.org/)\n - [\\`linearRegression\\`](https://simplestatistics.org/docs/#linearregression)\n - [\\`linearRegressionLine\\`](https://simplestatistics.org/docs/#linearregressionline)\n- [D3 line chart with a linear regression line by Tom MacWright](https://observablehq.com/@tmcw/d3-line-chart-with-a-linear-regression-line)\n- [Introducing d3-regression by Harry Stevens](https://observablehq.com/@harrystevens/introducing-d3-regression)\n- [Linear Regression by Mike Bostock](https://observablehq.com/@mbostock/linear-regression)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9062,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([margin.left, width - margin.right])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs"},{"id":9066,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":10061,"value":"chartTitle = g => g\n .append(\"text\")\n .attr(\"id\", \"chart-title\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \"1em\")\n .style(\"font-weight\", \"800\")\n .style(\"font-size\", \"clamp(.7rem, 2.5vw, 1.2rem)\") // minimum, preferred, maximum\n .text(data.barChartTitle);","pinned":true,"hidden":false,"mode":"ojs"},{"id":10071,"value":"chartBy = g => g\n .attr(\"transform\", `translate(${width}, ${height})`)\n .append(\"text\")\n .attr(\"id\", \"source\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \"-0.5em\")\n .attr(\"text-anchor\", \"end\")\n .text('@DiDoesDigital');","pinned":true,"hidden":false,"mode":"ojs"},{"id":9059,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":9662,"value":"margin = ({top: 24, right: 0, bottom: 48, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9078,"value":"barChartStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10329,"value":"barColor = \"#766FAE\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10346,"value":"inactiveColor = \"#E6E5F0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10328,"value":"activeColor = \"#534e7a\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9082,"value":"dataTableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9049,"value":"typographyStyles = html`