Cirieneve

@Cirieneve·4 public vizzes

D3 Workshop: Part 3 - Conference Data

This example demonstrates the distribution of conference registration data, showing the affiliation of attendees by school and their year of study. It uses D3 v4 to render a static SVG visualization, with each data point representing an individual order. The code selects the SVG element and binds the array of objects, which contain fields like "School Affiliation" and "Year of Study". It employs D3’s data join to append circles, though the visual encoding beyond that is not implemented in the provided snippet, as the script is incomplete and no scales or axes are defined.

Mar 24, 2018

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates a D3 workshop exercise focused on SVGs and transitions, showing how to create and animate rectangles within an SVG canvas. It begins with a static scene of blue, red, and yellow shapes, then uses D3’s `transition()` and `attr()` methods to move rectangles to random positions over one second when a button is clicked. The code appends rectangles bound to an array of color data, merges existing selections, and animates both position and fill color randomly. It relies on D3 v4’s data join and selection APIs, with animations driven by `duration()` and `delay()` methods.

Mar 24, 2018

Loading thumbnail…

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

This example demonstrates interactive data binding in D3.js v4, showing how to manipulate existing paragraphs and append new ones from an array. It uses D3's selection and data-join methods (`d3.select`, `selectAll`, `data`, `enter`, `append`) to update text and styles, plus click handlers to change content dynamically. The visualization includes a button that triggers the code and a checklist of exercises, all built with basic HTML and the D3 library loaded via CDN. The data source is a simple two-item array, `myData`, rendered as new paragraphs with class `newPara`.

Mar 24, 2018

Loading thumbnail…

Some common .gitignore configurations

This example visualizes the content of a common `.gitignore` configuration file, categorizing ignored file patterns by type. It shows the hierarchical grouping of entries into sections like compiled source, packages, logs, and OS-generated files. The visualization uses D3.js with a force-directed layout, specifically `d3.forceSimulation`, to position nodes representing each pattern or category, while text labels are rendered directly from the file’s parsed data. The source is a gist authored by Cirieneve, and the rendering approach relies on the browser’s SVG support, with no external data files beyond the embedded configuration.

Feb 27, 2014