2f:T400,{ const svg = d3.select(DOM.svg(innerWidth + margin.left + margin.right, innerHeight + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .attr("class", "axis") .call(xAxisLinear) .selectAll(".tick") .classed("baseline", d => d == 0); g.append("g") .attr("class", "axis") .attr("transform", `translate(${innerWidth})`) .call(yAxisLinear) .selectAll(".tick") .classed("baseline", d => d == 0); g.selectAll("circle") .data(dataLinear) .enter().append("circle") .attr("r", 3) .attr("cx", d => xScaleLinear(d.x)) .attr("cy", d => yScaleLinear(d.y)); g.append("line") .attr("class", "regression") .datum(linearRegression(dataLinear)) .attr("x1", d => xScaleLinear(d[0][0])) .attr("x2", d => xScaleLinear(d[1][0])) .attr("y1", d => yScaleLinear(d[0][1])) .attr("y2", d => yScaleLinear(d[1][1])); return svg.node(); }30:Tf27,dataPower = [{"game":"Wii Sports","rank":1,"sales":82.74},{"game":"Super Mario Bros.","rank":2,"sales":40.24},{"game":"Mario Kart Wii","rank":3,"sales":35.82},{"game":"Wii Sports Resort","rank":4,"sales":33},{"game":"Pokemon Red/Pokemon Blue","rank":5,"sales":31.37},{"game":"Tetris","rank":6,"sales":30.26},{"game":"New Super Mario Bros.","rank":7,"sales":30.01},{"game":"Wii Play","rank":8,"sales":29.02},{"game":"New Super Mario Bros. Wii","rank":9,"sales":28.62},{"game":"Duck Hunt","rank":10,"sales":28.31},{"game":"Brain Age: Train Your Brain in Minutes a Day","rank":20,"sales":20.22},{"game":"Call of Duty: Modern Warfare 3","rank":30,"sales":14.76},{"game":"Super Smash Bros. Brawl","rank":40,"sales":13.04},{"game":"Pokemon Omega Ruby/Pokemon Alpha Sapphire","rank":50,"sales":11.33},{"game":"Super Mario 64","rank":60,"sales":10.42},{"game":"Gran Turismo 2","rank":70,"sales":9.49},{"game":"Halo 2","rank":80,"sales":8.49},{"game":"Pac-Man","rank":90,"sales":7.81},{"game":"Battlefield 3","rank":100,"sales":7.34},{"game":"FIFA Soccer 11","rank":200,"sales":5.08},{"game":"Fallout 3","rank":300,"sales":4.01},{"game":"Professor Layton and the Unwound Future","rank":400,"sales":3.36},{"game":"Hot Shots Golf 3","rank":500,"sales":2.89},{"game":"Dragon Age: Origins","rank":600,"sales":2.57},{"game":"Just Dance 2015","rank":700,"sales":2.28},{"game":"Metal Gear Solid: Peace Walker","rank":800,"sales":2.09},{"game":"The Sims: Makin' Magic","rank":900,"sales":1.92},{"game":"2 Games in 1 Double Pack: The Incredibles / Finding Nemo: The Continuing Adventures","rank":1000,"sales":1.76},{"game":"Heavenly Sword","rank":1100,"sales":1.66},{"game":"Active Life: Outdoor Challenge","rank":1200,"sales":1.55},{"game":"The SpongeBob SquarePants Movie","rank":1300,"sales":1.46},{"game":"Deus Ex: Human Revolution","rank":1400,"sales":1.39},{"game":"LEGO Batman: The Videogame","rank":1500,"sales":1.32},{"game":"Baldur's Gate: Dark Alliance","rank":1600,"sales":1.24},{"game":"FIFA 14","rank":1700,"sales":1.19},{"game":"Guitar Hero 5","rank":1800,"sales":1.14},{"game":"Fisherman's Bass Club","rank":1900,"sales":1.08},{"game":"Dance Dance Revolution SuperNOVA","rank":2000,"sales":1.04},{"game":"Guitar Hero: Aerosmith","rank":2100,"sales":0.99},{"game":"The SpongeBob SquarePants Movie","rank":2200,"sales":0.94},{"game":"SOCOM 4: U.S. Navy SEALs","rank":2300,"sales":0.9},{"game":"Wizards of Waverly Place","rank":2400,"sales":0.87},{"game":"I Spy: Fun House","rank":2500,"sales":0.83},{"game":"The Walking Dead: Season One","rank":2600,"sales":0.79},{"game":"SoulCalibur V","rank":2700,"sales":0.76},{"game":"Yoshi","rank":2800,"sales":0.73},{"game":"NBA Live 09","rank":2900,"sales":0.71},{"game":"Red Steel","rank":3000,"sales":0.68},{"game":"The Evil Within","rank":3100,"sales":0.65},{"game":"Disney Universe","rank":3200,"sales":0.63},{"game":"Cooking Mama 4: Kitchen Magic!","rank":3300,"sales":0.61},{"game":"Total War: Shogun 2","rank":3400,"sales":0.59},{"game":"Tetris Party Deluxe","rank":3500,"sales":0.58},{"game":"Lips: Number One Hits","rank":3600,"sales":0.56},{"game":"System 3 presents Ferrari Challenge Trofeo Pirelli","rank":3700,"sales":0.54},{"game":"Alice in Wonderland","rank":3800,"sales":0.53},{"game":"Summoner","rank":3900,"sales":0.51},{"game":"Cars 2","rank":4000,"sales":0.5},{"game":"You're in the Movies","rank":4100,"sales":0.48},{"game":"Need for Speed Carbon","rank":4200,"sales":0.47},{"game":"iCarly","rank":4300,"sales":0.46},{"game":"Sled Storm","rank":4400,"sales":0.45},{"game":"Need for Speed Underground 2","rank":4500,"sales":0.43},{"game":"SpongeBob's Truth or Square (US sales)","rank":4600,"sales":0.42},{"game":"Destiny: The Taken King","rank":4700,"sales":0.41},{"game":"WipeOut 3 The Game","rank":4800,"sales":0.4},{"game":"NBA Live 09","rank":4900,"sales":0.39},{"game":"The Cat in the Hat","rank":5000,"sales":0.38}]31:T1099,dataLoess = [{"year":1900,"temperature":57.5605},{"year":1901,"temperature":57.3214},{"year":1902,"temperature":56.2134},{"year":1903,"temperature":56.317},{"year":1904,"temperature":57.4467},{"year":1905,"temperature":57.1332},{"year":1906,"temperature":57.2392},{"year":1907,"temperature":56.5545},{"year":1908,"temperature":56.2721},{"year":1909,"temperature":56.2912},{"year":1910,"temperature":57.7532},{"year":1911,"temperature":55.474},{"year":1912,"temperature":55.5628},{"year":1913,"temperature":56.5263},{"year":1914,"temperature":57.4455},{"year":1915,"temperature":56.8189},{"year":1916,"temperature":55.5932},{"year":1917,"temperature":56.6997},{"year":1918,"temperature":56.9079},{"year":1919,"temperature":56.3611},{"year":1920,"temperature":56.1257},{"year":1921,"temperature":57.3778},{"year":1922,"temperature":56.1452},{"year":1923,"temperature":56.4466},{"year":1924,"temperature":57.1546},{"year":1925,"temperature":57.206},{"year":1926,"temperature":58.8471},{"year":1927,"temperature":56.94},{"year":1928,"temperature":57.7148},{"year":1929,"temperature":57.3422},{"year":1930,"temperature":56.9745},{"year":1931,"temperature":58.3638},{"year":1932,"temperature":56.9607},{"year":1933,"temperature":56.8247},{"year":1934,"temperature":59.7805},{"year":1935,"temperature":56.8945},{"year":1936,"temperature":58.6637},{"year":1937,"temperature":57.2449},{"year":1938,"temperature":57.3329},{"year":1939,"temperature":58.4247},{"year":1940,"temperature":58.8798},{"year":1941,"temperature":57.1222},{"year":1942,"temperature":57.1411},{"year":1943,"temperature":57.894},{"year":1944,"temperature":56.2842},{"year":1945,"temperature":57.1573},{"year":1946,"temperature":56.8022},{"year":1947,"temperature":57.6003},{"year":1948,"temperature":55.6891},{"year":1949,"temperature":56.2792},{"year":1950,"temperature":58.1899},{"year":1951,"temperature":57.2899},{"year":1952,"temperature":56.8036},{"year":1953,"temperature":57.2433},{"year":1954,"temperature":57.6142},{"year":1955,"temperature":56.3011},{"year":1956,"temperature":57.0172},{"year":1957,"temperature":57.1288},{"year":1958,"temperature":58.9603},{"year":1959,"temperature":59.0416},{"year":1960,"temperature":58.0866},{"year":1961,"temperature":57.8652},{"year":1962,"temperature":57.4384},{"year":1963,"temperature":57.1077},{"year":1964,"temperature":56.6202},{"year":1965,"temperature":56.774},{"year":1966,"temperature":58.0992},{"year":1967,"temperature":57.5668},{"year":1968,"temperature":57.5989},{"year":1969,"temperature":57.5899},{"year":1970,"temperature":57.8767},{"year":1971,"temperature":56.2718},{"year":1972,"temperature":57.2934},{"year":1973,"temperature":57.3641},{"year":1974,"temperature":57.7036},{"year":1975,"temperature":56.3447},{"year":1976,"temperature":57.5107},{"year":1977,"temperature":58.0088},{"year":1978,"temperature":57.6893},{"year":1979,"temperature":57.7485},{"year":1980,"temperature":58.1052},{"year":1981,"temperature":59.3551},{"year":1982,"temperature":56.4003},{"year":1983,"temperature":57.6184},{"year":1984,"temperature":58.2609},{"year":1985,"temperature":57.3929},{"year":1986,"temperature":58.9427},{"year":1987,"temperature":58.3293},{"year":1988,"temperature":58.7852},{"year":1989,"temperature":58.1885},{"year":1990,"temperature":58.0488},{"year":1991,"temperature":58.16},{"year":1992,"temperature":59.2918},{"year":1993,"temperature":57.7408},{"year":1994,"temperature":58.1055},{"year":1995,"temperature":58.9677},{"year":1996,"temperature":59.594},{"year":1997,"temperature":59.1923},{"year":1998,"temperature":56.7942},{"year":1999,"temperature":58.0356},{"year":2000,"temperature":58.8363},{"year":2001,"temperature":59.2216},{"year":2002,"temperature":58.8964},{"year":2003,"temperature":59.529},{"year":2004,"temperature":58.9128},{"year":2005,"temperature":58.6833},{"year":2006,"temperature":58.6975},{"year":2007,"temperature":58.9929},{"year":2008,"temperature":58.9459},{"year":2009,"temperature":58.917},{"year":2010,"temperature":57.7926},{"year":2011,"temperature":57.5186},{"year":2012,"temperature":59.5448},{"year":2013,"temperature":59.3921},{"year":2014,"temperature":61.5208},{"year":2015,"temperature":60.7992},{"year":2016,"temperature":60.1429},{"year":2017,"temperature":60.4208}]32:[] 2d:{"title":"Introducing d3-regression","cells":[{"id":0,"value":"md`# Introducing d3-regression`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"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\nd3-regression can currently do the following types of regressions:\n- [Linear](#linear)\n- [Quadratic](#quadratic)\n- [Polynomial](#polynomial)\n- [Exponential](#exponential)\n- [Logarithmic](#logarithmic)\n- [Power law](#power)\n- [LOESS](#loess)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"linear = md`## Linear\n\nLinear regressions take the form ${tex`y = ax + b`}. Use d3.[regressionLinear()](https://github.com/HarryStevens/d3-regression#regressionLinear) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"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"},{"id":986,"value":"md`d3-regression's methods return configurable functions 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, each generator (besides [LOESS](#loess)) lets you specify a domain.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"md`The regression shown above is described by the equation ${tex`y = ${linearRegression(dataLinear).a.toFixed(3)}x + ${linearRegression(dataLinear).b.toFixed(3)}`}. The coefficient of determination, or ${tex`R^2`}, is ${linearRegression(dataLinear).rSquared.toFixed(3)}. This example comes from [Varsity Tutors](https://www.varsitytutors.com/hotmath/hotmath_help/topics/line-of-best-fit).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"xScaleLinear = d3.scaleLinear()\n .domain([-4, 16])\n .range([0, innerWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"yScaleLinear = d3.scaleLinear()\n .domain([-4, 16])\n .range([innerHeight, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"xAxisLinear = d3.axisBottom(xScaleLinear)\n .tickSize(innerHeight + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"yAxisLinear = d3.axisLeft(yScaleLinear)\n .tickSize(innerWidth + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"dataLinear = [{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"},{"id":181,"value":"quadratic = md`## Quadratic\n\nQuadratic regressions take the form ${tex`y = ax^2 + bx + c`}. Use d3.[regressionQuad()](https://github.com/HarryStevens/d3-regression#regressionQuad) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"quadraticRegression = d3.regressionQuad()\n .x(d => d.x)\n .y(d => d.y)\n .domain([-4, 4]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":963,"value":"md`When you pass data to the regression generator, you'll get back an array of points representing a curved line. You can use d3.[line()](https://github.com/d3/d3-shape#line) to render it in SVG or Canvas:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"lineGenerator = d3.line()\n .x(d => xScale(d[0]))\n .y(d => yScale(d[1]));","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"md`The regression shown below is described by the equation ${tex`y = ${quadraticRegression(dataQuadratic).a.toFixed(3)}x^2 + ${quadraticRegression(dataQuadratic).b.toFixed(3)}x + ${quadraticRegression(dataQuadratic).c.toFixed(3)}`}. The coefficient of determination, or ${tex`R^2`}, is ${quadraticRegression(dataQuadratic).rSquared.toFixed(3)}. This example is from [Varsity Tutors](https://www.varsitytutors.com/hotmath/hotmath_help/topics/quadratic-regression). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"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(xAxisQuadratic)\n .selectAll(\".tick\")\n .classed(\"baseline\", d => d === 0);\n\n g.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", `translate(${innerWidth})`)\n .call(yAxisQuadratic)\n .selectAll(\".tick\")\n .classed(\"baseline\", d => d === 0);\n\n g.selectAll(\"circle\")\n .data(dataQuadratic)\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(quadraticRegression(dataQuadratic))\n .attr(\"d\", lineGenerator);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"xScale = d3.scaleLinear()\n .domain([-4, 4])\n .range([0, innerWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"yScale = d3.scaleLinear()\n .domain([-2, 14])\n .range([innerHeight, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"xAxisQuadratic = d3.axisBottom(xScale)\n .tickSize(innerHeight + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"yAxisQuadratic = d3.axisLeft(yScale)\n .tickSize(innerWidth + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"dataQuadratic = [{x: -3, y: 7.5}, {x: -2, y: 3}, {x: -1, y: 0.5}, {x: 0, y: 1}, {x: 1, y: 3}, {x: 2, y: 6}, {x: 3, y: 14}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"polynomial = md`## Polynomial\n\nPolynomial regressions take the form ${tex`y = a_nx^n + … + a_1x + a_0`}, where ${tex`n`} is the order of the polynomial. Use d3.[regressionPoly()](https://github.com/harrystevens/d3-regression#regressionPoly) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"polynomialRegression = d3.regressionPoly()\n .x(d => d.x)\n .y(d => d.y)\n .order(3);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1051,"value":"md`I've specified an order above just to show how it works, but order defaults to 3 (i.e. a cubic regression), so that line of code is unnecessary. If order is set to 4, the regression generator will perform a fourth-degree polynomial regression. Likewise, if order is set to 2, the regression generator will perform a quadratic regression.\n\nBe careful about attempting to fit your data with higher order polynomials; though the regression line will fit your data with a high determination coefficient, it will likely have little predictive power for data outside of your domain.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"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(xAxisPolynomial)\n .selectAll(\".tick\")\n .classed(\"baseline\", d => d === 0);\n\n g.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", `translate(${innerWidth})`)\n .call(yAxisPolynomial)\n .selectAll(\".tick\")\n .classed(\"baseline\", d => d === 0);\n\n g.selectAll(\"circle\")\n .data(dataPolynomial)\n .enter().append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"cx\", d => xScalePolynomial(d.x))\n .attr(\"cy\", d => yScalePolynomial(d.y));\n\n g.append(\"path\")\n .attr(\"class\", \"regression\")\n .datum(polynomialRegression(dataPolynomial))\n .attr(\"d\", linePolynomial);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"md`The regression shown above is described by the equation ${tex`y = ${polynomialRegression(dataPolynomial).coefficients.reverse().map((d, i) => {\n const deg = Math.abs(polynomialRegression(dataPolynomial).coefficients.length - i - 1);\n return d.toFixed(2) + (deg > 0 ? \"x\" : \"\") + (deg > 1 ? \"^\" + deg : \"\")\n}).join(\"+\")}`}. The coefficient of determination, or ${tex`R^2`}, is ${polynomialRegression(dataPolynomial).rSquared.toFixed(3)}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"xScalePolynomial = d3.scaleLinear()\n .domain([0, 8])\n .range([0, innerWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"yScalePolynomial = d3.scaleLinear()\n .domain([140, 180])\n .range([innerHeight, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"linePolynomial = d3.line()\n .x(d => xScalePolynomial(d[0]))\n .y(d => yScalePolynomial(d[1]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"xAxisPolynomial = d3.axisBottom(xScalePolynomial)\n .tickSize(innerHeight + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"yAxisPolynomial = d3.axisLeft(yScalePolynomial)\n .tickSize(innerWidth + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"dataPolynomial = [{\"x\":0,\"y\":140},{\"x\":1,\"y\":149},{\"x\":2,\"y\":159.6},{\"x\":3,\"y\":159},{\"x\":4,\"y\":155.9},{\"x\":5,\"y\":169},{\"x\":6,\"y\":162.9},{\"x\":7,\"y\":169},{\"x\":8,\"y\":180}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"exponential = md`## Exponential\n\nExponential regressions take the form ${tex`y = ae^{bx}`}, where ${tex`e`} is [Euler's number](https://en.wikipedia.org/wiki/Eulers_number). Use d3.[regressionExp()](https://github.com/HarryStevens/d3-regression#regressionExp) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"exponentialRegression = d3.regressionExp()\n .x(d => d.x)\n .y(d => d.y)\n .domain([-2, 5.06]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`The below example comes from [Varsity Tutors](https://www.varsitytutors.com/hotmath/hotmath_help/topics/exponential-regression). The regression is described by the equation ${tex`y = ${exponentialRegression(dataExponential).a.toFixed(3)}e^{${exponentialRegression(dataExponential).b.toFixed(3)}x}`}. The coefficient of determination, or ${tex`R^2`}, is ${exponentialRegression(dataExponential).rSquared.toFixed(3)}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"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(xAxisExponential)\n .selectAll(\".tick\")\n .classed(\"baseline\", d => d === 0);\n\n g.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", `translate(${innerWidth})`)\n .call(yAxisExponential)\n .selectAll(\".tick\")\n .classed(\"baseline\", d => d === 0);\n\n g.selectAll(\"circle\")\n .data(dataExponential)\n .enter().append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"cx\", d => xScaleExponential(d.x))\n .attr(\"cy\", d => yScaleExponential(d.y));\n\n g.append(\"path\")\n .attr(\"class\", \"regression\")\n .datum(exponentialRegression(dataExponential))\n .attr(\"d\", lineExponential);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"xScaleExponential = d3.scaleLinear()\n .domain([-2, 10])\n .range([0, innerWidth]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"yScaleExponential = d3.scaleLinear()\n .domain([-10, 100])\n .range([innerHeight, 0]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"lineExponential = d3.line()\n .x(d => xScaleExponential(d[0]))\n .y(d => yScaleExponential(d[1]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"xAxisExponential = d3.axisBottom(xScaleExponential)\n .tickSize(innerHeight + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"yAxisExponential = d3.axisLeft(yScaleExponential)\n .tickSize(innerWidth + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"dataExponential = [{x: 0, y: 3}, {x: 1, y: 7}, {x: 2, y: 10}, {x: 3, y: 24}, {x: 4, y: 50}, {x: 5, y: 95}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"logarithmic = md`## Logarithmic\n\nLogarithmic regressions take the form ${tex`y = a{\\cdot} {\\ln}(x) + b`}. Use d3.[regressionLog()](https://github.com/HarryStevens/d3-regression#regressionLog) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"logarithmicRegression = d3.regressionLog()\n .x(d => d.x)\n .y(d => d.y)\n .domain([.81, 35]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"md`The below 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 = ${logarithmicRegression(dataLogarithmic).a.toFixed(3)} {\\cdot} {\\ln}(x) + ${logarithmicRegression(dataLogarithmic).b.toFixed(3)}`}. The coefficient of determination, or ${tex`R^2`}, is ${logarithmicRegression(dataLogarithmic).rSquared.toFixed(3)}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"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(xAxisLogarithmic)\n .selectAll(\".tick\")\n .classed(\"baseline\", d => d === 0);\n \n g.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", `translate(${innerWidth})`)\n .call(yAxisLogarithmic);\n\n g.selectAll(\"circle\")\n .data(dataLogarithmic)\n .enter().append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"cx\", d => xScaleLogarithmic(d.x))\n .attr(\"cy\", d => yScaleLogarithmic(d.y))\n\n g.append(\"path\")\n .attr(\"class\", \"regression\")\n .datum(logarithmicRegression(dataLogarithmic))\n .attr(\"d\", lineLogarithmic);\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"xScaleLogarithmic = d3.scaleLinear()\n .domain([0, 35])\n .range([0, innerWidth]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"yScaleLogarithmic = d3.scaleLinear()\n .domain([4, 8])\n .range([innerHeight, 0]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"lineLogarithmic = d3.line()\n .x(d => xScaleLogarithmic(d[0]))\n .y(d => yScaleLogarithmic(d[1]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"xAxisLogarithmic = d3.axisBottom(xScaleLogarithmic)\n .tickSize(innerHeight + 10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"yAxisLogarithmic = d3.axisLeft(yScaleLogarithmic)\n .tickSize(innerWidth + 10)\n .tickValues(d3.range(4, 9))\n .tickFormat(d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"dataLogarithmic = [{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":893,"value":"power = md`## Power law\n\nPower law regressions take the form ${tex`y = ax^b`}. Use d3.[regressionPow()](https://github.com/HarryStevens/d3-regression#regressionPow) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"powerRegression = d3.regressionPow()\n .x(d => d.rank)\n .y(d => d.sales);","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"md`The below example comes from [\"Power Law in Popular Media\"](https://medium.com/@michaeltauberg/power-law-in-popular-media-7d7efef3fb7c) by Michael Tauberg. The regression is described by the equation ${tex`y = ${powerRegression(dataPower).a.toFixed(3)}x^{${powerRegression(dataPower).b.toFixed(3)}}`}. The coefficient of determination, or ${tex`R^2`}, is ${powerRegression(dataPower).rSquared.toFixed(3)}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"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(xAxisPower)\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(yAxisPower)\n .selectAll(\".tick line\")\n .classed(\"baseline\", d => d === 0);\n\n g.selectAll(\"circle\")\n .data(dataPower)\n .enter().append(\"circle\")\n .attr(\"r\", 2)\n .attr(\"cx\", d => xScalePower(d.rank))\n .attr(\"cy\", d => yScalePower(d.sales))\n\n g.append(\"path\")\n .attr(\"class\", \"regression\")\n .datum(powerRegression(dataPower))\n .attr(\"d\", linePower);\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"xScalePower = d3.scaleLinear()\n .domain([0, 5e3])\n .range([0, innerWidth]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"yScalePower = d3.scaleLinear()\n .domain([100, 0])\n .range([0, innerHeight])","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"xAxisPower = d3.axisBottom(xScalePower)\n .tickSize(innerHeight + 10)\n .tickValues(d3.range(0, 6e3, 1e3))\n .tickFormat(d => d >= 1e3 ? `${d / 1e3}k` : d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"yAxisPower = d3.axisLeft(yScalePower)\n .tickSize(innerWidth + 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"linePower = d3.line()\n .x(d => xScalePower(d[0]))\n .y(d => yScalePower(d[1]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"loess = md`## LOESS\n\nd3-regression's implementation of the LOESS regression was adapted with very little modification from Jason Davies's [science.js](https://github.com/jasondavies/science.js), with the main difference that this API returns a configurable function with x- and y-accessors similar to other D3.js modules.\n\nUse d3.[regressionLoess()](https://github.com/HarryStevens/d3-regression#regressionLoess) like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"loessRegression = d3.regressionLoess()\n .x(d => d.year)\n .y(d => d.temperature)\n .bandwidth(bandwidth);","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"md`The chart below displays the average annual temperature in California from 1900 to 2017. You can [download the data from NOAA](https://www.ncdc.noaa.gov/cag/statewide/time-series). A prettier version of this chart was published in Axios on Nov. 15, 2018, under the headline [\"Humans are a wildfire threat multiplier\"](https://www.axios.com/humans-are-a-wildfire-threat-multiplier-f8f9afb3-a91f-449e-af10-9fa2011a8f81.html).\n\nAdjust the slider below to see how the smoothing line changes with the bandwidth, also called the \"smoothing parameter,\" which is the fraction of all points used to calculate each local fit. Higher bandwidths produce smoother lines, and vice versa.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"viewof bandwidth = slider({\n title: \"Bandwidth\",\n min: .02, \n max: 1, \n step: .01,\n value: .25\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"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(xAxisLoess);\n\n g.append(\"g\")\n .attr(\"class\", \"axis\")\n .attr(\"transform\", `translate(${innerWidth})`)\n .call(yAxisLoess);\n\n g.selectAll(\"circle\")\n .data(dataLoess)\n .enter().append(\"circle\")\n .attr(\"r\", 2)\n .attr(\"cx\", d => xScaleLoess(d.year))\n .attr(\"cy\", d => yScaleLoess(d.temperature));\n\n g.append(\"path\")\n .attr(\"class\", \"regression\")\n .datum(loessRegression(dataLoess))\n .attr(\"d\", lineLoess);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"xScaleLoess = d3.scaleLinear()\n .domain([1900, 2020])\n .range([0, innerWidth]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"yScaleLoess = d3.scaleLinear()\n .domain([55, 62])\n .range([innerHeight, 0]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"lineLoess = d3.line()\n .x(d => xScaleLoess(d[0]))\n .y(d => yScaleLoess(d[1]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"xAxisLoess = d3.axisBottom(xScaleLoess)\n .tickSize(innerHeight + 10)\n .tickValues(d3.range(1900, 2040, 20))\n .tickFormat(d => d % 100 === 0 ? d : \"`\" + d.toString().slice(2, 4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"yAxisLoess = d3.axisLeft(yScaleLoess)\n .tickSize(innerWidth + 10)\n .tickValues(d3.range(55, 63))\n .tickFormat(d => d);","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"margin = ({left: 29, right: 8, top: 13, bottom: 24});","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"base = Math.min(width, 400);","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"innerWidth = base - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"innerHeight = base - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"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). To draw the regression line, I used [d3-shape](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"},{"id":6,"value":"d3 = require.alias({\n \"d3-array\": \"d3-array@2\",\n \"d3-axis\": \"d3-axis@1\",\n \"d3-regression\": \"d3-regression@1\",\n \"d3-scale\": \"d3-scale@3\",\n \"d3-shape\": \"d3-shape@1\",\n \"d3-selection\": \"d3-selection@1\"\n})(\"d3-array\", \"d3-axis\", \"d3-regression\", \"d3-scale\", \"d3-shape\", \"d3-selection\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"import { slider } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}