Método de la secante que resuelve los 0 del polinomio
(x-1)(x-2)(x-4)(x-3)(x-6) + 1
Hecho en d3.js por amor al arte
Created
September 13, 2017 02:25
-
-
Save etra0/28bde8282d898cd9c260721cfe07dc62 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>p5js</title> | |
| </head> | |
| <body> | |
| <style> | |
| svg { | |
| border: 1px black solid; | |
| } | |
| .frame { | |
| display: flex; | |
| } | |
| #option { | |
| margin-left: 100px; | |
| } | |
| input { | |
| margin-top: 10px; | |
| } | |
| .path { | |
| stroke-width: 3; | |
| } | |
| </style> | |
| <div class="frame"> | |
| <div id="canvas"></div> | |
| <div id="option"> | |
| x0: <input type='text' id=x0><br> | |
| x1: <input type='text' id=x1><br> | |
| <input name="updateButton" | |
| type="button" | |
| value="Update" | |
| onclick="updateData()" /> | |
| </div> | |
| </div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var max = 200; | |
| var first_time = true; | |
| var x0 = -3, | |
| x1 = -2; | |
| // updatear x0 y x1 | |
| function update_xs(f) { | |
| xn = x1 - f(x1)*((x1 - x0)/(f(x1) - f(x0))) | |
| x0 = x1; | |
| x1 = xn; | |
| } | |
| // funcion lineal de la secante | |
| function secant_line(x, f) { | |
| var m = (f(x1) - f(x0))/(x1 - x0); | |
| return m*(x - x1) + f(x1); | |
| } | |
| // funcion del polinomio | |
| function poly(x) { | |
| return (x-1)*(x-2)*(x-4)*(x-3)*(x-6) + 1; | |
| } | |
| // genera los puntos a partir de una funcion (range de python) | |
| function generate_data(f) { | |
| var arr = []; | |
| for (i = -max; i < max; i++) { | |
| arr.push({x: i/10, y: f(i/10)}); | |
| } | |
| return arr; | |
| }; | |
| // conjunto de puntos | |
| var data = generate_data(poly); | |
| var sec = generate_data(function(x) { return secant_line(x, poly); }); | |
| console.log(data); | |
| /* ------------- d3 definitions ---------- */ | |
| var height = 600, | |
| width = 600; | |
| var x_scale = d3.scaleLinear() | |
| .domain([-10, 10]) | |
| .range([0, width]); | |
| var y_scale = d3.scaleLinear() | |
| .domain([10, -10]) | |
| .range([0, height]) | |
| var x_axis = d3.axisBottom(x_scale); | |
| var y_axis = d3.axisLeft(y_scale); | |
| var lineFunction = d3.line() | |
| .x(function(d) { return x_scale(d.x); }) | |
| .y(function(d) { return y_scale(d.y); }) | |
| .curve(d3.curveMonotoneX) | |
| var canvas = d3.select("#canvas") | |
| .append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| canvas.append('path') | |
| .attr('d', lineFunction(data)) | |
| .attr('fill', 'none') | |
| .attr('stroke', 'black') | |
| .attr('id', 'function') | |
| .attr('class', 'path'); | |
| canvas.append('path') | |
| .attr('d', lineFunction(sec)) | |
| .attr('fill', 'none') | |
| .attr('stroke', 'red') | |
| .attr('id', 'sec') | |
| .attr('class', 'path'); | |
| canvas.append('g') | |
| .attr('transform', 'translate(0, ' + height/2 + ')') | |
| .call(x_axis); | |
| canvas.append('g') | |
| .attr('transform', 'translate(' + width/2 + ', 0)') | |
| .call(y_axis); | |
| /* ------------ end d3 definitions ------------ */ | |
| // update button | |
| function updateData() { | |
| if (first_time) { | |
| _x0 = document.getElementById('x0'); | |
| _x1 = document.getElementById('x1'); | |
| if (_x0.value != '') { | |
| x0 = +_x0.value; | |
| } | |
| if (_x1.value != '') { | |
| x1 = +_x1.value; | |
| } | |
| first_time = false; | |
| } | |
| if (Math.abs(x1 - x0) > 1e-5) { | |
| update_xs(poly); | |
| _x0.value = x0; | |
| _x1.value = x1; | |
| for (i = 0; i < data.length; i++) { | |
| data[i].y = secant_line(data[i].x, poly); | |
| } | |
| } | |
| var canvas = d3.select('#canvas').transition(); | |
| canvas.select('#sec') | |
| .duration(750) | |
| .attr("d", lineFunction(data)); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment