AndrewMcKernan

@AndrewMcKernan·3 public vizzes

D3 Workshop: Part 3 - Conference Data

This example visualizes conference registration data, mapping each attendee’s order details, school affiliation, and year of study. It shows a static SVG bar chart or scatterplot-like layout, though the code primarily loads the dataset and prepares it for D3 v4 rendering. The visualization uses D3 v4’s `d3.select` to target the SVG container and binds the array of objects, which include fields like “Area Code” and “Paid at” timestamps. While no axes or scales are defined, the example demonstrates how raw tabular data can be structured for future graphical encoding, with the source data embedded directly in the script.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates how to animate SVG elements with D3 v4, showing a static red circle and blue rectangle alongside small rectangles that jump to random positions and colors when a button is clicked. It illustrates data joins by binding an array of color objects to newly appended rectangles, then transitions them with `d3.transition()`. A `setInterval` loop continuously updates the rectangles' positions and fills using random values from the data array, while the initial static shapes remain unchanged. The code uses `selection.enter()`, `merge()`, and chained `.attr()` and `.style()` methods for smooth animations.

Mar 24, 2018

Loading thumbnail…

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

This example demonstrates a hands-on D3 workshop exercise that introduces basic HTML structure, the D3.js v4 library, and fundamental data-binding concepts. It shows a sandboxed webpage with a button that, when clicked, triggers a JavaScript function to manipulate existing paragraph elements and append new ones based on an array of data. The code uses `d3.select` and `d3.selectAll` to target DOM elements, applies styles and text changes, and employs the data join pattern with `.data()`, `.enter()`, and `.append()` to create new paragraphs. It also attaches click event handlers to dynamically added elements, logging a message and altering their appearance, while the accompanying exercise checklist guides users through modifying the code to reinforce learning.

Mar 24, 2018