dbslice.d3LineSeries plot. Press the Click to change button to change the data, and update the plot.
The github repository for dbslice is here.
Last active
April 8, 2018 00:27
-
-
Save grahampullan/c1633e37e04792a4693b050851068ba8 to your computer and use it in GitHub Desktop.
dbslice plot Make and Update
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
| license: mit |
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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="http://dbslice.org/dbslice.css"> | |
| </head> | |
| <body> | |
| <button onclick="update()">Click to change</button> | |
| <div id = "target" style = "width:800px"> </div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script src="http://dbslice.org/d3-tip.js"></script> | |
| <script src="http://dbslice.org/dbslice.js"></script> | |
| <script> | |
| var updateCall; | |
| var series = []; | |
| var n = 50; | |
| var m = 10; | |
| // Initial data | |
| for ( var j = 0.; j < m; ++j ) { | |
| var line = { | |
| data : [], | |
| label : "Line "+j | |
| }; | |
| for ( var i = 0.; i < n; ++i ) { | |
| var point = { | |
| x : i/n, | |
| y : 0.125 * Math.cos( i/n * 2 * Math.PI) * (1 - Math.cos( j/m * 2 * Math.PI) ) | |
| }; | |
| line.data.push( point ); | |
| } | |
| series.push( line ); | |
| } | |
| var data = { series : series }; | |
| var layout ={ height : 600, xAxisLabel : "x axis", yAxisLabel : "y axis" }; | |
| updateCall = 1; | |
| // plot initial data | |
| dbslice.d3LineSeries.make( document.getElementById("target"), data, layout); | |
| function update() { | |
| if ( updateCall == 1 ) { | |
| var series=[]; | |
| for ( var j = 0.; j < m; ++j ) { | |
| var line = { | |
| data : [], | |
| label : "Line "+j | |
| }; | |
| for ( var i = 0.; i < n; ++i ) { | |
| var point = { | |
| x : i/n, | |
| y : 0.25 * Math.cos( i/n * 4 * Math.PI) * (1 - Math.cos( j/m * 2 * Math.PI) ) | |
| }; | |
| line.data.push( point ); | |
| } | |
| series.push( line ); | |
| } | |
| updateCall=0; | |
| } else { | |
| var series=[]; | |
| for ( var j = 0.; j < m; ++j ) { | |
| var line = { | |
| data : [], | |
| label : "Line "+j | |
| }; | |
| for ( var i = 0.; i < n; ++i ) { | |
| var point = { | |
| x : i/n, | |
| y : 0.125 * Math.cos( i/n * 2 * Math.PI) * (1 - Math.cos( j/m * 2 * Math.PI) ) | |
| }; | |
| line.data.push( point ); | |
| } | |
| series.push( line ); | |
| } | |
| updateCall=1; | |
| } | |
| var data = { series : series }; | |
| var layout={ height : 400, xAxisLabel : "x axis", yAxisLabel : "y axis" }; | |
| // plot new data | |
| dbslice.d3LineSeries.update( document.getElementById("target"), data, layout); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment