DeveloperJeffb

@DeveloperJeffb·3 public vizzes

D3 Workshop: Part 3 - Conference Data

This visualization displays conference registration data, showing individual attendees as circles positioned on an SVG canvas. Each data point includes school affiliation, year of study, area code, and payment timestamp. The code uses D3 v4 to bind the JSON dataset and append circle elements to the SVG, with animations likely triggered through D3 transitions. The example serves as an educational workshop demonstrating basic data binding and SVG rendering techniques with d3.select and d3.append.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates basic D3.js (v4) concepts for creating and animating SVG elements through a simple interactive button. It shows how to manually add a yellow rectangle, then uses D3 to append a green rectangle that transitions to a random position. The code also binds an array of color data to newly created rectangles, moving them and updating their fill colors through chained transitions. Key APIs include `d3.select`, `append`, `data`, `enter`, `merge`, and `transition` with `.duration` and `.attr` for animated property changes, all rendered as SVG in the browser.

Mar 24, 2018

Loading thumbnail…

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

This interactive D3 workshop demonstrates the basics of data binding and DOM manipulation in a live sandbox. It shows how a button click triggers JavaScript to modify existing paragraph elements—changing their text and font size—while also appending new paragraphs from a hardcoded array. The code uses D3 v4’s `selectAll`, `data`, and `enter` methods to bind the array `myData` to new `<p>` elements, then adds click interactivity via `on`, which changes the clicked paragraph’s text and color. The example also includes an HTML checkbox exercise list, though only the button-driven D3 logic is functional.

Mar 24, 2018