Created
March 7, 2020 18:55
-
-
Save bradfordcp/bec1088cbe681110833c334d1344e353 to your computer and use it in GitHub Desktop.
Plotly filter example
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
| col1 | x | y | |
|---|---|---|---|
| a | -3 | -3 | |
| a | -2 | -2 | |
| a | -1 | -1 | |
| b | 0 | 0 | |
| c | 1 | 1 | |
| c | 2 | 2 | |
| c | 3 | 3 |
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> | |
| <title>Plotly CSV filter sample</title> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <meta charset="UTF-8" /> | |
| </head> | |
| <body> | |
| <select id="dropdown-filter"> | |
| <option value="" selected>CHOOSE ONE</option> | |
| <option value="a">A</option> | |
| <option value="b">B</option> | |
| <option value="c">C</option> | |
| </select> | |
| <div id="plot"></div> | |
| <script> | |
| d3.csv("data.csv").then(rows => { | |
| d3.select("#dropdown-filter") | |
| .on("change", e => { plot() }); | |
| function plot() { | |
| const filter = d3.select("#dropdown-filter").node().value; | |
| let xs = []; | |
| let ys = []; | |
| console.log(rows, filter); | |
| rows.filter(row => row.col1 === filter) | |
| .forEach(row => { | |
| xs.push(row.x); | |
| ys.push(row.y); | |
| }); | |
| var trace1 = { | |
| x: xs, | |
| y: ys, | |
| mode: 'markers', | |
| type: 'scatter' | |
| }; | |
| let layout = { | |
| title: "Sample", | |
| xaxis: { range: [-5, 5] }, | |
| yaxis: { range: [-5, 5] } | |
| }; | |
| var data = [trace1]; | |
| Plotly.newPlot('plot', data, layout); | |
| } | |
| plot(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment