Build Data Visualizations with D3.js & Firebase

Learn to select DOM elements with D3.js using select and select all, and compare with query selector. Set up a canvas in the page to inject SVGs via D3.

Convert D3 code from function to arrow functions for cleaner code, noting this binds differently; use n and i to access element and index.

Join data to multiple elements in d3 by selecting all rectangles and binding each object to its corresponding rect, then apply width, height, and fill attributes.

Explore why linear scales are essential in D3 bar charts, mapping data values to bar heights within an SVG using domain and range to keep shapes visible.

Move the SVG creation into the JavaScript file and wrap rectangles in a graph group with margins. Compute graph width and height and translate group to make room for axes.

Explore how to invert y scales in D3.js visualizations by flipping the range, adjusting bar heights with graph height, and setting the correct y positions for rectangles.

Format bar chart axes with configurable tick counts and tick labels using D3's ticks and tickFormat, rotate axis labels with text-anchor end, and style ticks with fill color.

Explore how Firestore stores data as collections and documents, with real-time updates that redraw d3 visualizations when the underlying data changes, using auto-generated document IDs.

Set up the Firebase config in your HTML by loading Firebase app and Firestore, initialize Firestore as DB, and enable timestamps in snapshots to connect and query Firestore.

Fetch data from a Firestore dishes collection using the database object, convert documents to data, and bind them to rectangles in a D3.js graph.

Explore how D3.js joins data to rectangles using the enter and exit selections to manage virtual and real DOM elements, append new rects, and update their attributes.

Learn the D3 update pattern for real-time visualizations with Firestore data, updating scales, joining data, handling exit, updating existing shapes, and adding new elements.

Learn how to implement real-time Firestore updates with onSnapshot to listen to a dishes collection, process document changes, and feed a data array into a D3 update function for visualizations.

Set up a real-time listener on the dishes collection, process added, modified, and removed changes with a switch, update the data array, and refresh the visualization.

Explore enter transitions by animating bar height and y position from the graph bottom to final values, with a duration of 500 milliseconds.

Set up a D3.js and Firebase budget visualization project, scaffolding HTML and two JS files, then build the Ninja Wanga pie chart that updates in real time.

Create a styled HTML template using the Materialize CSS library, linking CDN assets, and build a responsive grid with a left form and right canvas for D3 and Firebase projects.

Set up a Firestore collection called expenses, add documents with name and cost fields, import Firebase, initialize Firestore as DB, and enable time stamps in snapshots for future data entry.

Set up a real-time listener to Firestore's expenses collection to sync doc changes (added, removed, modified) with a data array, then pass updates to Pi and Arc generators for rendering.

Bind real-time updates from Firebase to a pie chart by joining enhanced data to path elements via the enter selection, using a pie generator and arc path to render arcs.

Color the donut wedges with a d3 ordinal scale, using scheme set three for colors. Build the domain from data names via map and apply color(d.data.name) to each slice.

Attach a click event to each pie slice to delete its Firestore document and refresh the visualization. Read the slice id, reference the expenses collection, and delete the document.

Add interactive tooltips to a D3.js donut chart using the D3-tip plugin, showing name and cost on hover with a delete prompt. Connect the chart to Firebase for real-time updates.

Set up D3 scales and axes for a time-distance chart, using a time scale on the x axis and a linear scale on the y axis.

Format and style D3.js axes with CSS, apply D3 time format to x-axis dates, and use tick format to show meters on the y-axis while rotating labels for readability.

Filter the graph data by activity using a Firestore-stored activity property, updating the D3.js graph on each button click to show only the selected activity.

Animate data point hover in the D3.js graph by enlarging circles on mouseover and restoring them on mouseleave, using transitions, radius changes, and a white fill.

Create dotted lines on hover in a d3.js chart by adding a hidden group with x dotted line and y dotted line and toggling its opacity via mouseover and mouseleave.

Explore building a line graph with d3, featuring interactive hover, dynamic data updates, and on-the-fly filtering and sorting, plus the essentials of enter, update, and exit patterns.