These examples on Interactive Data Visualization in the web browser using Flask
RESTful API and D3.js
are compiled with some modifications from the book "Data Visualization with Python and JavaScript: Scrape, Clean, Explore, and Transform Your Data" by Kyran Dale, published by O'Reilly Media in 2023. Some of them with D3.js
are also duplicated on my VizHub. The examples related to Flask
, SQLAlchemy
, and marshmallow
, and also MongoDB
, BeautifulSoup
(bs4
), Scrapy
, and Pandas
were moved to my other repository.
In the book, Kyran Dale presents two web applications. The first one is built on Flask and is a RESTful API for interaction between the database and other web applications. The second one is responsible for fetching the data and their interactive visualization. Those represent the microservice architecture.
The content of this repository is mainly front-end oriented and consists of two parts: a short introduction to JavaScript
, HTML
, CSS
, Flex
, SVG
, Plotly
, and D3.js
in the sandbox
folder and a final visualization project in the final_viz
folder.
The final_viz
project with local data in JSON files (without using Flask
and any database) running on a local HTTP server is shown in the image below.
.../project/final_viz$ python -m http.server 8080
https://github.com/Kyrand/dataviz-with-python-and-js-ed-2
By using Cloudflare’s Content Delivery Network JS
https://cdnjs.com/libraries/d3
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" charset="utf-8"></script>
or by using libraries placed locally
project/
|--static/
|--libs/
|--d3.v7.min.js
|--js/
<script src="/static/libs/d3.v7.min.js"></script>
Start a development server in the project
directory using Python’s http module:
python -m http.server 8080
Open the browser at:
http://localhost:8080/
Press Ctrl+Shift+J
to open the Console tab in Chrome.
Press Ctrl+C
to stop the web server.
Press Ctrl+Shift+I
to open the Elements tab (or More Tools -> Developer Tools / Weitere Tools -> Entwicklertools
).
Start Jupyter notebooks:
$ jupyter notebook
preconditions:
$ sudo apt update
$ sudo apt install npm
source: https://github.com/topojson/topojson-server/tree/master
$ sudo npm install -g topojson-server
$ geo2topo geo_input.json > topo_output.json
You can also use the Python's topojson
package.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
"The difference between a prototype and a class is similar to the difference between a model home and a blueprint for a home" https://raganwald.com/2015/05/11/javascript-classes.html
https://www.sqlalchemy.org/library.html#reference
https://docs.sqlalchemy.org/en/14/index.html
https://docs.sqlalchemy.org/en/20/index.html
https://docs.sqlalchemy.org/en/14/core/engines.html
https://docs.sqlalchemy.org/en/20/core/engines.html
https://docs.sqlalchemy.org/en/14/orm/mapping_styles.html#declarative-mapping
https://docs.sqlalchemy.org/en/20/orm/mapping_styles.html#declarative-mapping
https://docs.sqlalchemy.org/en/20/orm/queryguide/query.html
https://dataset.readthedocs.io/en/latest/
https://www.mongodb.com/basics/bson
https://www.mongodb.com/docs/manual/tutorial/query-documents/
https://en.wikipedia.org/wiki/ISO_8601
https://en.wikipedia.org/wiki/Coordinated_Universal_Time
https://developer.chrome.com/docs/devtools/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs
https://www.sitepoint.com/closer-look-svg-path-data/
https://www.w3.org/TR/SVG/paths.html
https://jenkov.com/tutorials/svg/path-element.html
https://requests.readthedocs.io/en/latest/
https://requests.readthedocs.io/en/latest/user/quickstart/
https://docs.python-guide.org/writing/gotchas/
https://pypi.org/project/pandaSDMX/
https://www.crummy.com/software/BeautifulSoup/bs4/doc/#kinds-of-filters
https://www.crummy.com/software/BeautifulSoup/bs4/doc/#find-parents-and-find-parent
https://doc.scrapy.org/en/latest/topics
https://numpy.org/doc/stable/reference/arrays.ndarray.html
https://numpy.org/doc/stable/reference/routines.math.html
https://flask.palletsprojects.com/en/3.0.x/
https://jinja.palletsprojects.com/en/latest/
https://flask-sqlalchemy.palletsprojects.com/en/3.1.x/
https://marshmallow.readthedocs.io/en/stable/
https://flask-marshmallow.readthedocs.io/en/latest/
https://marshmallow-sqlalchemy.readthedocs.io/en/latest/
https://plotly.com/python/plotly-express/
https://plotly.com/python/reference/layout/shapes/#layout-shapes-items-shape-line
https://plotly.com/python/mapbox-layers/
https://plotly.com/javascript/plotlyjs-function-reference/
https://plotly.com/python/mapbox-layers/#mapbox-access-tokens-and-when-you-need-them
https://plotly.com/python/#controls
https://geopy.readthedocs.io/en/latest/
https://observablehq.com/@d3/d3-group
http://crossfilter.github.io/crossfilter/
https://github.com/topojson/topojson/blob/master/README.md
https://github.com/topojson/topojson/releases/tag/v3.0.2
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
https://gist.github.com/cpbotha/5073718
https://d3js.org/d3-selection/joining
https://bost.ocks.org/mike/selection/#key
https://bost.ocks.org/mike/constancy/
https://github.com/d3/d3-ease#easeCubic
https://observablehq.com/@d3/easing
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://github.com/topojson/topojson-server/tree/master
https://github.com/mattijn/topojson
https://github.com/d3/d3-geo-projection
https://observablehq.com/@d3/gallery