D3.js Essentials: Build Interactive Visuals Fast

Before we dive into coding with D3, it's important to understand the foundations it builds on. In this short introduction, we preview what you need to know about HTML, SVG, CSS, and how to install D3. These core concepts will make your D3 skills more intuitive and your visuals more powerful. Let’s set the stage for everything that follows.

We explore how webpages are built and why that foundational knowledge matters when working with D3. After completing this lecture, students will understand how D3 relies on the structure and flow of HTML to render graphics. They’ll learn how the browser parses and draws webpages — from top left to bottom right — and why this impacts D3 visual placement. Students will gain clarity on the role of the <!DOCTYPE> declaration, and understand the purpose of the <head> and <body> tags in structuring a page. This lecture builds the scaffolding for how D3 fits into a modern webpage and interacts with the DOM.

We explore what SVGs are, and the crucial role they play for D3. After completing this lecture, students will know the difference between raster and vector graphics, and understand that all vector graphics are essentially Maths. They will understand where an SVG can and can't be placed within html, and which elements can and can't be placed within an SVG. They will see what a D3 graphic looks like from a DOM perspective and learn which came first: SVG or D3.

We explore how CSS interacts with both HTML and SVG, and why understanding these differences is essential when working with D3. After completing this lecture, students will know how styling SVG elements differs from styling regular HTML — for example, using stroke instead of border, fill instead of color, and navigating differences in text alignment. They’ll learn why these quirks exist and how to work around them. Most importantly, students will see why applying styles through CSS — despite the learning curve — offers cleaner, more maintainable code than styling directly in D3. This lecture encourages students to embrace CSS as a powerful companion to D3.

We show students how to include D3 in a webpage using a simple <script> tag, and explain the different ways to bring D3 into a project depending on the setup. After completing this lecture, students will know how to load D3 via a CDN, and that referencing a local D3 file for offline use can lead to CORS issues. We explain that package managers like npm and yarn can be used to install d3 for framework-based projects. We observe that D3 is modular, and that in a production environment, students should only import the specific modules they need. This lecture equips students with the tools to get D3 up and running in any development environment.

In this section we explore the key basic SVG shapes with D3. In this short introduction, we say that you will add circles, ellipses, rectangles, lines, and text shapes with d3, as well as understanding their mandatory attributes, and covering the fundamental enter() and exit() selections.

We take our first step toward creating visuals by adding an SVG element directly to the screen with D3. After completing this lecture, students will know how to use JavaScript to make the SVG full width and height of the browser window. We strip away default browser styling, such as margins and borders, and learn how to set the <html> and <body> elements to 100% height to ensure the SVG can expand properly. This lecture lays the groundwork for full-screen responsive graphics and gives students a better understanding of the browser's default layout behaviour.

We introduce the core concept behind D3 — binding data to elements — by using a simple static array to create circles in the browser. After completing this lecture, students will understand how selectAll, data, enter, and append work together to generate shapes based on data. Although the circles won't be visible yet, this is intentional: we highlight that SVG elements require certain attributes, like cx, cy, and r, to be rendered on screen. This lecture focuses on understanding the data join pattern and sets the stage for styling and positioning visuals with real meaning.

We bring our circles to life by adding the essential SVG attributes needed to make them visible. After completing this lecture, students will understand which attributes — cx, cy, and r — are mandatory for SVG circles, and how default anchor points work. We explore why all circles initially appear stacked and how to use the d and i parameters in D3 to space them out horizontally. Students will also learn how to inspect the DOM to verify that the circles exist, even when not yet styled or visible. This lecture deepens their understanding of both SVG structure and D3's data-binding logic.

We introduce ellipses and explore how to update the display when the data changes. After completing this lecture, students will know how to use the rx and ry attributes to shape ellipses and how to modify the SVG dynamically as the data array grows or shrinks. We introduce D3’s powerful update pattern, including how to handle the exit selection to remove elements that are no longer needed. This lecture gives students their first experience with dynamic, data-driven visuals that adapt as the underlying data changes.

We introduce rectangles as we tackle our first bar chart. After completing this lecture, students will understand the mandatory attributes for SVG rectangles — x, y, width, and height — and why rectangles appear “upside down” by default. We walk through a simple manual fix: adjusting the y position by subtracting the rectangle’s height from the baseline, simulating a bottom-up growth without using scales just yet. This lecture reinforces how SVG coordinates work and prepares students for more precise layout control in later sections.

We add straight lines to our SVG and explore how to make them visible. After completing this lecture, students will know the mandatory attributes for SVG lines — x1, y1, x2, and y2 — and understand why lines often don’t appear at first. Unlike shapes like circles or rectangles, lines have no fill and no default stroke, meaning they require explicit stroke and stroke-width properties to become visible. This lecture highlights a common beginner pitfall and reinforces the importance of styling when working with SVG elements.

