29:null 2a:["$","title",null,{"children":"Secant & Tangent Lines on a Power Function | Harry Stevens | Observable"}] 2f: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() }30:[] 2d:{"id":"0d7cee38818c09f2","slug":"secant-and-tangent-lines-on-an-exponential-function","title":"Secant & Tangent Lines on a Power Function","thumbnail":"af1b441c71e0819184fe7be294f5b2d19fbda956e6c20615fb13bf7f20d41570","access_level":"public","create_time":"$D2021-05-18T22:20:29.312Z","update_time":"$D2021-08-24T23:54:31.573Z","view_time":null,"first_public_time":"$D2021-05-19T15:11:22.054Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":378,"publish_version":378,"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":3,"collection":{"id":"d6b8b6eac28ef61c","slug":"math","title":"Math","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof x1 = Inputs.range([-10, 10], { value: 2, label: \"x1\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof x2 = Inputs.range([-10, 10], { value: 4, label: \"x2\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"// You can change the exponent\nexp = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"// If you change this things will break\nfn = x => x ** exp","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"y1 = fn(x1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"y2 = fn(x2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"tanM = df(x1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"tanB = y1 - tanM * x1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"tanPts = xdomain.map(x => [x, tanM * x + tanB]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"secM = (y2 - y1) / (x2 - x1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"secB = y1 - secM * x1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"secPts = xdomain.map(x => [x, secM * x + secB]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"c = d3.schemeSet2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"line = d3.line()\n .x(d => x(d[0]))\n .y(d => y(d[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"x = d3.scaleLinear(xdomain, [0, w])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"y = d3.scaleLinear(ydomain, [h, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"xdomain = [-10, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"ydomain = [-100, 100]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"margin = ({left: 8, right: 6, top: 7, bottom: 7})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"size = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"w = size - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"h = size - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { funplot } from \"@mbostock/funplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"