MandyMeindersma

D3 Workshop: Part 3 - Conference Data

This visualization presents a scatterplot of conference registration data, mapping each attendee by their area code and order ID. The plot uses SVG elements within a 700x300 pixel canvas, built with D3.js v4. The code is forked from ideaOwl’s block and uses `d3.select` to target the SVG element. Each data point represents a paid order, with attributes like school affiliation and year of study, though the current rendering appears static without interactive features or animations.

D3 Workshop: Part 2 - SVGs and d3 Transitions

This interactive example demonstrates how to add, remove, and transition SVG shapes in D3 v4. Clicking the "Run d3 code" button appends a new green rectangle, assigns it a random y-position, and uses `transition().duration(500)` to animate it horizontally. It also binds an array of color objects to a data join, creating multiple colored rectangles via `selectAll().data().enter().append()`, each with a matching fill and an animated x-position. The underlying static SVG contains basic shapes like rects and a circle with explicit stroke and fill attributes.

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

This interactive exercise demonstrates basic D3.js data binding and manipulation on a webpage. The page displays a button that, when clicked, runs JavaScript using D3 to select all elements with the class "standard" and changes their font size and text. It also shows how to bind an array of two strings to new paragraph elements, appending them to the DOM, and attaching click handlers that log messages and alter text. The example uses the D3 version 4 API, including `d3.selectAll`, `.data()`, `.enter()`, `.append`, and `.classed`, to programmatically modify HTML content.

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

This interactive teaching example introduces fundamental D3.js concepts through a sandboxed exercise. The page presents a button that triggers `runCode()` to execute D3 code, plus predefined paragraphs and a checklist of tasks. Part 1 focuses on basic DOM manipulation with raw HTML. Part 2 tasks users with creating an array named `myData`, appending it as new paragraphs using `d3.select` and `d3.append`, and adding click behavior for console logging and text changes. The final part confirms completion by checking all list items programmatically via D3. The included checklist UI uses CSS selectors to visually strike through completed items.

D3 Workshop: Part 3 - Conference Data

D3 Workshop: Part 2 - SVGs and d3 Transitions

This interactive example demonstrates the incremental process of building and animating SVG shapes with D3.js. A button triggers a sequence that creates, moves, and recolors rectangles with smooth transitions. Using d3 v4, the code binds an array of color objects to SVG `rect` elements via `selectAll` and `.data()`, then applies `transition()` and `duration()` to animate their positions and fills. Static blue, red, and yellow shapes provide visual context while the dynamic data-driven rectangles demonstrate the enter, merge, and update pattern.

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

This interactive tutorial demonstrates fundamental D3.js data binding techniques within a sandboxed HTML page. Users click a button to trigger JavaScript that selects existing paragraph elements, modifies their text and font size, then uses `d3.selectAll` with `.data()` and `.enter()` to append new paragraphs from a two-element string array. Clicking any newly appended paragraph changes its text and color via D3’s click event handler. The page also includes a checklist of coding exercises, with D3 used to programmatically check off items when the button is pressed.

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

This interactive teaching example demonstrates D3 v4 data binding by transforming static HTML paragraphs when a button is clicked. It uses `d3.select` to target elements in a sandbox div, applying style and text changes to existing paragraphs. The code then demonstrates the enter selection pattern with `d3.selectAll().data().enter().append()` to create new paragraphs from a two-element array, binding data to each. These dynamically added paragraphs include click handlers that log to the console. The example also includes a checklist of coding exercises tied to the D3 concepts shown, making it a hands-on workshop for learning basic data joins and selections.

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

This example demonstrates basic HTML and D3.js v4 data binding through an interactive button that executes D3 selections and data joins. The page contains a sandbox with four paragraphs, and clicking the button applies D3 methods like `d3.select`, `.style`, `.text`, and `.data().enter().append()` to modify existing text and append new paragraphs from a small array. The code also includes a checklist for guided exercises, with styling applied via CSS selectors and checkbox states. It serves as a hands-on workshop introducing core D3 selection and data-binding patterns.

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

This example demonstrates the fundamentals of D3 v4 data binding through an interactive button that runs JavaScript to manipulate paragraphs. It shows how to select existing elements with `d3.select` and `sandbox.selectAll`, modify their styles and text, then bind an array of data to new paragraph elements using the `.data()`, `.enter()`, and `.append()` pattern. The HTML includes a sandbox container with four initial paragraphs and a button triggering the `runCode` function, while d3’s `style` and `text` methods handle the visual updates. The page also features a checklist exercise for learners to practice these D3 concepts.

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

This interactive tutorial demonstrates core d3.js concepts through a button-triggered sandbox. The interface presents four existing paragraphs and a button that, when clicked, executes JavaScript using the d3.select and d3.selectAll APIs to modify their styles—changing font size and text content. The code then illustrates data binding by mapping a hardcoded array of two strings to new paragraph elements via d3's data(), enter(), and append() methods. The example also includes an exercise checklist for learners, though the checkboxes are not wired to the d3 logic.