Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ax-va/interactive-data-visualization-dale-2023
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: Cleaning, Cleaning, Exploring, and Transforming Your Data" by Kyran Dale, published by O'Reilly Media in 2023.
https://github.com/ax-va/interactive-data-visualization-dale-2023
ax-va d3 d3-visualization d3js data-science data-visualization dataviz javascript python
Last synced: about 1 month ago
JSON representation
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: Cleaning, Cleaning, Exploring, and Transforming Your Data" by Kyran Dale, published by O'Reilly Media in 2023.
- Host: GitHub
- URL: https://github.com/ax-va/interactive-data-visualization-dale-2023
- Owner: ax-va
- Created: 2023-06-20T19:05:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-12T07:40:21.000Z (10 months ago)
- Last Synced: 2024-04-12T15:11:44.447Z (10 months ago)
- Topics: ax-va, d3, d3-visualization, d3js, data-science, data-visualization, dataviz, javascript, python
- Language: Python
- Homepage:
- Size: 13.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive-Data-Visualization-Dale-2023
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"*, Second Edition, written by Kyran Dale and published by *O'Reilly Media* in 2023. Some of them with **D3.js** are also duplicated on my [VizHub](https://vizhub.com/ax-va). The examples related to **Flask**, **SQLAlchemy**, and **marshmallow**, and also **MongoDB**, **BeautifulSoup** (**bs4**), **Scrapy**, and **Pandas** were moved to my other [repository](https://github.com/ax-va/Python-Example-Collection).
In the book, Kyran Dale presents two web applications. The first one is built on **Flask** and is a RESTful API for communication 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.```unix
.../project/final_viz$ python -m http.server 8080
```
![]()
## Original code by Kyran Dale
https://github.com/Kyrand/dataviz-with-python-and-js-ed-2## Add JavaScript libs
By using Cloudflare’s Content Delivery Network JShttps://cdnjs.com/libraries/d3
```html
```
or by using libraries placed locally
```
project/
|--static/
|--libs/
|--d3.v7.min.js
|--js/
```
```html```
## Use JavaScript scripts in Chrome
Start a development server in the **project** directory using Python’s http module:
```unix
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.
## Chrome
Press `Ctrl+Shift+I` to open the Elements tab (or `More Tools -> Developer Tools / Weitere Tools -> Entwicklertools`).## Jupyter
Start Jupyter notebooks:
```unix
$ jupyter notebook
```## Install TopoJSON globally
preconditions:
```unix
$ sudo apt update
$ sudo apt install npm
```source: https://github.com/topojson/topojson-server/tree/master
```unix
$ sudo npm install -g topojson-server
```## Convert an input GeoJSON into an output TopoJSON
```unix
$ geo2topo geo_input.json > topo_output.json
```
You can also use the Python's `topojson` package.