{"id":20924534,"url":"https://github.com/ax-va/interactive-data-visualization-dale-2023","last_synced_at":"2025-03-13T00:46:14.254Z","repository":{"id":177374191,"uuid":"656347418","full_name":"ax-va/Interactive-Data-Visualization-Dale-2023","owner":"ax-va","description":"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.","archived":false,"fork":false,"pushed_at":"2024-04-12T07:40:21.000Z","size":13760,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-12T15:11:44.447Z","etag":null,"topics":["ax-va","d3","d3-visualization","d3js","data-science","data-visualization","dataviz","javascript","python"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ax-va.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-06-20T19:05:16.000Z","updated_at":"2024-04-14T22:28:43.109Z","dependencies_parsed_at":"2023-09-16T03:57:55.304Z","dependency_job_id":"970ffe52-ad00-4dd4-b1cf-bef537f84953","html_url":"https://github.com/ax-va/Interactive-Data-Visualization-Dale-2023","commit_stats":null,"previous_names":["ax-va/interactive-data-visualization-in-browser-dale-2023","ax-va/interactive-data-visualization-dale-2023"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ax-va%2FInteractive-Data-Visualization-Dale-2023","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ax-va%2FInteractive-Data-Visualization-Dale-2023/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ax-va%2FInteractive-Data-Visualization-Dale-2023/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ax-va%2FInteractive-Data-Visualization-Dale-2023/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ax-va","download_url":"https://codeload.github.com/ax-va/Interactive-Data-Visualization-Dale-2023/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243318745,"owners_count":20272139,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ax-va","d3","d3-visualization","d3js","data-science","data-visualization","dataviz","javascript","python"],"created_at":"2024-11-18T20:23:09.085Z","updated_at":"2025-03-13T00:46:14.244Z","avatar_url":"https://github.com/ax-va.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive-Data-Visualization-Dale-2023\n\nThese 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).\n\nIn 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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/dataviz-toolchain.png\" width=\"700\"/\u003e\n\u003c/p\u003e\n\nThe 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.\nThe **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.\n\n```unix\n.../project/final_viz$ python -m http.server 8080\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/ax-va/Interactive-Data-Visualization-Dale-2023/blob/main/final_viz.png\" width=\"900\" /\u003e\n\u003c/p\u003e\n\n## Original code by Kyran Dale\nhttps://github.com/Kyrand/dataviz-with-python-and-js-ed-2\n\n## Add JavaScript libs\nBy using Cloudflare’s Content Delivery Network JS\n\nhttps://cdnjs.com/libraries/d3\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\nor by using libraries placed locally\n```\nproject/\n|--static/\n   |--libs/\n      |--d3.v7.min.js\n   |--js/\n```\n```html\n\u003cscript src=\"/static/libs/d3.v7.min.js\"\u003e\u003c/script\u003e\n```\n\n## Use JavaScript scripts in Chrome\nStart a development server in the **project** directory using Python’s http module:\n```unix\npython -m http.server 8080\n```\nOpen the browser at:\n```\nhttp://localhost:8080/\n```\nPress `Ctrl+Shift+J` to open the Console tab in Chrome.\n\nPress `Ctrl+C` to stop the web server.\n\n## Chrome\nPress `Ctrl+Shift+I` to open the Elements tab (or `More Tools -\u003e Developer Tools / Weitere Tools -\u003e Entwicklertools`).\n\n## Jupyter\nStart Jupyter notebooks:\n```unix\n$ jupyter notebook\n```\n\n## Install TopoJSON globally\n\npreconditions:\n```unix\n$ sudo apt update\n$ sudo apt install npm\n```\n\nsource: https://github.com/topojson/topojson-server/tree/master\n```unix\n$ sudo npm install -g topojson-server\n```\n\n## Convert an input GeoJSON into an output TopoJSON\n```unix\n$ geo2topo geo_input.json \u003e topo_output.json\n```\nYou can also use the Python's `topojson` package.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fax-va%2Finteractive-data-visualization-dale-2023","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fax-va%2Finteractive-data-visualization-dale-2023","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fax-va%2Finteractive-data-visualization-dale-2023/lists"}