These examples on Interactive Data Visualization in the browser using Flask 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, Beautiful Soup (bs4), Scrapy, and Pandas were moved to another repository.
This content is mainly front-end oriented and consists of two parts: an introduction into 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 (without using Flask) running on the local web 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