31:T4c2,{ const svg = d3.create("svg") .attr("width", size) .attr("height", size); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); g.append("g") .attr("transform", `translate(0, ${y(0)})`) .call(d3.axisBottom(x).tickValues(d3.range(-10, 15, 5).filter(n => n))); g.append("g") .attr("transform", `translate(${x(0)})`) .call(d3.axisRight(y).tickValues(d3.range(-100, 150, 50).filter(n => n))); g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#888") .attr("stroke-width", 2) .attr("d", line); g.append("path") .datum(tanPts) .attr("stroke", c[1]) .attr("stroke-width", 2) .attr("d", line); g.append("path") .datum(secPts) .attr("stroke", c[2]) .attr("stroke-width", 2) .attr("d", line); g.append("circle") .attr("cx", x(x1)) .attr("cy", y(y1)) .attr("r", 3) .attr("fill", "#222") .attr("stroke", "#fff") g.append("circle") .attr("cx", x(x2)) .attr("cy", y(y2)) .attr("r", 3) .attr("fill", "#222") .attr("stroke", "#fff") return svg.node() }32:[] 2f:{"title":"Secant & Tangent Lines on a Power Function","cells":[{"id":232,"value":"md`# Secant & Tangent Lines on a Power Function\n\nThe closer x1 and x2 are to each other, the closer the slope of the secant and tangent lines.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"viewof x1 = Inputs.range([-10, 10], { value: 2, label: \"x1\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof x2 = Inputs.range([-10, 10], { value: 4, label: \"x2\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"html`\n

\n Tangent\n

Slope

${tanM}\n

Intercept

${tanB}\n

\n Secant\n

Slope

${secM}\n

Intercept

${secB}\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"// You can change the exponent\nexp = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"// If you change this things will break\nfn = x => x ** exp","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"// https://www.mathsisfun.com/calculus/power-rule.html\ndf = x => exp * Math.pow(x, exp - 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"y1 = fn(x1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"y2 = fn(x2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"tanM = df(x1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"tanB = y1 - tanM * x1","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"tanPts = xdomain.map(x => [x, tanM * x + tanB]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"secM = (y2 - y1) / (x2 - x1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"secB = y1 - secM * x1","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"secPts = xdomain.map(x => [x, secM * x + secB]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"c = d3.schemeSet2","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"line = d3.line()\n .x(d => x(d[0]))\n .y(d => y(d[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"data = {\n const out = [];\n for (let i = 0; i < w; i++){\n const dx = x.invert(i);\n const dy = fn(dx);\n out.push([dx, dy])\n }\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"x = d3.scaleLinear(xdomain, [0, w])","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"y = d3.scaleLinear(ydomain, [h, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"xdomain = [-10, 10]","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"ydomain = [-100, 100]","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"margin = ({left: 8, right: 6, top: 7, bottom: 7})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"size = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"w = size - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"h = size - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { funplot } from \"@mbostock/funplot\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}