Created
July 8, 2018 07:21
-
-
Save albertleng/c392a74d91a17f3f861061ecafd0ef9c to your computer and use it in GitHub Desktop.
// source http://jsbin.com/wuxubal
This file contains 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 lang="en"> | |
| <head> | |
| <title>Plotting functions in JavaScript using the | |
| function plot library</title> | |
| <meta charset="utf-8"/> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script> | |
| <style id="jsbin-css"> | |
| section { | |
| border:4px solid grey; | |
| border-radius:15px; | |
| box-shadow: 5px 5px 5px grey; | |
| float:left; | |
| height:360px; | |
| padding: 20px; | |
| margin:10px; | |
| } | |
| #plotSettings { | |
| width:120px; | |
| } | |
| #plot { | |
| width:550px; | |
| } | |
| </style> | |
| </head> | |
| <body onload="plot();"> | |
| <h2>Interactive function plotter</h2> | |
| <section id="plotSettings"> | |
| <label for="xMin">xMin: </label> | |
| value: <input type=number id="xMin" value=0 step=0.5 | |
| oninput="plot();"> | |
| <p></p> | |
| <label for="xMax">xMax: </label> | |
| value: <input type=number id="xMax" value=6.28 step=0.5 | |
| oninput="plot();"> | |
| <p></p> | |
| <label for="yMin">yMin: </label> | |
| value: <input type=number id="yMin" value=-1 step=0.5 | |
| oninput="plot();"> | |
| <p></p> | |
| <label for="yMax">yMax: </label> | |
| value: <input type=number id="yMax" value=1 step=0.5 | |
| oninput="plot();"> | |
| <p></p> | |
| <label for="color">Color: </label> | |
| value: <input type=color id="color" | |
| onchange="plot();"> | |
| <p></p> | |
| <label for="function">Function to plot: </label> | |
| <input id="function" type="text" | |
| value="sin(x)" | |
| onchange="plot();"> | |
| <p></p> | |
| <button onclick="plot();">Plot it!</button> | |
| </section> | |
| <section id="plot"> | |
| <div id="myFunction"></div> | |
| </section> | |
| <script id="jsbin-javascript"> | |
| var parameters = { | |
| target: '#myFunction', | |
| data: [{ | |
| fn: 'sin(x)', | |
| color: 'red' | |
| }], | |
| grid: true, | |
| yAxis: {domain: [-1, 1]}, | |
| xAxis: {domain: [0, 2*Math.PI]} | |
| }; | |
| function plot() { | |
| var f = document.querySelector("#function").value; | |
| var xMin = document.querySelector("#xMin").value; | |
| var xMax = document.querySelector("#xMax").value; | |
| var yMin = document.querySelector("#yMin").value; | |
| var yMax = document.querySelector("#yMax").value; | |
| var color = document.querySelector("#color").value; | |
| parameters.data[0].fn = f; | |
| parameters.xAxis.domain = [xMin, xMax]; | |
| parameters.yAxis.domain = [yMin, yMax]; | |
| parameters.data[0].color = color; | |
| functionPlot(parameters); | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">section { | |
| border:4px solid grey; | |
| border-radius:15px; | |
| box-shadow: 5px 5px 5px grey; | |
| float:left; | |
| height:360px; | |
| padding: 20px; | |
| margin:10px; | |
| } | |
| #plotSettings { | |
| width:120px; | |
| } | |
| #plot { | |
| width:550px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var parameters = { | |
| target: '#myFunction', | |
| data: [{ | |
| fn: 'sin(x)', | |
| color: 'red' | |
| }], | |
| grid: true, | |
| yAxis: {domain: [-1, 1]}, | |
| xAxis: {domain: [0, 2*Math.PI]} | |
| }; | |
| function plot() { | |
| var f = document.querySelector("#function").value; | |
| var xMin = document.querySelector("#xMin").value; | |
| var xMax = document.querySelector("#xMax").value; | |
| var yMin = document.querySelector("#yMin").value; | |
| var yMax = document.querySelector("#yMax").value; | |
| var color = document.querySelector("#color").value; | |
| parameters.data[0].fn = f; | |
| parameters.xAxis.domain = [xMin, xMax]; | |
| parameters.yAxis.domain = [yMin, yMax]; | |
| parameters.data[0].color = color; | |
| functionPlot(parameters); | |
| } | |
| </script></body> | |
| </html> |
This file contains 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
| section { | |
| border:4px solid grey; | |
| border-radius:15px; | |
| box-shadow: 5px 5px 5px grey; | |
| float:left; | |
| height:360px; | |
| padding: 20px; | |
| margin:10px; | |
| } | |
| #plotSettings { | |
| width:120px; | |
| } | |
| #plot { | |
| width:550px; | |
| } |
This file contains 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 parameters = { | |
| target: '#myFunction', | |
| data: [{ | |
| fn: 'sin(x)', | |
| color: 'red' | |
| }], | |
| grid: true, | |
| yAxis: {domain: [-1, 1]}, | |
| xAxis: {domain: [0, 2*Math.PI]} | |
| }; | |
| function plot() { | |
| var f = document.querySelector("#function").value; | |
| var xMin = document.querySelector("#xMin").value; | |
| var xMax = document.querySelector("#xMax").value; | |
| var yMin = document.querySelector("#yMin").value; | |
| var yMax = document.querySelector("#yMax").value; | |
| var color = document.querySelector("#color").value; | |
| parameters.data[0].fn = f; | |
| parameters.xAxis.domain = [xMin, xMax]; | |
| parameters.yAxis.domain = [yMin, yMax]; | |
| parameters.data[0].color = color; | |
| functionPlot(parameters); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment