Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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 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.