31:T6c1,regressionPlot = { const svg = d3.select(DOM.svg(size.width, size.height)); svg .append('g') .attr("class", "axis raw x") .style("font-size", "15px") .call(xAxis); svg .append("g") .attr("class", "axis raw y") .style("font-size", "15px") .call(yAxis); // First, draw the 95CI. switch (displayRegressionBootstraps) { case "band": svg .append("path") .datum(regBoots.predictionCIs) .attr("fill", "#ccc") .attr("fill-opacity", 0.5) .attr("stroke", "none") .attr("d", d3area); break; case "all": svg .append("g") .attr("stroke", "black") .attr("stroke-width", 0.1) .attr("stroke-opacity", 0.25) .selectAll("line") .data(regBoots.reglines) .join("line") .attr("x1", d => xScale(d.x1)) .attr("x2", d => xScale(d.x2)) .attr("y1", d => yScale(d.y1)) .attr("y2", d => yScale(d.y2)); break; } // Then, draw the regression line. svg .append("line") .attr("class", "line regression") .attr("stroke", regLineColor) .attr("stroke-width", 2) .datum(regression) .attr("x1", d => xScale(d[0][0])) .attr("x2", d => xScale(d[1][0])) .attr("y1", d => yScale(d[0][1])) .attr("y2", d => yScale(d[1][1])); // Lastly, draw the individual data points. svg .append("g") .attr("class", "scatter") .attr("stroke", "white") .attr("stroke-width", 0.75) .attr("fill", rawDataColor) .selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", rawDataPointRadius + "pt"); return svg.node(); }32:Tb80,bootstrapRegression = function( data, xscale = xScale, yscale = yScale, randomSeed = 12345, ci = 95, reps = 1000, confIntGrid = 100 ) { let seedrg = seedrnd(randomSeed); let ciLowIndex = Math.round(((100 - ci) * reps) / 200); let ciHighIndex = reps - ciLowIndex; let r2 = []; let predictions = []; // create empty arrays that will be populated by predictions // for each point of the xRange. let predictionCIs = []; let reglines = []; let xScaleDomain = xscale.domain(); let xRange = d3.range( xScaleDomain[0], xScaleDomain[1], (xScaleDomain[1] - xScaleDomain[0]) / confIntGrid ); for (let i = 0; i < reps; i++) { let dat = simpleStatistics.sampleWithReplacement(data, data.length, seedrg); let reg_ = regFunc(dat); // add predictX function. let reg = { ...reg_ }; reg.predictX = y => { return (y - reg.b) / reg.a; }; let pred = reg.predict; // at each point of the xRange grid, get the y prediction. for (let j = 0; j < xRange.length; j++) { if (predictions.length == j) { predictions.push([]); } let p_ = pred(xRange[j]); // to ensure the band doesn't extend beyond the y-axis limits. if (p_ < yscale.domain()[0]) { p_ = yscale.domain()[0]; } else if (p_ > yscale.domain()[1]) { p_ = yscale.domain()[1]; } predictions[j].push(p_); } // very boilerplate-ish.... let x1 = reg[0][0]; let y1 = reg[0][1]; let x2 = reg[1][0]; let y2 = reg[1][1]; let xScaleDomain = xScale.domain(); let yScaleDomain = yScale.domain(); if (x1 < xScaleDomain[0]) { x1 = xScaleDomain[0]; y1 = reg.predict(x1); } if (x2 > xScaleDomain[1]) { x2 = xScaleDomain[1]; y2 = reg.predict(x2); } if (y1 < yScaleDomain[0]) { y1 = yScaleDomain[0]; x1 = reg.predictX(y1); } if (y2 > yScaleDomain[1]) { y2 = yScaleDomain[1]; x2 = reg.predictX(y2); } reglines.push({ x1: x1, x2: x2, y1: y1, y2: y2 }); // save the r2 of thie current bootstrapped regression. r2.push(reg.rSquared); } // Sort the rSquareds. r2.sort((a, b) => a - b); // Do the same for each of the predictions. for (let k = 0; k < predictions.length; k++) { // Need to sort the array *numerically*... // See https://medium.com/coding-at-dawn/how-to-sort-an-array-numerically-in-javascript-2b22710e3958 predictions[k].sort((a, b) => a - b); predictionCIs.push({ x: xRange[k], low: predictions[k][ciLowIndex], high: predictions[k][ciHighIndex] }); } let originalLinReg = regFunc(data); return { rSquared: originalLinReg.rSquared, rSquaredCILow: r2[ciLowIndex], rSquaredCIHigh: r2[ciHighIndex], rSquaredSorted: r2, predictions: predictions, predictionCIs: predictionCIs, reglines: reglines }; }33:[] 2f:{"title":"Easy Linear Regression!","cells":[{"id":0,"value":"md`# Easy Linear Regression!\n\nFeaturing bootstrapped confidence intervals for both the ${tex`R^2`} and regression line!\n\nNo need to install anything! All in your browser!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"viewof csv = file({\n title: \"Upload your CSV\",\n description: \"Only .csv files accepted. They must have only 2 columns.\",\n accept: \".csv\",\n multiple: false\n}) // viewof csv = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"md`*Download a [demo CSV](https://drive.google.com/file/d/1-_hQPF7BaEdkaT_D5M5tRSulwM1tH6wa/view?usp=sharing) to upload instead, with the sepal widths and lengths from the [iris dataset](https://en.wikipedia.org/wiki/Iris_flower_data_set).*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"viewof selectedY = radio({\n title: 'Select the y-column',\n\n options: df.columns.map(function(c, i) {\n return { label: c, value: i };\n }),\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"viewof displayRegressionBootstraps = radio({\n title: 'How to display bootstraps',\n\n options: [\n { label: \"Show all\", value: \"all\" },\n { label: \"Show as 95CI band\", value: \"band\" }\n ],\n\n value: \"band\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"result = md`\n## Result\nThe regression shown above is described by the equation \n${tex`y = ${regression.a.toFixed(3)}x ${\n regression.b < 0 ? \" \" : \"+\"\n} ${regression.b.toFixed(3)}`}. \n\nThe coefficient of determination, or ${tex`R^2`}, \nis ${regression.rSquared.toFixed(3)} \n[95CI ${regBoots.rSquaredCILow.toFixed(3)}, \n ${regBoots.rSquaredCIHigh.toFixed(3)}].`","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"viewof rawDataColor = color({\n value: \"#0000ff\",\n title: \"Color of the raw datapoints\"\n // description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"viewof rawDataPointRadius = slider({\n min: 1,\n max: 8,\n step: 0.25,\n value: 3.5,\n // value: Math.floor(data.length / 50),\n title: \"Radius of raw datapoints (points)\",\n description: \"1 point = 1/72 inch\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"viewof regLineColor = color({\n value: \"#df1144\",\n title: \"Color of the regression line\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"viewof canvasWidth = slider({\n min: width / 4,\n max: width,\n step: 10,\n value: width / 2,\n title: \"Plot width (pixels)\"\n // description: \"1 pixel = 1/96 in\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"viewof canvasHeight = slider({\n min: width / 4,\n max: width,\n step: 10,\n value: width / 2,\n title: \"Plot height (pixels)\",\n description: \"1 pixel = 1/96 inch\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"downloadBtn = svgDownloadButton(regressionPlot, \"your-regression-plot.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Plot Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({ top: 20, right: 40, bottom: 50, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"size = ({ width: canvasWidth, height: canvasHeight })","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`## Datasets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"regBoots = bootstrapRegression(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"regression = {\n let reg = regFunc(data);\n\n let out = { ...reg };\n\n out.predictX = y => {\n return (y - out.b) / out.a;\n };\n\n // very boilerplate-ish....\n let x1 = out[0][0];\n let y1 = out[0][1];\n\n let x2 = out[1][0];\n let y2 = out[1][1];\n\n let xScaleDomain = xScale.domain();\n let yScaleDomain = yScale.domain();\n\n if (x1 < xScaleDomain[0]) {\n x1 = xScaleDomain[0];\n y1 = out.predict(x1);\n }\n\n if (x2 > xScaleDomain[1]) {\n x2 = xScaleDomain[1];\n y2 = out.predict(x2);\n }\n\n if (y1 < yScaleDomain[0]) {\n y1 = yScaleDomain[0];\n x1 = out.predictX(y1);\n }\n\n if (y2 > yScaleDomain[1]) {\n y2 = yScaleDomain[1];\n x2 = out.predictX(y2);\n }\n\n out[0][0] = x1;\n out[0][1] = y1;\n\n out[1][0] = x2;\n out[1][1] = y2;\n\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"data = df.map(row => ({\n x: row[df.columns[selectedX()]],\n y: row[df.columns[selectedY]]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"df = d3.csvParse(await Files.text(csv), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## d3 Plot Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(data, d => d.x))\n .range([margin.left * 2, size.width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(data, d => d.y))\n .range([size.height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0, ${size.height - margin.bottom * 0.9})`)\n .call(d3.axisBottom(xScale))\n // .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", xScale(getMidPoint(data, \"x\")))\n .attr(\"y\", margin.bottom * 0.8)\n .attr(\"fill\", \"#000\")\n .attr(\"font-size\", \"25px\")\n .attr(\"text-anchor\", \"middle\")\n .text(df.columns[selectedX()])\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left * 1.5},0)`)\n .call(d3.axisLeft(yScale))\n // .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n\n .attr(\"x\", 0 - size.height / 2)\n .attr(\"y\", 0 - margin.left)\n\n .attr(\"transform\", \"rotate(-90)\")\n\n // .attr(\"text-anchor\", \"start\")\n .attr(\"fill\", \"#000\")\n .attr(\"font-size\", \"25px\")\n .attr(\"text-anchor\", \"middle\")\n .text(df.columns[selectedY])\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"d3area = d3\n .area()\n .x(d => xScale(d.x))\n .y0(d => yScale(d.low))\n .y1(d => yScale(d.high))","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`## Regression and Bootstrap Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"selectedX = () => {\n return selectedY === \"0\" ? 1 : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"regFunc = d3reg\n .regressionLinear()\n .x(d => d.x)\n .y(d => d.y)\n .domain(xScale.domain())","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"getMidPoint = function(data, column) {\n return (\n d3.min(data, d => d[column]) +\n (d3.max(data, d => d[column]) - d3.min(data, d => d[column])) / 2\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"d3reg = require(\"d3-regression@1.3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"simpleStatistics = require(\"simple-statistics@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"seedrnd = require('seedrandom@3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"import { color, file, radio, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"import { svgDownloadButton } from '@forresto/svg-download-button'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}