FordMcLeod

@FordMcLeod·2 public vizzes

D3 Workshop: Part 3 - Conference Data

This example visualizes a workshop’s conference registration data, showing the distribution of attendees by their school affiliation and year of study. The visualization uses D3 v4 to render SVG circles, with each data point representing an individual order. The code leverages `d3.select` to bind the embedded dataset and positions circles based on categorical groupings, while animation via D3’s transition methods highlights the points upon load. The raw data, including order timestamps and area codes, is hardcoded in the script, and the rendering focuses on the static SVG container.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates how to progressively build and update SVG shapes using D3 v4, starting with a static blue rectangle and red circle, then responding to button clicks to create, delete, and transition rectangles. The code uses D3 selections, data binding, and the `transition()` API to move shapes to random locations and animate fill colors from a predefined array. It also shows how to use the enter-update-exit pattern to manage dynamic elements. The visualization serves as a hands-on workshop exercise, with a checklist of tasks covering manual SVG creation versus D3-driven updates.

Mar 24, 2018