Mara2020

@Mara2020·3 public vizzes

D3 Workshop: Part 3 - Conference Data

This interactive workshop example plots conference registration records as circles on an SVG, with each data point encoding order details such as school affiliation, year of study, and payment timestamp. Built with D3 v4, it uses data binding to append SVG elements and animate their positions. The visualization demonstrates how raw CSV-style data can be mapped into a static scatterplot, with no axes or scales defined, relying on a simple selection and enter-update pattern to display the dataset in a fixed 700x300 viewport.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates how to use D3 v4 to create and animate SVG shapes. A button triggers a script that appends rectangles, positions them randomly, and transitions their colors over time. The visualization shows a static SVG containing a blue rectangle and a red circle, while the script adds and animates moving rectangles using the D3 `transition` API and `setInterval` to update their `x`, `y`, and `fill` attributes. It serves as an interactive tutorial for learning SVG manipulation and D3 transitions.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates an interactive tutorial for learning basic D3.js data binding and DOM manipulation. It shows how a button click triggers a function that selects existing paragraphs, modifies their style and text, then binds an array of two strings to create new paragraph elements using `d3.selectAll`, `data`, and `enter`. The new paragraphs respond to click events, changing their color and text. The page also includes a checkbox list as an exercise guide, completed programmatically via d3’s `property` method. The code uses d3.v4 and relies on standard selection, data join, and event handling APIs.

Mar 24, 2018