SleepyHarry

@SleepyHarry·10 public vizzes

Gist bdbc9e7fea0925a8a7abac0066804aef

A React component builds an interactive curriculum vitae where a force-directed graph represents professional experience and skills. Using d3.forceSimulation, the layout positions connected nodes for each role, skill, and technology, with links showing relationships between them. The visualization reads from embedded CV data, allowing users to explore career history and technical expertise through an animated, zoomable network.

Apr 23, 2017

Loading thumbnail…

Lissajous

This example animates Lissajous curves, parametric figures formed by sine waves on perpendicular axes, with interactive text inputs for amplitude, frequency, and phase values. The curve continuously evolves as the phase offset (δ) increments automatically, while the other parameters remain adjustable by the user. The SVG path is redrawn on each frame using a d3.timer, computing points with a custom lissajous function and d3.range over a fixed precision interval. The code relies on d3.v4 selection and attribute methods, with a centered group transform positioning the rendering.

Feb 14, 2017

Loading thumbnail…

Dandelion WIP

This example shows a dandelion-like structure of 1,000 nodes connected to a fixed central point, with the entire network continuously drifting under a simulated wind force. The visualization runs forever using `d3.forceSimulation` with a zero alpha decay, while a custom `windForce` function randomly changes the wind vector and applies it to each node's velocity. Links are drawn as lines with a fixed distance set by a random radius generator, and a blue "windicator" line visually tracks the current wind direction and magnitude. The code uses D3 v4 and renders all elements as SVG.

Feb 14, 2017

Loading thumbnail…

along path

Two blue circles follow a looping cubic Bézier path across a wide SVG canvas, moving in a continuous cycle. The example demonstrates a custom `attrTween` via D3 v4’s `transition.attrTween`, which interpolates each circle’s `transform` attribute based on the path’s geometry. It uses `path.getTotalLength()` and `path.getPointAtLength()` to sample positions along the path over a 10-second duration. The circles start at different offsets (0 and 0.1) to create a staggered motion, repeating indefinitely via the transition’s `end` event.

Jan 15, 2017

Loading thumbnail…

along path

A steel-blue dot loops indefinitely along a black cubic Bézier curve drawn through seven fixed points on an SVG canvas. The path is hardcoded in the markup, while the points themselves are rendered as small circles. Using D3 v4, the animation repeatedly calls `transition.attrTween` with the `translateAlong` function, which relies on `path.getTotalLength()` and `path.getPointAtLength()` to compute the dot's position each frame, restarting the transition via `each("end", transition)`.

Jan 15, 2017

Loading thumbnail…

SiLK

SiLK renders a continuously evolving, circular line drawing on a black canvas. A white curved path stretches from the center to a randomly selected point on the circumference, with each new segment appearing every 50 milliseconds. The drawing fades gradually as semi-transparent black rectangles overlay the previous frame, creating a persistent yet decaying trace. The visualization uses D3 v4 for canvas selection and color utilities, while all drawing happens directly through the Canvas `getContext('2d')` API, employing `quadraticCurveTo` for the curved strokes and `fillRect` for the fade effect.

Dec 27, 2016

Loading thumbnail…

SiLK

On a black canvas, SiLK continuously draws animated white lightning-like bolts from left to right. Each bolt is a jagged polyline whose vertical position shifts randomly as it advances, creating the effect of a crackling electric current. The visualization uses D3 v4’s `d3.randomNormal` to generate the jitter and the Canvas 2D API for drawing and fading. A semi-transparent black fill rectangle is painted each frame, causing older strokes to gradually fade while new bolts appear, producing a persistent, dynamic trail.

Dec 27, 2016

Loading thumbnail…

SiLK

SiLK generates an endless sequence of glowing white lightning bolts that streak horizontally across a black canvas, each bolt departing from the vertical center and ending at a random height. The animation runs on a 50-millisecond timer, repeatedly drawing a new bolt while fading the previous frame with a translucent black fill using Canvas `fillRect`. The code builds each bolt as a jagged polyline by stepping across the width, adding random vertical offsets, and then correcting the endpoint drift, all rendered with the Canvas 2D `stroke` API within a D3 v4 setup.

Dec 27, 2016

Loading thumbnail…

SiLK

SiLK is a generative animation that continuously draws a single white line from the center of a black canvas to a point moving along a circle’s circumference. The line’s endpoint advances incrementally, creating an evolving, spirograph-like pattern that gradually fills the frame with faint afterimages, as each frame paints a low-opacity black rectangle over the previous content. Built with D3.js v4 and the Canvas API, the code uses `d3.select` to access the canvas context, `d3.range` to precompute angles, and a `setInterval` loop to drive the animation, with the skip value incrementing by a fractional amount each step to alter the path’s complexity. The rendering relies on `context.fillRect` for fading and `context.stroke` for line drawing, producing a hypnotic, ever-changing visual from a minimal algorithmic rule.

Dec 27, 2016

Loading thumbnail…

SiLK

A looping animation draws a thin white polyline across a black canvas, with each segment originating from the previous point and ending at a new point along a circular radius. The line gradually shifts its endpoint between two angular positions, creating a slowly evolving geometric pattern. The code uses a Canvas 2D context with a semi-transparent black fill rect for fading trails, and `setInterval` drives the animation while `d3.range` and `Math.cos`/`Math.sin` compute the circumference points.

Dec 27, 2016