We introduce SVG text and explore how it differs from standard HTML text. After completing this lecture, students will understand how to add labels directly within the SVG and how to control their positioning using attributes like text-anchor and dominant-baseline. We apply these concepts by labelling each bar in a simple bar chart, aligning the text neatly underneath the bars. This lecture gives students a clear understanding of how to position and style SVG text for clean, readable visualizations.

In this short introduction to this section, we cover the key topics of scales and axes, and understand that this section will cover examples of continuous, discrete and threshold scales, and demonstrate their usage via axes or colouring of elements.

We take the first step toward smarter positioning by introducing scales in D3. After completing this lecture, students will understand what a linear scale is and how it maps a data domain to a visual range. We explain the concept of domains (input values) and ranges (pixel values), and show why scales are essential for converting data into screen positions. Students will also learn that linear scales are just one of several types D3 offers. This lecture walks through creating a simple linear scale, setting the stage for precise, data-driven visuals.

We bring our first axis to life using the linear scale we just created. After completing this lecture, students will understand how to generate a Y axis with D3 and attach it to a <g> (group) element, using transform to position it correctly within the SVG. We explore the axisLeft and axisRight functions. This lecture emphasizes the importance of grouping and placement when adding axes to a chart and lays the groundwork for building structured, professional-looking visuals.

We take a closer look at the structure of D3-generated axes and how to format them effectively. After completing this lecture, students will know how to inspect the DOM to understand how axes are built — from the main path and tick lines to the individual text labels and group elements. We demonstrate how to style axes using both CSS and D3, including adjusting the number of ticks with .ticks(), customizing spacing with .tickSize() and .tickPadding(), and targeting specific elements for styling. This lecture gives students the tools to create clean, readable axes that match the look and feel of their charts.

We put our ordinal scale knowledge into practice by creating three clear category labels: Past, Present, and Future. After completing this lecture, students will know how to use scaleBand to position categorical labels along the x-axis and place visual elements accurately. We explore how to use the domain to define categories and how bandwidth() helps center labels or shapes within each band. This lecture reinforces the value of ordinal scales for working with non-numeric data and prepares students to build more structured, narrative-driven visuals.

We begin working with time-based data by introducing D3’s time scale. After completing this lecture, students will understand how to convert date strings into JavaScript Date objects using d3.timeParse, and why this conversion is essential for working with time scales. We use d3.extent to automatically determine the earliest and latest dates in the dataset, and prepare the domain for a future axis. This lecture focuses on data preparation — the crucial first step for building accurate, time-driven visualizations.

We construct a time-based axis using the date scale we prepared earlier. We rotate the tick labels for better readability and explore how to control the frequency of ticks using d3.timeMonth.every(). We also introduce d3.timeParse to ensure D3 expects the date data in its specific format. This lecture shows how to build a visually clean time axis and introduces tools for controlling both layout and legibility.

We explore how to bring our visuals to life with color using D3’s powerful scale functions. After completing this lecture, students will understand the differences between threshold, ordinal, and sequential colour scales, and when to use each one. We demonstrate how to map numeric ranges to colour categories with scaleThreshold, assign fixed colours to discrete groups using scaleOrdinal, and apply smooth gradients with scaleSequential and interpolator functions like d3.interpolateBlues. This lecture gives students the tools to add meaningful and visually engaging colour to their data-driven graphics.

In this short introduction, we explain that you will cover D3's built-in handlers for CSV and JSON files, and the pros and cons of these. We also look at the important concept of nested selections - where deeper levels of data are matched to lower levels of SVG shapes, with a single data binding.

We take our first step into real-world data by loading a CSV file into D3. After completing this lecture, students will understand how D3’s d3.csv function works, and how it relates to other formats like TSV and DSV. We explore how CSV values are initially read as strings, and how to convert numeric fields. Using this cleaned data, we power our simple bar chart from external data. This lecture marks the transition from static arrays to dynamic, external data sources.

We explore how to work with JSON files as a data source for D3. After completing this lecture, students will understand how to load structured JSON using d3.json, and how JSON differs from CSV — notably that numbers are preserved in their native types. We demonstrate how to convert date strings into JavaScript Date objects using a simple forEach loop, laying the groundwork for working with time-based data. This lecture builds confidence for handling hierarchical or nested data in future lectures and prepares students for more complex data transformations.

We take our first look at hierarchical data by loading a nested JSON structure and building a simple tree-like layout — without using a layout generator. After completing this lecture, students will understand how to work with hierarchical JSON objects in D3. We bind the root object to a top-level <g> group and use d => d.children to drill down through the data, creating level1, level2, and level3 groups with labels at each stage. This lecture teaches students how to navigate nested data manually and lays the foundation for future use of D3’s hierarchy tools.

