ZerkTheMighty

@ZerkTheMighty·4 public vizzes

D3 Workshop: Part 3 - Conference Data

This example visualizes conference registration data, showing each attendee’s school affiliation and year of study through an animated SVG display. The code loads D3 v4 and binds a hardcoded dataset of order records, then renders points on a 700×300 pixel canvas. It uses d3.select to manipulate the SVG and relies on D3’s data-binding and enter/update patterns to draw elements, with no external data loading or axis scales visible. The visualization is a simple scatter-like placement, though the specific encoding of fields is not fully implemented in the provided snippet.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This interactive tutorial demonstrates D3 transitions on SVG shapes. A button triggers a JavaScript function that animates existing rectangles and circles, moving them to random positions and changing their colors. The code uses d3-selection and d3-transition APIs, including `.transition()`, `.duration()`, and `.attr()` to animate properties. It also demonstrates data joins by binding an array of color objects to newly appended rectangles, which transition through random coordinates before settling into their assigned hues.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This interactive D3 workshop demonstrates SVG manipulation and transition techniques through a step-by-step coding exercise. The page displays a static blue rectangle and red circle, alongside a button that triggers a JavaScript function where learners progressively build and animate rectangles using d3 selections and data binding. The exercise checklist guides users through creating, deleting, moving, and transitioning SVG rect elements with d3.transition, including color changes from an array of data objects. The example uses D3 v4 to select the SVG container and manipulate its child elements dynamically.

Mar 24, 2018

Loading thumbnail…

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

This example demonstrates the basics of using D3 v4 for HTML selection and data binding through an interactive tutorial. A button triggers D3 code that modifies existing paragraph elements by changing their font size and text content. The exercise then introduces joining an array of two data items to new paragraphs using `d3.selectAll` and `.data().enter().append()`, with instructions for adding click handlers. The page includes a checklist of tasks covering manual DOM manipulation, debugging, and progressively building up D3 data-binding skills.

Mar 24, 2018