November 2020
🔨 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
From Udemy: La visualisation de données avec D3.js
Demo 01: Animated tile chart with datas from Firebase and automatic udpate when we add, update or delete data from the database.
Demo 02: Animated pie chart with datas from Firebase. We can add items using inputs and delete them by clicking on them in the chart.
-
Clone
-
Rename
assets/js/_demo-01-graph-tile-firebase.js
assets/js/_demo-02-graph-pie-firebase.js
to
assets/js/_demo-01-graph-tile-firebase.js
assets/js/_demo-02-graph-pie-firebase.js
-
Create a project in Firebase and add a Cloud Firestore application.
-
Copy your credentials in the two firebase.js files (you can share the same Firestore application the demos or use two different ones).
-
For demo 01: create a collection named 'country' with a string field 'name' and an integer field 'price'. Add some datas.
-
For demo 02: create a collection named 'spending' with a string field 'name' and an integer field 'price'. Add some datas.
-
It should work locally like that. Don't push your 'firebase.js' on Github!!!