28:null 29:["$","title",null,{"children":"Linear Regression | Harry Stevens | Observable"}] 2e:[] 2c:{"id":"a2ccc2b456a3c927","slug":"linear-regression","title":"Linear Regression","thumbnail":"848e00b5c5ef51791407413ae04a4128d2b5ff88ee61bacfabac4203716a31cf","access_level":"public","create_time":"$D2019-03-24T01:12:19.040Z","update_time":"$D2026-07-06T23:55:28.129Z","view_time":null,"first_public_time":"$D2019-04-08T13:33:43.437Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":256,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"5c8e3662c8f2381d","slug":"d3-regression","title":"d3-regression","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"Linear Regression","cells":[{"id":0,"value":"md`# Linear Regression\n\nLinear regressions take the form ${tex`y = ax + b`}. Use [d3-regression](https://github.com/HarryStevens/d3-regression)'s d3.[regressionLinear()](https://github.com/HarryStevens/d3-regression#regressionLinear) function like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"linearRegression = d3.regressionLinear()\n .x(d => d.x)\n .y(d => d.y)\n .domain([-1.7, 16]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`The regression generator returns a configurable function with x- and y- accessors (which default to d => d[0] and d => d[1], respectively). If you want the resulting line to extend beyond the extents of your input data, you can specify a domain.\n\nThe below example comes from [Varsity Tutors](https://www.varsitytutors.com/hotmath/hotmath_help/topics/line-of-best-fit). The regression is described by the equation ${tex`y = ${linearRegression(data).a.toFixed(3)}x + ${linearRegression(data).b.toFixed(3)}`}. The coefficient of determination, or ${tex`R^2`}, is ${linearRegression(data).rSquared.toFixed(3)}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"{\n const svg = d3.select(DOM.svg(innerWidth + margin.left + margin.right, innerHeight + margin.top + margin.bottom))\n \n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n\n g.append(\"g\")\n .attr(\"class\", \"axis\")\n .call(xAxisGenerator)\n .selectAll(\".tick line\")\n .classed(\"baseline\", d => d === 0);\n\n g.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", `translate(${innerWidth})`)\n .call(yAxisGenerator)\n .selectAll(\".tick line\")\n .classed(\"baseline\", d => d === 0);\n\n g.selectAll(\"circle\")\n .data(data)\n .enter().append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"cx\", d => xScale(d.x))\n .attr(\"cy\", d => yScale(d.y))\n\n g.append(\"line\")\n .attr(\"class\", \"regression\")\n .datum(linearRegression(data))\n .attr(\"x1\", d => xScale(d[0][0]))\n .attr(\"x2\", d => xScale(d[1][0]))\n .attr(\"y1\", d => yScale(d[0][1]))\n .attr(\"y2\", d => yScale(d[1][1]));\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`[**d3-regression**](https://github.com/harrystevens/d3-regression) is a [D3.js](https://d3js.org/) module for calculating statistical regressions from two-dimensional data. It is dependency-free, and its API exposes configurable functions that transform input data, in the manner of other D3 modules.\n\nFor an explanation of all of d3-regression's capabilities, see [this tutorial](https://observablehq.com/d/7b51129a2feec1d0).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = [{x: 8, y: 3}, {x: 2, y: 10}, {x: 11, y: 3}, {x: 6, y: 6}, {x: 5, y: 8}, {x: 4, y: 12}, {x: 12, y: 1}, {x: 9, y: 4}, {x: 6, y: 9}, {x: 1, y: 14}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"margin = ({left: 30, right: 9, top: 15, bottom: 23})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"base = Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"innerWidth = base - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"innerHeight = base - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"xScale = d3.scaleLinear()\n .domain([-4, 16])\n .range([0, innerWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"yScale = d3.scaleLinear()\n .domain([-4, 16])\n .range([innerHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"xAxisGenerator = d3.axisBottom(xScale)\n .tickSize(innerHeight + 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"yAxisGenerator = d3.axisLeft(yScale)\n .tickSize(innerWidth + 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"html` \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`## Imports\n\nTo make the scatterplot, I used [d3-axis](https://github.com/d3/d3-axis), [d3-scale](https://github.com/d3/d3-scale), and [d3-selection](https://github.com/d3/d3-selection). I also am loading [d3-regression](https://github.com/HarryStevens/d3-regression) with the rest of the D3.js modules.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3-axis@3\", \"d3-regression@2\", \"d3-scale@4\", \"d3-selection@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"