D3.js - the art of data visualization

Explore D3's select and selectAll to target paragraphs by class or id. Use dot notation for class, index-based child selection, and prepare for data binding.

Bind a simple array of numbers to all paragraph elements using d3's data function and see enter and exit groups; update each paragraph's text to reflect its bound data.

Explore how d3.js uses enter() and exit() to bind data, create new paragraphs, and remove outdated ones within the body, reflecting changes from five items to three.

Create an svg canvas, set background, then bind a dataset to draw circles with cx, cy, and r using d3 enter selections; observe x from left and y from top.

Install and import the d3-selection-multi library with npm to set multiple attributes on selections. Define attribute objects and apply them with the attributes function to position and color circles.

Demonstrate drawing six basic shapes—circle, ellipse, line, polygon, polyline, and rectangle—using an attributes object to set position, stroke, and fill, and compare polygon with polyline.

Explore the path element in d3.js to draw complex shapes, using move and line commands, absolute vs relative coordinates, stroke and fill attributes, and bezier curves.

Customize shapes in D3.js by adjusting stroke, fill, and stroke width, set opacity for stroke or fill, and apply dash patterns and cursor styles for interactive visuals.

Explore the text element in D3.js, setting coordinates, text content, and typographic attributes such as font size, font style, weight, baseline alignment, and letter spacing to render text on screen.

Learn to create a path with move and quadratic curve commands, set the d attribute, and render text on the path with a middle anchor and 50% start offset.

Explore DeFreeze statistical functions to compute min, max, sum, average, median, variance, and percentile on integer and object datasets; use accessors, ascending sort, shuffle, and merge.

Explore how to create a histogram with the d3.js histogram generator, including data handling, domain and threshold options, and customizing the axis for nested or object datasets.

Explore data binding in D3.js by comparing data and datum and binding datasets to selections. See how enter creates paragraphs and updates text based on the dataset.

Learn how to implement dragging for a selected red circle using a drag behavior in d3.js, defining start, drag, and end callbacks, and updating position and stroke color.

Explore event handling in d3.js data visualization by interactively changing a circle's color on mouse events, reading event coordinates, and using traditional function syntax.

Practice building a D3.js slider with a labeled value, draggable scale that exhibits a wave effect, and hover interactions, while following a step-by-step introduction in the next lecture.

Build a d3.js slider with 50-pixel left and right margins, generate x-scale data, render scale lines, and implement a draggable handle that moves lines and a volume label.

Explore continuous scales in D3, mapping data to screen coordinates using linear, power, and logarithmic scales with domain and range, and rendering circles along the x axis.

Learn how quantize scales map a continuous domain to a discrete color range in d3.js, compare quantize, quintiles, and threshold scales, and color circles by data values.

Demonstrate ordinal scales in d3.js by mapping a discrete domain of mouse names to a range with scaleOrdinal. Explore how domain–range mismatches affect output and why scaleBand or scalePoint helps.

Explore ordinal scales with scaleBand to build a two-bar column chart, bind data, compute x and y with domain, range, bandwidth, and padding from zero baseline.

Explore scale point, an ordinal scale with zero bandwidth, to distribute circles evenly across the range and convert a column chart into a scatter plot.

Learn to implement a diverging scale in d3.js by configuring scaleDiverging with a three-value domain and a chosen interpolator to color 600 vertical lines.

Define a D3.js time scale with a domain from 1st January 2000 to 31st December 2020, map to a vertical range, generate twelve monthly dates, and format labels as year-month.

Create and render horizontal and vertical axes with the axis generator from the D3.js library, building scale x and scale y with defined domains, ranges, and transforms for positioning.

Learn to customize D3.js axes by adjusting tick density and values, changing tick size and font, formatting labels with prefixes or custom functions, and rotating axis labels for readability.

Master adding grid lines with the D3.js axis generator, rename axis to grid y, adjust tick size and labels, and style grid lines from solid to dashed.

Learn to create and control animations with transitions in d3.js, selecting the circle, adjusting x and y positions, color, and radius, with duration and easing.

Explore how D3.js easing functions control the time characteristic, from linear to exponential easing and exponential out. See how different curves shape animation timing to make data visualizations more attractive.

Create a dynamic bubble chart in D3 by mapping weight to x and height to y; size bubbles by array length and color by weight-to-height, reflecting overweight or underweight changes.

Show how to implement a d3 bubble chart solution with animated transitions, clipping to the plot area, and enter–update–exit data binding.

Explore a d3.js force simulation using the Defra library to visualize a network of nodes and links, updating positions on the tick and applying a force link.

Discover how d3.js force simulation arranges nodes and links with forces like link, center, collide, many body, radial, and force X, adjusting distance and center for dynamic layouts.

Master dragging in d3 force simulation by implementing start-dragging, during-dragging, and end-dragging, using fx, fy, and defreeze to control node positions and adjust alpha target to restart simulation.

Explore how to build a D3.js force simulation that separates nodes by color on click and re-centers them on subsequent clicks, using forceX, collide, and velocity decay.

Apply force simulation by adding left, right, and center forces to position notes, adjust strengths and alpha, filter the data set, and restart the simulation for dynamic data visualization.