We address the common issue of messy or incomplete data and show how to deal with it when generating visuals. After completing this lecture, students will understand how to handle bad or missing values — not by filtering the data itself, but by filtering the selections in D3 as a last resort. We demonstrate how to check for undefined or invalid values during rendering, and use .filter() on selections to prevent problematic elements from being drawn. This lecture equips students with a practical fallback technique for keeping charts clean and functional, even when the data isn’t perfect.

In this short introduction, we consider the power of layouts. We explain that D3 layout generators are essentially either data preparation or co-ordinate generation tools: they do not add sets of shapes for us. We look at d3.hierarchy with d3.treemap, we use d3.stack with our bar chart, and then we unlock the most complex generators - the path generators - by a thorough understanding of the SVG path element and how its data attribute works.

We take our first step into using D3’s built-in layout generators by preparing data for a treemap. After completing this lecture, students will understand how to structure hierarchical data using d3.hierarchy, and how to compute the summed values needed for layout generation, and to use these values as an input to a treemap diagram - a bit like a square pie chart. This lecture lays the groundwork for turning structured data into spatial layouts like treemaps, sunbursts, and more.

We introduce the stack layout by transforming a basic column chart into a stacked version that visually separates categories. After completing this lecture, students will understand how to use d3.stack to restructure data for stacking with the group element, and how to layer different segments — such as ripe and unripe fruit — within the same bar. We apply colour coding to distinguish the categories and explore how the stacked layout changes both the data structure and visual outcome.

We take a hands-on approach to understanding SVG paths by understanding the the d attribute for different types of shapes. After completing this lecture, students will know how to define a path for a straight line, an arc, a quadratic Bézier curve, and a cubic Bézier curve — gaining insight into how each segment works. We explore start and end points, control points, and the role of arc flags and angles. This lecture builds intuition for the structure and complexity of path commands, setting the stage for appreciating the power and simplicity of D3’s path generators later on.

We bring our visuals to life using D3’s line and area generators. After completing this lecture, students will know how to import time-based data and convert date strings into JavaScript Date objects using d3.timeParse. We use this parsed data to build a line chart with d3.line(), then extend it into a filled area chart using d3.area(). Students will understand how these generators simplify the creation of SVG paths and make it easy to represent trends over time. This lecture combines real-world data handling with expressive visual output.

We explore how D3 handles missing or incomplete data in a time series by introducing a null value into our dataset. After completing this lecture, students will see what happens when a null is left unhandled — such as breaks or distortions in the chart — and learn how to use the .defined() method with line and area generators to skip over invalid points gracefully. This lecture teaches a robust technique for dealing with real-world, imperfect data while keeping your visualizations clean and reliable.

We shift to circular layouts by introducing pie and donut charts using D3’s d3.pie and d3.arc functions. After completing this lecture, students will understand how d3.pie() generates start and end angles, and how d3.arc() takes those angles and generates the SVG path data to draw the slices. We explore the difference between a standard pie chart and a donut chart, showing how to control inner and outer radii for visual variation.

In this final short introduction, we look at animations, transitions and events. We start with the humble viewBox, which can make your visual responsive with one line of code, move on to CSS animations (which offers more than just hovers), then to D3 transitions, and finally to the .on() events in D3, which allow us to trigger visual changes based on user behaviour.

We make our treemap responsive by exploring how to use the SVG viewBox attribute effectively. After completing this lecture, students will understand how viewBox allows an SVG to scale with its container, and how the preserveAspectRatio attribute controls its alignment and scaling. We focus on three key options: xMidYMid meet to center the SVG while preserving proportions, xMinYMin meet to align it to the top-left corner, and none to stretch the SVG and ignore aspect ratio entirely. This lecture shows how to keep D3 layouts adaptable across screen sizes while maintaining visual integrity.

We bring interactivity to our visuals using CSS animations. After completing this lecture, students will understand how to apply transitions on hover, and how to animate SVG elements using transformations such as translate. We show that CSS animations don’t always need to be triggered by hover — they can be time-based or event-driven. To illustrate this, we use a setTimeout to delay a transition, turning circles from white to multi-coloured while applying animated transformations. This lecture demonstrates how CSS can enhance SVG visuals with smooth, expressive motion — without writing any JavaScript animation code.

We explore how to animate elements using D3 transitions — especially for properties that CSS can’t control, like cx, cy, r, and other coordinate-based attributes. After completing this lecture, students will understand how to create smooth, data-driven animations with .transition(), .duration() and ease(), and when D3 is the better choice over CSS. We also introduce selection.join() as a cleaner, more concise way to express the enter–update–exit pattern. This lecture shows how to combine animation with lifecycle-aware rendering for slick visuals.

We bring interactivity to the next level by using D3’s .on() method to handle user events. After completing this lecture, students will know how to respond to a range of browser events including click, dblclick, contextmenu, mouseenter, mouseleave, and mousemove. We demonstrate how to attach these events to SVG elements and use them to trigger changes or show feedback. This lecture equips students with the tools to make their D3 charts interactive, responsive to user input, and ready for real-world applications.