D3.js in Action: Build 17 D3.js Data Visualization Projects

Explore the fundamentals of css selectors, including tag name, id, and class selectors, and delve into attribute based selectors such as presence, value, not, starts with, contains, and ends with.

Explore CSS selectors in action, focusing on position based and relationship based selectors. Learn how first-child, last-child, first-of-type, last-of-type, nth-child, only-child, and combinator-based descendants and child selectors target elements precisely.

Explore the fundamentals of scalable vector graphics, learning the SVG coordinate system and how to draw lines, rectangles, circles, ellipses, and text with stroke, fill, and opacity.

Learn to create polygons, polylines, and paths in SVG using points and coordinates, experiment with fill and stroke, and explore absolute and relative positioning.

Explore SVG basics by grouping shapes with the G element, applying shared styles and transformations (translate, rotate, scale) to rectangles, circles, and polygons.

Set up the d3.js development environment by linking the latest d3.js file online or offline, using version 5.2.0, and verify with a simple script that colors squares.

Learn how to select elements with d3.js using select and select all, targeting tag names, ids, and classes, and apply styles to the first or all matches.

Explore tree-based element selection in D3.js by using select and select all, CSS selectors, and relationship-based selectors to target circles within grouped svg elements and apply color and style changes.

Explore how to style selected D3 elements with the style method, chaining properties like fill, stroke, and opacity, using both constant values and functions that access data and index.

Learn to add or remove classes on D3 selections with the class method, using true, false, or function criteria to style circles.

Learn to set attributes on selected elements with the d3.attr method, adjusting circle positions and radii with fixed values or functions, and compare attributes, properties, and a checkbox example.

Learn to set content for selected elements with D3.js using text and HTML methods, update text or HTML content, and display new content with bold or inline tags.

Learn to add new elements in D3.js using append and insert; append creates a new last child, and insert adds before a chosen element, enabling targeted placement and styling.

Create an SVG on the fly with d3.js, appending it to the page and adding shapes like a rectangle and circle using method chaining and correct references.

Join data to selected elements with D3's data method, including enter, update and exit selections, and style elements based on the bound values.

Join an array of objects to create five circles in an svg, mapping radius, x, y, and color via d3 data join and exposing data attributes.

Explore the core concept of data joins in d3.js through enter, update, and exit selections, using a chairs-and-people analogy.

D3.js version 3 uses enter, update, and exit selections in a data join. See how to align data with elements, add new nodes, and remove extras.

Learn how enter, update, and exit selections differ in D3 version 5 and how to merge enter and update selections to bind data with placeholders and newly added elements.

Explore the real magic of d3 data joins by building an svg with four values, binding data, and using enter, update, and exit selections to create rectangles.

Create a horizontal bar chart from a numeric array to show weekly computer sales (Monday–Saturday) using plain HTML elements, with bars scaled by value and centered labels.

Create a vertical bar chart in D3.js by binding data to SVG rectangles, computing x and y positions, and deriving heights with numeric labels on each bar.

Explore how d3's three scales map data to pixels using domain and range to render horizontal and vertical bar charts that yield meaningful visualizations.

Master mapping data to pixels with a linear scale in d3.js, defining domain and range for a vertical bar chart, and observing how values map to bar heights.

learn to avoid hardcoding in d3.js data visualizations by using min and max to set scale domains, adapt range and height, and automatically compute data bounds.

Explore color scales in d3.js by mapping input values to colors via linear interpolation. Define domain and range, and interpolate outputs like strings or objects.

Learn to use power and log scales in d3.js, including setting an exponent and base, with domain and range guiding continuous data mapping.

Use time scales in d3.js to build a vertical bar chart of quarterly tax payments. Map dates to the x axis and tax amounts to the y axis.

Explore building a time-based bar chart in D3.js by joining data, mapping dates with a time scale, and rendering rectangles and date labels while tuning domain, range, and spacing.

Explore sequential scales in D3, mapping continuous inputs to output ranges using predefined or custom interpreters like interpolate rainbow, plasma, and cool; visualize colors with a linear position scale.

Explore how d3.js quantize, quintile, and threshold scales convert continuous input into discrete output by partitioning a domain into buckets, with practical examples using color as output.

Explore how quantize, quarantine (quantile), and threshold scales convert continuous input into discrete buckets in d3.js. See how min–max, full input, and explicit thresholds determine bucket assignment and colors.

Learn how ordinal scales map discrete input to discrete output by using domain A–Z and a range of colors; pair with a linear scale to position 26 items.

Learn to add x and y axes in d3 using a linear scale with domain 0–100 and range 0–500, rendering axis bottom or left with ticks and labels in an svg.

Discover how to customize the D3.js axis, ticks, and labels by adjusting padding, colors, thickness, and text formatting using axis specific methods like big format and big values.

This update presents a browser-compatibility workaround for axis styling: remove padding on the SPG element, append a translated G, and use spacing variables to render correct x and y axes.

Explore interactive d3.js axis display by selecting horizontal and vertical orientations from dropdowns to render top, bottom, left, or right axes using scales and on change events.

Display d3.js axes based on user input, mapping dropdown directions to top, bottom, left, or right with translate adjustments.

