LelandCurtis

@LelandCurtis·6 public vizzes

Gist d577c8303babf06f479a4ba7df562702

This example presents a checklist and rubric for a coding assessment, structured as a Markdown document. It uses GitHub-flavored Markdown syntax with task list items (`- [x]`) to track completion of steps for creating directories, making commits, pushing to GitHub, and building models. The document does not use any JavaScript visualization libraries or data APIs; instead, it relies on static Markdown formatting to display the rubric and checkboxes. It serves as a procedural guide, showing the assessment requirements and the author’s completed checkboxes.

Sep 3, 2021

Loading thumbnail…

d3js workshop - bar chart

A horizontal bar chart displays Premier League football teams' total points, with each bar's length proportional to the team's PTS value and an overlaid text label showing the exact number. Built with D3.js v3, the chart reads team statistics from a CSV file and renders as SVG rectangles, using a linear scale (d3.scale.linear) mapped to the bar widths and groups positioned vertically via translation transforms. The example demonstrates basic data loading, scaling, and SVG shape creation for workshop purposes.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles 2

Three circles of different data values appear in an SVG canvas, then animate by shifting downward and turning red before returning to their original positions on mouseover. The example demonstrates basic D3.v3 selection, data binding, and transition APIs, including `transition().delay().duration()`. Interactive event handling is implemented through `.on("mouseover")`, which changes circle styling and radius. The code initializes an SVG element with `d3.select('body').append('svg')` and uses a data array `[10, 20, 30]` to map circle positions.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles

This example demonstrates how to create and animate three circles in an SVG scene using D3.js version 3. The visualization shows circles transitioning from their default black fill to red, with each circle animating sequentially based on a delay. The code builds an SVG container, binds an array of numeric data to circle elements via `d3.selectAll` and `data().enter().append()`, then applies transitions using `transition()`, `delay()`, and `duration()`. The example illustrates basic D3 data joins, SVG circle attributes like `cx`, `cy`, and `r`, and chained transition methods for styling and position changes.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates data binding in D3.js, where an array of four names is joined to an empty selection of `<div>` elements using `d3.selectAll('div').data(...).enter()`. No visual output is rendered initially, as the `.append('div')` and `.text()` calls remain commented out, leaving the code as a starting point for a workshop exercise. The script loads D3 v3 from a CDN and shows how `.enter()` creates placeholder selections for each data item, with the actual text assignment to the bound data values commented out for participants to explore.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections can target specific elements in the DOM using element type, ID, and class selectors. The page contains two visible divs with different identifiers, and commented code shows updated text for various selection strategies, such as `d3.selectAll('div.selectMe')`. It also illustrates appending new elements, where `d3.select('body').append('div')` adds a child to the document body. Built with d3.v3, the example relies solely on D3’s core selection and manipulation APIs, with no external data or rendering pipeline.

Oct 19, 2017