2d:null 2e:["$","title",null,{"children":"Pré-Cálculo | Vinícius Mello | Observable"}] 33:Tba3,interval = { const height = 200; let container = html`

`; const svgheight = 90; const svgwidth = Math.min(500, width); const svg = d3.select(DOM.svg(svgwidth+50, svgheight)); svg.attr("viewBox", `0,-50,${svgwidth},${svgheight}`); let scale = d3.scaleLinear() .domain([-8, 8]) .range([0, svgwidth]); let x_axis = d3.axisBottom() .scale(scale); svg.append("g").call(x_axis); let svgdiv = html`

`; svgdiv.appendChild(svg.node()); let texdiv = html`

`; let interval = tex`\footnotesize (-1,2)=\{x\in\mathbb{R}\,|\, -1\leq x \leq 2\}`; texdiv.appendChild(interval); let points = [[-1,false],[2,false]]; const intervalLine = svg.append("path") .attr("stroke", "black") .attr("stroke-width", 4) .attr("d", `M ${scale(points[0][0])}, 0 L ${scale(points[1][0])},0`); const controlRadius = isTouchDevice() ? 10 : 6; const controlpoint = svg.append("g").attr("class","controlpoint") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "black") .attr("stroke-width", 1) .selectAll("circle") .data(points) .enter().append("circle") .attr("r", controlRadius) .attr("fill", "white") .call(d3.drag() .on("drag", dragged) .on("end", function() { d3.event.sourceEvent.stopPropagation(); // silence other listeners }) ).on("click",clicked); controlpoint.attr("cx", d => scale(d[0]) ).attr("cy", 0); function dragged(d) { let xi = d3.event.x; let x = scale.invert(xi); d[0] = x; d3.select(this) .attr('cx', xi); updateTeX(); } function clicked(d) { d[1] = ! d[1]; d3.select(this) .attr('fill', d[1] ? "black" : "white"); updateTeX(); } function updateTeX() { let a = points[0][0]; let ac = points[0][1]; let b = points[1][0]; let bc = points[1][1]; let newinterval; if (a > b) { a = a.toFixed(1); b = b.toFixed(1); newinterval = tex`\footnotesize (-\infty,${b}${bc ? "]" : ")"}\cup ${ac ? "[" : "("}${a},+\infty) =\{x\in\mathbb{R}\,|\, x ${bc ? "\\leq" : "<"}${b} \text{ ou } x ${ac ? "\\geq" : ">"} ${a}\}`; intervalLine.attr("d", `M 0,0 L ${scale(b)},0 M ${scale(a)},0 L ${scale(8)},0`); } else { a = a.toFixed(1); b = b.toFixed(1); newinterval = tex`\footnotesize ${ac ? "[" : "("}${a},${b}${bc ? "]" : ")"} =\{x\in\mathbb{R}\,|\, ${a}${ac ? "\\leq" : "<"} x${bc ? "\\leq" : "<" } ${b}\}`; intervalLine.attr("d", `M ${scale(a)},0 L ${scale(b)},0`); } texdiv.replaceChild(newinterval,interval); interval = newinterval; } container.appendChild(svgdiv); container.appendChild(texdiv); return container; }34:T12ad,line = { const svgwidth = Math.min(500, width); const height = svgwidth+200; let container = html`

`; const svgheight = svgwidth; const svg = d3.select(DOM.svg(svgwidth, svgheight)); svg.attr("viewBox", `0,0,${svgwidth},${svgheight}`); //svg.on("wheel", function() { d3.event.preventDefault(); }); let scale_x = d3.scaleLinear() .domain([-3,5]) .range([0, svgwidth]); let scale_y = d3.scaleLinear() .domain([-3,5]) .range([svgheight,0]); let x_axis = d3.axisBottom() .tickValues([-2,-1,1,2,3,4]) .scale(scale_x); let y_axis = d3.axisLeft() .tickValues([-2,-1,1,2,3,4]) .scale(scale_y); let grid = ""; for(let i=-3;i<5;++i) { grid = grid + `M ${scale_x(i)},${scale_y(-3)} L ${scale_x(i)},${scale_y(5)} `; grid = grid + `M ${scale_x(-3)},${scale_y(i)} L ${scale_x(5)},${scale_y(i)} `; } svg.append("g").append("path") .style("stroke","black") .style("stroke-width","0.5") .style("stroke-dasharray", "4") .attr("d",grid); svg.append("g").attr("transform", `translate(0,${scale_y(0)})`).call(x_axis); svg.append("g").attr("transform", `translate(${scale_x(0)},0)`).call(y_axis); let svgdiv = html`

`; svgdiv.appendChild(svg.node()); let texdiv = html`

`; let lineeq = tex.block`=`; texdiv.appendChild(lineeq); let points = [[1,1],[3,2]]; let parLine = d3.interpolate(points[0],points[1]); const line = svg.append("path") .attr("stroke", "black") .attr("stroke-width", 4); const labelA = svg.append("text").text("A") const labelDeltaX = svg.append("text").text("Δx"); const labelB = svg.append("text").text("B") const labelDeltaY = svg.append("text").text("Δy"); const triangle = svg.append("path") .attr("fill-opacity",0.2) .attr("fill","black"); const controlRadius = isTouchDevice() ? 10 : 6; const controlpoint = svg.append("g").attr("class","controlpoint") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "black") .attr("stroke-width", 1) .selectAll("circle") .data(points) .enter().append("circle") .attr("r", controlRadius) .attr("fill", "black") .call(d3.drag() .on("drag", dragged) .on("end", function() { d3.event.sourceEvent.stopPropagation(); // silence other listeners }) ).on("click",clicked); controlpoint.attr("cx", d => scale_x(d[0]) ).attr("cy", d => scale_y(d[1])); function dragged(d) { let xi = d3.event.x; let yi = d3.event.y; let x = R.clamp(-3, 5, Math.round(scale_x.invert(xi))); let y = R.clamp(-3, 5, Math.round(scale_y.invert(yi))); d[0] = x; d[1] = y; d3.select(this) .attr('cx', scale_x(x)) .attr('cy', scale_y(y)); updateTeX(); } function clicked(d) { } function updateTeX() { let A = points[0]; let B = points[1]; let delta_x = B[0]-A[0]; let delta_y = B[1]-A[1]; let newlineeq; parLine = d3.interpolate(A,B); labelA.attr("x",scale_x(points[0][0])+10) .attr("y",scale_y(points[0][1])+10); labelB.attr("x",scale_x(points[1][0])+10) .attr("y",scale_y(points[1][1])+10); labelDeltaX.attr("x",scale_x(0.5*(points[0][0]+points[1][0]))-5) .attr("y",scale_y(points[0][1])+14); labelDeltaY.attr("x",scale_x(points[1][0])+8) .attr("y",scale_y(0.5*(points[0][1]+points[1][1]))+5); line.attr("d", `M ${scale_x(parLine(-10)[0])}, ${scale_y(parLine(-10)[1])} L ${scale_x(parLine(10)[0])}, ${scale_y(parLine(10)[1])}`); triangle.attr("d",`M ${scale_x(A[0])},${scale_y(A[1])} L ${scale_x(B[0])},${scale_y(A[1])} L ${scale_x(B[0])},${scale_y(B[1])} Z`); if (delta_x == 0) { newlineeq = tex.block`x=x_A=${A[0]}`; } else { if (delta_y == 0) { newlineeq = tex.block`y=y_A=${A[1]}`; } else { let expr = Alg.parse(`(${delta_y})/(${delta_x})*(x-(${A[0]}))+(${A[1]})`); //let expr = math.simplify(`${delta_y}/${delta_x}*(x-(${A[0]}))+(${A[1]})`); newlineeq = tex.block` \begin{aligned} y&=\frac{\Delta y}{\Delta x}(x-x_A)+y_A \\ &=\frac{${delta_y}}{${delta_x}}(x-${A[0]<0? "("+A[0]+")": A[0] })+${A[1]<0? "("+A[1]+")": A[1] }\\ &=${expr.toTex()} \\ \end{aligned}`; } } texdiv.replaceChild(newlineeq,lineeq); lineeq = newlineeq; } updateTeX(); container.appendChild(texdiv); container.appendChild(svgdiv); return container; }35:T517,{ let graph = new CartesianSystem({ rangeX: [-2,2], rangeY: [-2,2]}); let svg = graph.svg; graph.y_axis.tickValues([-2,-1,0,1,2]); graph.y.call(graph.y_axis); graph.setBackground({"fill" : "yellow", "opacity" : 0.1},{"fill" : "red", "opacity" : 0.05}); graph.plane.append("circle") .attr("cx",0) .attr("cy",0) .attr("r",1) graph.plane.append("path") .attr("d", graph.functionPath( (x) => Math.sin(x)) ) let tangent = graph.plane.append("path") let coords = graph.overlay.append("text"); const points = [[0,0]]; function update() { let a = Math.cos(points[0][0]); let b = -a*points[0][0]+points[0][1]; tangent.attr("d", graph.functionPath( (x) => a*x+b,2) ); let p=points[0]; let q=graph.transform(p); coords.attr("x", q[0] + 5); coords.attr("y", q[1] + 15 ); const f = d3.format(".2f"); coords.text(`(${f(p[0])},${f(p[1])})`); } function dragged(d) { let xi = R.clamp(0,graph.innerWidth,d3.event.x); d[0] = graph.scale_x.invert(xi); d[1] = Math.sin(d[0]); d3.select(this) .attr('cx', xi) .attr('cy', graph.scale_y(d[1])); update(); } let controlPoint = graph.addControlPoints(points, dragged); //controlPoint.attr("fill","black"); update(); return svg.node(); }36:T10ef,class CartesianSystem { constructor(g) { function defaultFor(arg, val) { return typeof arg !== 'undefined' ? arg : val; } this.border = defaultFor(g.border,30); this.width = defaultFor(g.width,460); this.height = defaultFor(g.height,this.width); let svg = d3.select(DOM.svg(this.width, this.height)); this.rangeX = defaultFor(g.rangeX,[-1,1]); this.rangeY = defaultFor(g.rangeY,[-1,1]); this.innerWidth = this.width-2*this.border; this.innerHeight = this.height-2*this.border; let scaleX = (this.innerWidth)/(this.rangeX[1]-this.rangeX[0]); let scaleY = -(this.innerHeight)/(this.rangeY[1]-this.rangeY[0]); this.scaleX = scaleX; this.scaleY = scaleY; let tX = -this.rangeX[0]*scaleX+this.border; let tY = -this.rangeY[1]*scaleY+this.border; const clip = DOM.uid("clip-area"); svg.append("clipPath") .attr("id", clip.id) // give the clipPath an ID // .attr("clipPathUnits","userSpaceOnUse") .append("rect") .attr("x", this.border) .attr("y", this.border) .attr("width", this.innerWidth) .attr("height", this.innerHeight); this.background = svg.append("g") .attr("class","background") let scale_y = d3.scaleLinear() .domain([this.rangeY[0],this.rangeY[1]]).range([this.innerHeight,0]); this.y_axis = d3.axisLeft() .scale(scale_y); let scale_x = d3.scaleLinear() .domain([this.rangeX[0],this.rangeX[1]]).range([0,this.innerWidth]); this.x_axis = d3.axisBottom() .scale(scale_x); this.scale_x = scale_x; this.scale_y = scale_y; this.x = svg.append("g") .attr("class","x") .attr("transform", `translate(${this.border},${this.height-this.border})`).call(this.x_axis); this.y = svg.append("g") .attr("class","y") .attr("transform", `translate(${this.border},${this.border})`).call(this.y_axis); this.plane = svg.append("g") .attr("clip-path",clip) .append("g") .attr("class","plane") .attr("fill","none") .attr("stroke","black") .attr("transform",`translate(${tX},${tY}) scale(${scaleX} ${scaleY})`) .attr("stroke-width",1/Math.max(Math.abs(scaleX),Math.abs(scaleY))); this.axis = this.plane.append("path") .attr("class","axis") .attr("d",`M ${this.rangeX[0]},0 L ${this.rangeX[1]},0 M 0,${this.rangeY[0]} L 0,${this.rangeY[1]}`) .attr("stroke","black"); this.overlay = svg.append("g") .attr("class","overlay") .attr("transform", `translate(${this.border},${this.border})`); this.svg = svg; } functionPath(f, sampling=100) { let str = `M ${this.rangeX[0]},${f(this.rangeX[0])} `; let step = (this.rangeX[1]-this.rangeX[0])/sampling; for(let i=1;i<=sampling;++i) { let x=this.rangeX[0]+step*i; str = str + `L ${x},${f(x)} `; } return str; } transform(p) { return [ this.scale_x(p[0]), this.scale_y(p[1]) ]; } invert(q) { return [ this.scale_x.invert(q[0]), this.scale_y.invert(q[1]) ]; } setBackground(attr, attrIn) { if (attrIn == undefined) attrIn = attr; let r = this.background.append("rect") .attr("x",0) .attr("y",0) .attr("width","100%") .attr("height","100%"); for(let k in attr) { r.attr(k,attr[k]); } let ri = this.background.append("rect") .attr("x",this.border) .attr("y",this.border) .attr("width",this.innerWidth) .attr("height",this.innerHeight); for(let k in attrIn) { ri.attr(k,attrIn[k]); } } addControlPoints(points,dragged) { const controlRadius = 7; let controlpoint = this.overlay.append("g").attr("class","controlpoint") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "black") .selectAll("circle") .data(points) .enter().append("circle") .attr("r", controlRadius) .attr("fill", "white") .attr("cx", (d) => { return this.scale_x(d[0])} ) .attr("cy", (d) => { return this.scale_y(d[1])} ) .call(d3.drag() .on("drag", dragged) .on("end", function() { d3.event.sourceEvent.stopPropagation(); // silence other listeners }) ); return controlpoint; } }37:T5ff,function animateTeX(lines,values) { let linesTeX = tex.block` \begin{aligned} ${String.raw(lines)} \end{aligned}`; lines = String.raw(lines).split("\\\\"); let n = lines.length; let container = html`

`; container.style.visibility = "hidden"; container.appendChild(linesTeX); document.body.appendChild(container); const height = container.clientHeight; container.remove(); container = html`

`; container.appendChild(linesTeX); let button = html``; let playing = true; container.appendChild(button); button = d3.select(button); button.on("click", function() { if (playing) { d3.select(this).text("⏸️"); } else { d3.select(this).text("▶️"); } playing = !playing; }); /*button.addEventListener('click', () => { if (button.value == "▶") { button.value = "p"; } else { button.value = "▶"; } });*/ let c = 2; let i = 1; let t = d3.interval( function (elapsed) { if (!playing) return; if (c>0) { c = c-1; return; } let l = ""; for(let j=0;jn) { i = 1; c = 2; } }, 1500); return container; } 38:[] 31:{"id":"6bb97cc9495b116b","slug":"pre-calculo","title":"Pré-Cálculo","thumbnail":"52b1ae96d354bafa49e7174477e813ade8e751bfe65b20f73772eae43d10cc57","access_level":"public","create_time":"$D2018-11-01T12:36:08.810Z","update_time":"$D2018-11-28T18:23:18.028Z","view_time":null,"first_public_time":"$D2018-11-01T14:35:32.998Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7a4ecd430a93cd6f","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":"starter_2024"},"version":879,"publish_version":879,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null}],"members":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7c99c3feb4d15208","slug":"pre-calculo","title":"Pré-Cálculo","owner":{"id":"7a4ecd430a93cd6f","login":"vinicius-mello","name":"Vinícius Mello"}},"type":"notebook","body":{"title":"Pré-Cálculo","cells":[{"id":0,"value":"md`# Pré-Cálculo\nCurso interativo de Pré-Cálculo do Departamento de Matemática da UFBA\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md `## [Proporcionalidade](https://beta.observablehq.com/@vinicius-mello/proporcionalidade)\n - Enchendo o tanque (taxa de variação constante, interpretação gráfica, equação da Reta, função definida por várias sentenças)\n - Duas torneiras enchem muito mais (equação quadrática, função do segundo grau) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md `## [Máximos e Mínimos](https://beta.observablehq.com/@vinicius-mello/maximos-e-minimos) \n - Mais bombons na caixa (problemas de otimização, funções polinomiais, fatoração, raízes, divisão de polinômios)\n - Chegando mais rápido (raiz quadrada, função inversa) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"md `## [Álgebra](https://beta.observablehq.com/@vinicius-mello/algebra)\n - Tudo que você queria saber sobre álgebra e sempre teve medo de perguntar (identidades algébricas, resolução de equações e sistemas de inequações)\n - Resolvendo as desigualdades do mundo (inequações, função modular) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md `## [Trigonometria](https://beta.observablehq.com/@vinicius-mello/trigonometria)\n - Triângulos por toda parte (trigonometria do triângulo retângulo, área figuras planas, volume) \n - O mundo dá voltas (trigonometria, círculo trigonométrico, identidades trigonométricas)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md `## [Exponencial e Logaritmo](https://beta.observablehq.com/@vinicius-mello/exponencial-e-logaritmo) \n - Crescei e multiplicai-vos! (PG, crescimento exponencial, função exponencial e logaritmo)\n - Física experimental para leigos (Escala logarítimica, regressão linear) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Intervalos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"animateTeX`\n(a+b)^2 & = (a+b)(a+b) && \\text{por definição} \\phantom{AAAA}\\\\\n & = a^2+ab+ba+b^2 && \\text{pela distributividade}\\\\\n &= a^2+2ab+b^2 && \\text{pois } ab = ba\\\\\n&\\therefore \\\\\n(a+b)^2 &= a^2+2ab +b^2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"function isTouchDevice() {\n return 'ontouchstart' in window;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"Alg = require(\"https://bundle.run/algebra.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"math = require(\"https://bundle.run/mathjs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"R = require(\"ramda@0.25\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"