Display all four axes based on dropdown input, fix padding with spacing and translation adjustments, and preserve the main axis group while removing old elements to show lines and text.

Explore building a vertical bar chart with axes using d3.js by displaying yearly loss data (2010–2014) with x and y scales, bottom x-axis and left y-axis, and formatted dollar values.

Update to project 3 shows fixing a vertical bar chart axis by removing padding, translating group, and subtracting spacing from height and x/y axis to render clear axes and bars.

Build a scatterplot with D3.js by mapping temperature to the x-axis and ice cream sales to the y-axis, using a data array of {temperature, sales}, scales, axes, and circles.

Learn to use the d3 line generator to draw lines from a points array, create various shapes, and render them as path elements with shape generators.

Demonstrate configuring d3 line generator with accessor functions to map data objects to x and y coordinates and switch between straight and curved lines, options like basis, cardinal, and step.

Create a two-line line chart in D3.js using scales, axes, and a line generator, then refine colors and padding for accurate data representation.

This lecture updates part 1 of the line chart project to clearly display the x and y axes by adding and translating a g element and adjusting spacing and height.

Discover how the D3 area generator builds the area between a lower and upper bound from a points array, with y defaulting to zero.

Build an area chart from scratch using d3, plotting years 2000–2005 against profits, and configure x and y linear scales, domains, ranges, and axes with display workarounds.

Build an area chart from scratch in D3.js by defining data and profit and rendering the area path. Set up x and y scales, domains, and axes with ticks.

Apply the d3 stack generator to create a horizontal stacked bar chart showing weekly sales by category (desktops, laptops, printers, monitors); compute segment widths from lower and upper bounds.

Learn to build a stacked area chart in d3.js by combining ADR and stack methods, using yearwise sales data for desktops, laptops, monitors, and printers, with scales and axes.

Use the d3 stack method to build a stacked area chart with desktops, laptops, printers, and monitors, assign colors, and derive the y-domain from the stacked data.

Define the area, compute lower and upper bounds, and render a stacked area chart with D3's area and stack methods, establishing scales, axes, and colors.

Learn how the D3.js arc generator creates circles and annuli by configuring inner and outer radii, start and end angles in radians, with examples of full, half, and partial arcs.

Learn to configure the D3.js arc generator for annulus segments and pie charts by setting start and end angles, inner and outer radii, and padding, with optional corner radius.

Apply the D3 arc centroid to place labels at the center of each donut segment and position text for Mon–Fri data. Tweak x offsets to keep labels inside small slices.

Discover how the pie generator converts data into start and end angles for the arc generator, producing pie chart segments and enabling ordering via sort.

Learn to use the d3 symbol generator to create path data for symbols such as star, circle, and triangle, configure type and size, and position them with transforms.

Create a pie chart with a legend in D3.js, mapping grades A plus, A, B, C, and F to colored segments, with a right-hand legend and centroid labels showing numbers.

Build a pie chart with a legend in D3 by creating nested g elements, appending rectangles and labels, mapping colors with an ordinal scale, and positioning items.

Explore how to animate D3.js visualizations with transitions, using interpolation-based animation, the transition method, and options like delay and duration to control color changes across multiple elements.

Control the speed of d3 transitions using the ease method with duration and delay. Apply per-element easing options to vary start and momentum while finishing within the set duration.

Create an animated horizontal bar chart in d3.js by applying transitions, delays, and initial opacity to bars, using enter selections and three scales to control timing, duration, and growth.

Master transition chaining in d3.js by sequencing multiple state changes—move, resize, and recolor circles—using repeated method chaining and interval timing to create complex animations.

Learn how tweening controls in-between values during d3.js transitions. Override default interpolation with custom tweens, using interpolate round for integers and style tween for font-size changes.

Build a continuously moving stars animation using D3.js symbol generator and transitions with random initial and final positions, updated at intervals.

Build a sad-to-smile animation in project 11: Make Me Laugh - Part 1, using d3.js transitions to render a face with SVG circles for eyes and a mouth arc.

Use d3.js to morph a face by manipulating an svg path with bezier curves, adjusting a control point from sad to smiley, via a training technique and interval-based animation.

Attach mouse events to a d3 pie chart to make visuals interactive, hover to change colors with transitions, and show percentages on mouse down and hide on mouse up.

Build an interactive D3.js pie chart that shows tooltips on mouse down, calculates the percentage, positions the tooltip with absolute left and top, and hides it on mouse up.

Learn to make visualizations draggable with the d3 drag function, creating circles at random positions in an SPG, and applying drag start, drag, and drag end to move them.

Explore how to zoom individual data points in d3.js visualizations by applying a per-element zoom behavior, with min and max scale, translating position, and keeping other circles fixed.

Apply d3 zoom to the whole visualization by wrapping circles in a g element, overlaying a rectangle, and routing zoom events to the group transform for unified zoom.

Learn how to fetch external data from a server using D3.js to build charts with csv, json, and xml formats, and bind data to a horizontal bar chart with names.

Fetches json data from a local server and uses d3.js to bind an array of five objects—each with radius, x, y, and color—to render circles on an svg.

Fetch and parse XML data from a server, extract radius values, and render colored circles with D3.js using enter/append and data binding.