31:[] 2f:{"title":"Logarithmic Regression","cells":[{"id":0,"value":"md`# Logarithmic Regression\n\nLogarithmic regressions take the form ${tex`y = a{\\cdot} {\\ln}(x) + b`}. Use [d3-regression](https://github.com/HarryStevens/d3-regression)'s d3.[regressionLog()](https://github.com/HarryStevens/d3-regression#regressionLog) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"regressionGenerator = d3.regressionLog()\n .x(d => d.x)\n .y(d => d.y)\n .domain([1e-6, 32]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`d3.regressionLog() 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\nWhen you pass data to the regression generator, you'll get back an array of points representing a curved line. You can use a d3.[line()](https://github.com/d3/d3-shape#line) to render it in SVG or Canvas:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"lineGenerator = d3.line()\n .x(d => xScale(d[0]))\n .y(d => yScale(d[1]));","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"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(\"path\")\n .attr(\"class\", \"regression\")\n .datum(regressionGenerator(data))\n .attr(\"d\", lineGenerator);\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`This example comes from [PTC](http://support.ptc.com/help/mathcad/en/index.html#page/PTC_Mathcad_Help%2Fexample_logarithmic_regression.html%23). The regression is described by the equation ${tex`y = ${regressionGenerator(data).a.toFixed(3)} {\\cdot} {\\ln}(x) + ${regressionGenerator(data).b.toFixed(3)}`}. The coefficient of determination, or ${tex`R^2`}, is ${regressionGenerator(data).rSquared.toFixed(3)}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"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"},{"id":66,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"data = [{x: 1, y: 4.181}, {x: 2, y: 4.665}, {x: 3, y: 5.296}, {x: 4, y: 5.365}, {x: 5, y: 5.448}, {x: 6, y: 5.744}, {x: 7, y: 5.653}, {x: 8, y: 5.844}, {x: 9, y: 6.362}, {x: 10, y: 6.38}, {x: 11, y: 6.311}, {x: 12, y: 6.457}, {x: 13, y: 6.479}, {x: 14, y: 6.59}, {x: 15, y: 6.74}, {x: 16, y: 6.58}, {x: 17, y: 6.852}, {x: 18, y: 6.531}, {x: 19, y: 6.682}, {x: 20, y: 7.013}, {x: 21, y: 6.82}, {x: 22, y: 6.647}, {x: 23, y: 6.951}, {x: 24, y: 7.121}, {x: 25, y: 7.143}, {x: 26, y: 6.914}, {x: 27, y: 6.941}, {x: 28, y: 7.226}, {x: 29, y: 6.898}, {x: 30, y: 7.392}, {x: 31, y: 6.938}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"margin = ({left: 29, right: 8, top: 11, bottom: 26});","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"base = Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"innerWidth = base - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"innerHeight = base - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"xScale = d3.scaleLinear()\n .domain([0, 32])\n .range([0, innerWidth]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"yScale = d3.scaleLinear()\n .domain([4, 8])\n .range([innerHeight, 0]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"xAxisGenerator = d3.axisBottom(xScale)\n .tickSize(innerHeight + 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"yAxisGenerator = d3.axisLeft(yScale)\n .tickSize(innerWidth + 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"d3 = require(\"d3-array@3\", \"d3-axis@3\", \"d3-regression@2\", \"d3-scale@4\", \"d3-shape@3\", \"d3-selection@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}