https://github.com/solygambas/d3-firebase
5 small projects to understand D3.js basics using Firebase and Materialize.
https://github.com/solygambas/d3-firebase
d3 d3js data-visualization firebase firestore javascript materialize materializecss
Last synced: 2 months ago
JSON representation
5 small projects to understand D3.js basics using Firebase and Materialize.
- Host: GitHub
- URL: https://github.com/solygambas/d3-firebase
- Owner: solygambas
- Created: 2021-05-08T11:32:33.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-05-01T05:05:10.000Z (about 4 years ago)
- Last Synced: 2025-02-13T23:34:11.743Z (over 1 year ago)
- Topics: d3, d3js, data-visualization, firebase, firestore, javascript, materialize, materializecss
- Language: JavaScript
- Homepage:
- Size: 146 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Build Data Visualizations with D3.js & Firebase
5 small projects to understand D3.js basics using Firebase and Materialize.
| # | Project | Description |
| --- | -------------------------------- | ------------------------------------------------------------- |
| 01 | [**Bar Chart**](#barchart) | A simple bar graph to understand D3.js basics using Firebase. |
| 02 | [**Pie Chart**](#piechart) | A budget planner displaying a donut chart with Materialize. |
| 03 | [**Line Graphs**](#linegraphs) | A fitness tracker displaying line graphs. |
| 04 | [**Bubble Chart**](#bubblechart) | A circle packing diagram to learn data hierarchy. |
| 05 | [**Tree Diagram**](#treediagram) | A hierarchical chart using Materialize. |
A simple bar graph to understand D3.js basics using Firebase.
[See bar-chart folder](bar-chart)
### Features
- creating simple SVG shapes and appending them to the DOM with D3.js.
- changing attributes with .attr() and grouping elements together.
- joining JSON data to elements and adding virtual elements to the DOM.
- using linear and band scales with min, max and extent.
- creating a bar chart: centering a graph, adding axes and formatting ticks.
- creating a Firestore database, setting up the Firebase config and getting data from Firestore.
- understanding the D3 update pattern and using Firestore realtime data updates.
- adding D3 transitions and custom tweens.
A budget planner displaying a donut chart with Materialize.
[See pie-chart folder](pie-chart)
### Features
- creating an HTML template with Materialize.
- handling a form and adding data to Firestore.
- setting up a pie chart and generating arc paths with D3.
- generating colors with ordinal scales.
- customizing arc tween and adding legends with d3-legend.
- handling events: mouseOver, mouseOut and click.
- adding tooltips with d3-v6-tip.
A fitness tracker displaying line graphs.
[See line-graphs folder](line-graphs)
### Features
- creating an HTML template with Materialize.
- handling DOM events and adding data to Firestore.
- using time scales and formatting dates with D3.
- filtering data by activity and sorting data by date.
- generating line paths and adding data point hover effect.
A circle packing diagram to learn data hierarchy.
[See bubble-chart folder](bubble-chart)
### Features
- handling data hierarchy in D3 with stratify() method.
- adding value property to nodes with sum().
- creating circle packs with pack() and descendants().
- displaying tags in node leaves.
- generating colors according to node depth.
A hierarchical chart using Materialize.
[See tree-diagram folder](tree-diagram)
### Features
- creating an HTML template and a modal with Materialize.
- handling a form and adding data to Firestore.
- generating a tree diagram in D3 with stratify() and tree() methods.
- displaying hierarchical nodes and links.
Based on [Build Data Visualizations with D3.js & Firebase](https://www.udemy.com/course/build-data-uis-with-d3-firebase/) by Shaun Pelling - The Net Ninja (2019)