Lab 2 Q1

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows move in response to button clicks. The page provides "Add Data" and "Remove Data" buttons that trigger animated updates to the face’s features. The code uses d3.select to target the SVG element, d3.scaleLinear with d3.interpolateHcl for color transitions, and d3.pack to flatten hierarchical data into circle layouts. The rendering relies on SVG elements and D3’s enter/exit pattern, with animations driven by D3 transitions. The data comes from a nested JSON hierarchy (flare dataset) that is visualized through the packing layout.

BBrett Cunningham

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation by rendering a smiley face with animated eyebrows, built using D3.js v5. The visualization uses `d3.select` to target an SVG element and `d3.scaleLinear` to map data, though the code also includes a CSV loading attempt with `d3.csv` that references a population dataset. The face is drawn through SVG rect elements appended to the chart, with the eyebrow movement implied by the code's structural setup. The example relies on raw SVG attribute manipulation rather than higher-level layout or force simulation APIs.

Llisacaligagan