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.

learn how to apply attributes to d3 elements using the attr method and method chaining, adding width, height, fill, and coordinates to svg, rect, circle, and line elements.

Group elements in SVG using a g container to bundle bars, axes, and labels, then apply transforms such as translate to move the entire chart section in one step.

Bind a data array to an SVG rectangle with d3's data method, driving width, height, and fill from bound data. Access data object D, index I, and selection N.

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.

Learn how to use d3's enter selection to create extra dom elements for data when joining to rectangles. The lecture covers enter selection, virtual elements, and appending rects with 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.

Learn to add x and y axes to a bar chart using D3 axis generators, create axis groups, and position them with translate based on graph height and scales.

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.

Learn to enable real-time updates by listening to Firestore changes and applying the D3 update cycle, including enter and exit selections, to auto-refresh a bar chart.

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.

Master smooth data updates in D3 by applying transitions to rectangles, animating height changes, and sliding bars on load, with an introduction to tweens for complex shapes.

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

Animate updates in d3.js and Firebase by transitioning current bars from their existing y coordinates and heights to new values, with a 500ms duration for smooth data visual updates.

Learn to refactor D3 visualizations by externalizing transitions into a reusable constant and using merge to apply changes to both enter and update selections, reducing duplicated code.

Learn to build custom tweens in D3, using interpolation and a 0-to-1 time ticker to drive width transitions from zero to bandwidth in the enter selection.

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.

Generate pie slice angles with the d3 pie generator, then draw the wedges as SVG paths with the arc generator, noting angles are in radians.

Set up the pie chart foundation in D3 by defining dimensions and center, creating an SVG container and group, and configuring a pie generator with a cost-based value accessor.

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.

Watch the project solution to learn how to rejoin data with D3.js, manage exit selections, and update path elements when data changes, including add, edit, and delete operations.

Learn to add interactivity to d3 visualizations by enabling hover, click, and tooltips on a pie chart (and bar chart) connected to a Firestore real-time database.

Learn how naming transitions in D3 prevents interaction between hover and growth animations, ensuring arcs resize smoothly while mouse over and mouse leave change colors independently.

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.

Create an HTML template for a D3 and Firebase project, featuring a grey responsive layout with a top nav, left activity buttons, a right canvas, and a central form.

Implement dom interactivity by wiring button clicks to toggle the active state, update the form activity display, and set the input id and span text for future Firestore storage.

Connect a web form to Firestore, saving input as documents in an activities collection, while initializing Firestore and handling submission validation for future visualizations.

Set up a real-time listener on the Firestore activities collection to stream added, modified, and removed changes into a data array, then update the D3 visualization.

Set up graph margins, define the SVG container and graph group, compute graph width and height, and translate the graph by the margins to prepare for axes.

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.

Add dummy data to the graph by simulating different days through clock changes, enter daily exercise distances for cycling, running, swimming, and more, then learn to filter by activity.

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.