barryhillier

@barryhillier·10 public vizzes

KPI Widget 01

This KPI widget displays 12 months of performance data as a bar chart, contrasting actual values against targets with confidence intervals rendered as error bars. The visualization uses D3 scales and axes (`scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`) within an SVG container. React 18 manages the root element, while the code directly appends SVG elements via D3 selections. Dummy data hard-coded in the script drives the monthly periods, with target bars showing a fixed goal and error bars spanning upper and lower bounds.

Jun 22, 2023

Loading thumbnail…

Full LS Sol Lewitt Reproduction

This visualization reproduces a Sol LeWitt-inspired drawing through a geometric grid of narrow black and white rectangular stripes, with circular masks creating a layered pattern. Built using D3 v7, the code generates two sets of 100 horizontal and vertical lines using `selectAll` and `range`, then applies SVG masks (`mask-1`, `mask-2`) that combine a large circle and a symbol path generated via `symbol(symbols[0], 125000)()` to selectively reveal or hide the stripes across the viewport. The result is an interactive, fullscreen generative art piece that fills the browser window with a rhythmic, screen-printed aesthetic.

Jan 16, 2023

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates animated data-driven circles that flow in a sine wave pattern across the screen. The visualization updates at 60 frames per second, with each circle's position and radius changing over time based on a mathematical function. The implementation uses the D3.js library's `select`, `selectAll`, and `.data().join()` API to efficiently bind array data to SVG circle elements. The `vizData` function applies `attr` calls for the `r`, `cx`, and `cy` properties, while a separate `makeData` module generates the dynamic dataset with trigonometric calculations.

Jan 9, 2023

Loading thumbnail…

Fork of D3-1: Making a face

This example animates a simple face by repeatedly redrawing a set of circles, whose vertical positions are derived from a sine wave, to create a wavy, shifting expression. The visualization uses the D3 v7 library with a selection-based API (`d3.select`, `d3.range`) to build an SVG scene of circles at fixed horizontal intervals inside a dynamically sized viewport. The animation is driven by a JavaScript `setInterval` timer that updates the circle data every second, a time counter `t` shifting the sine-based y-coordinates, and uses D3’s `.enter()` to append circles that persist across frames.

Jan 9, 2023

Loading thumbnail…

Fork of D3-1: Making a face

This example assembles a basic, stylized face from SVG primitives using D3 version 7. It draws a yellow circle as the head, adds two blue eyes, a smile-shaped arc for the mouth, and two rectangular eyebrows, all positioned relative to the SVG canvas dimensions. The code demonstrates D3’s functional DOM selection via `d3.select` and attribute chaining, and it employs the D3 arc generator to create the path for the smile. The face’s components are placed using explicit pixel coordinates extracted from the SVG element’s width and height attributes.

Jan 9, 2023

Loading thumbnail…

Full- 2 LS Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-style drawing using D3 v7, generating a grid of horizontal and vertical striped rectangles that are obscured by two circular masks. The SVG output is created with `d3.select`, `d3.range`, and `d3.symbol` to render geometric shapes, while the masks—defined via SVG `<mask>` elements—use circles filled with contrasting colors to reveal or hide portions of the grid. The artwork is rendered as an SVG, with the initial view showing only the first mask applied, leaving the second mask definition unused.

Jan 9, 2023

Loading thumbnail…

Fork of L3 JS Sol Lewitt Reproduction. Horizontal

This example presents a generative, geometric composition inspired by Sol LeWitt’s wall drawings. It shows a grid of thin horizontal and vertical bars, with a circular region in the center where the bars are inverted in contrast: horizontal bars become visible inside the circle, while vertical bars are masked out there. The code constructs an SVG scene using the Document API (`createElementNS`), creating 100 horizontal and 100 vertical rectangles. Two SVG masks (`circle-mask` and `circle-mask-2`) define the circular interplay, with the first mask using a white circle on black to reveal the horizontal bars, and the second using a black circle on white to hide the vertical bars.

Jan 9, 2023

Loading thumbnail…

Fork of Fork of L3 JS Sol Lewitt Reproduction Horizontal

A generative art piece draws two sets of overlapping horizontal and vertical stripes through an SVG canvas, with the stripes visible only within circular masks that sit at the center of the viewport. One mask reveals a circle of dark-on-light stripes, while the second mask inverts the effect, creating a contrasting interplay of line orientation and color. The piece uses D3 v7’s `select`, `range`, and data joins to create 100 rectangles in each direction, applying SVG `<mask>` elements to control visibility.

Jan 8, 2023

Loading thumbnail…

L3 JS Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-style wall drawing as a generative SVG composition. It shows a series of 100 vertical stripes, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the browser viewport. The code creates an SVG element from scratch using the standard DOM API, specifically using `document.createElementNS` to build and append each `<rect>` element. The artwork is rendered entirely client-side with no external data or JavaScript libraries, relying solely on vanilla scripting to produce a minimalist, grid-based pattern.

Jan 7, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to draw nested rectangles in an SVG canvas. The code uses raw SVG elements, specifically `<rect>` tags, to create a blue inner rectangle inside a light blue outer rectangle, both with rounded corners. The rectangles are styled using inline `fill` attributes and positioned via `x` and `y` coordinates. The HTML page includes minimal CSS and JavaScript structure, with the SVG markup written directly in the body. The visualization relies on the SVG rendering approach without any additional JavaScript libraries.

Jan 7, 2023