https://github.com/ax-va/interactive-data-visualization-with-d3-dale-2023
These examples on Interactive Data Visualization with D3.js in the web browser 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.
https://github.com/ax-va/interactive-data-visualization-with-d3-dale-2023
ax-va d3 data-science data-visualization dataviz frontend javascript web
Last synced: about 1 year ago
JSON representation
These examples on Interactive Data Visualization with D3.js in the web browser 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.
- Host: GitHub
- URL: https://github.com/ax-va/interactive-data-visualization-with-d3-dale-2023
- Owner: ax-va
- Created: 2023-06-20T19:05:16.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-15T07:17:27.000Z (about 1 year ago)
- Last Synced: 2025-05-19T13:14:23.214Z (about 1 year ago)
- Topics: ax-va, d3, data-science, data-visualization, dataviz, frontend, javascript, web
- Language: Python
- Homepage:
- Size: 14.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive Data Visualization with D3.js
These examples on Interactive Data Visualization with **D3.js** in the web browser 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 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 JS
https://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.