Last active
May 30, 2024 19:59
-
-
Save alanjones2/7aee6aedfaf1f21e960c8106b2128748 to your computer and use it in GitHub Desktop.
Web visualization using Flask and Plotly
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
| from flask import Flask, render_template | |
| import pandas as pd | |
| import json | |
| import plotly | |
| import plotly.express as px | |
| app = Flask(__name__) | |
| @app.route('/') | |
| def index(): | |
| return render_template('index.html') | |
| @app.route('/chart1') | |
| def chart1(): | |
| df = pd.DataFrame({ | |
| "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], | |
| "Amount": [4, 1, 2, 2, 4, 5], | |
| "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] | |
| }) | |
| fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group") | |
| graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder) | |
| header="Fruit in North America" | |
| description = """ | |
| A academic study of the number of apples, oranges and bananas in the cities of | |
| San Francisco and Montreal would probably not come up with this chart. | |
| """ | |
| return render_template('notdash2.html', graphJSON=graphJSON, header=header,description=description) | |
| @app.route('/chart2') | |
| def chart2(): | |
| df = pd.DataFrame({ | |
| "Vegetables": ["Lettuce", "Cauliflower", "Carrots", "Lettuce", "Cauliflower", "Carrots"], | |
| "Amount": [10, 15, 8, 5, 14, 25], | |
| "City": ["London", "London", "London", "Madrid", "Madrid", "Madrid"] | |
| }) | |
| fig = px.bar(df, x="Vegetables", y="Amount", color="City", barmode="stack") | |
| graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder) | |
| header="Vegetables in Europe" | |
| description = """ | |
| The rumor that vegetarians are having a hard time in London and Madrid can probably not be | |
| explained by this chart. | |
| """ | |
| return render_template('notdash2.html', graphJSON=graphJSON, header=header,description=description) | |
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> | |
| <body style="font-family:arial, sans-serif"> | |
| <h1 style="background:lightblue;padding:10px"> | |
| Plotly Chart Demo | |
| </h1> | |
| <p>Click to see charts on different pages</p> | |
| <h1><a href="chart1">Fruit in North America</a></h1> | |
| <h1><a href="chart2">Vegetables in Europe</a></h1> | |
| </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
| <!doctype html> | |
| <html> | |
| <body style="font-family:arial, sans-serif"> | |
| <h1>{{header}}</h1> | |
| <h6><a href="/">Return to index page</a></h6> | |
| <div id="chart" class="chart"></div> | |
| <div>{{description}}</div> | |
| </body> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script type="text/javascript"> | |
| var graphs = {{graphJSON | safe}}; | |
| Plotly.plot('chart',graphs,{}); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment