Sebastian Barrett

@TallestMan98·10 public vizzes

Face made with d3.js

A face built from SVG primitives animates through a series of facial expressions. The circular face, positioned via an SVG group transform, holds two eyes that pulse by scaling their radius. Eyebrows shift vertically and rotate, while the mouth, drawn with the `d3.arc` path generator, expands and contracts its inner and outer radii. The `d3.selection.transition` API orchestrates these 2000-millisecond animations, creating a looping, humorous sequence. The example uses d3.v7 to manipulate and transition the SVG elements directly.

Feb 16, 2023

Loading thumbnail…

Fork of D3 bar graph

This fork of the D3 bar graph renders a paragraph reading “ello world” into the page on load, using plain DOM manipulation rather than chart drawing. The example loads a bundled script and a separate stylesheet, with `index.js` attaching an `addElement` handler to `document.body.onload` and inserting a text node via `document.createTextNode`. It references Application Studio as its data source in the README, but no bar chart or D3 visualization API appears in the visible code. The rendering approach relies entirely on standard JavaScript DOM methods rather than SVG, Canvas, or D3 scales.

Feb 3, 2022

Loading thumbnail…

Messing around with Sine Wave Circles

Four overlapping sine and cosine waves are rendered as horizontal rows of blue, crimson, turquoise, and orange circles. Each wave uses a separate D3 group and a `d3.timer` to animate the vertical positions of 50 circles per row in real time. The animation is driven by `Math.sin` and `Math.cos` functions with a shared time parameter, creating contrasting phase-shifted motion across the four color-coded sets. Circles are positioned using D3’s data join and `attr` updates, with an SVG canvas sized 960 by 500 pixels.

Nov 30, 2021

Loading thumbnail…

D3 bar graph

This D3 bar graph visualizes monthly sales volumes for Victoria Sponge cakes, with months on the x-axis and volume sold on the y-axis. The chart uses sample data from Application Studio, rendered as FireBrick-colored bars within an SVG canvas. It leverages d3.scaleBand for categorical month positioning, d3.scaleLinear for the numeric axis, and d3.axisLeft and d3.axisBottom to draw the axes with labeled ticks.

Nov 30, 2021

Loading thumbnail…

Frequency of letters used in the English language but vertical bars

A bar chart displays the frequency of each letter in the English alphabet, sorted from most to least common, with the percentage of use on the y-axis and letters on the x-axis. The bars are drawn in vertical strips using D3 v7’s `scaleBand` and `scaleLinear`, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Data is embedded as a JavaScript array of objects, sourced from a StackOverflow discussion, and rendered into an SVG using `d3.select` and `append`. The chart uses a firebrick fill for all rectangles.

Nov 30, 2021

Loading thumbnail…

Vertical bars but d3.v3

A vertical bar chart displays monthly values from a two-column CSV, with dates on the x-axis and values on the y-axis. The visualization uses the older d3.v3 API, loading the library from a CDN into the page. It constructs the chart with an ordinal scale for the date categories, a linear scale for the value range, and SVG axes, then renders steelblue rectangles for the bars. The code employs chained methods like `d3.scale.ordinal()`, `d3.svg.axis()`, and `.rangeRoundBands()` to position and size the bars.

Nov 29, 2021

Loading thumbnail…

OMG Particles SB

A looping animation of expanding, colored circles draws a glowing, shifting line that follows the mouse. The code uses D3.js v3 with a Canvas context set to "lighter" composite mode for additive blending. A timer triggers HSL color cycles and a `transition.tween` updates the arc radius over 10 seconds, while a mouse move event updates the target coordinates, creating a trailing, painterly effect.

Nov 26, 2021

Loading thumbnail…

Frequency of letters used in the English language

This example visualizes the frequency of letters in the English language as a horizontal bar chart. The 26 letters are sorted from most to least frequent, with each bar’s length proportional to its percentage occurrence. The chart is built using D3 v7, with `d3.scaleBand` for the categorical letter axis and `d3.scaleLinear` for the frequency values. Data is hardcoded as an array of objects, sourced from a StackOverflow discussion, and rendered via SVG rectangles with `d3.axisLeft` and `d3.axisBottom` for the axes.

Nov 12, 2021

Loading thumbnail…

Bar chart made with d3.js

This bar chart shows the body lengths of various mouse species found in the UK, using data from AMES pest control. The visualization uses d3.v7’s scaleLinear and scaleBand to map lengths and species names, rendering horizontal bars as SVG rects with axes created by axisLeft and axisBottom. The data is loaded from a CSV file and parsed, with the chart’s layout defined by fixed margins and labels positioned via d3’s selection and text methods.

Nov 12, 2021

Loading thumbnail…

Custom web extension

This example demonstrates a custom web extension that extracts numeric values from specific table cells and injects them into a new visualization table with highlighted yellow data areas. The code uses native DOM APIs such as `document.getElementsByClassName`, `createElement`, and `appendChild` to manipulate the HTML structure. It also parses an XML manifest describing the extension’s parameters using `DOMParser` or the ActiveX `XMLDOM` object, outputting the parameter caption and description via `document.write`. The visualization logic itself remains mostly unimplemented, with initialization and callback functions defined but not executed.

Nov 8, 2021