Tell us what works and what could be better. We read every submission.
@aktraiser·10 public vizzes
This animated scatterplot charts global life expectancy against fertility rates from 1950 to 2015, with each country represented as a circle whose size encodes population and whose color indicates continent. The visualization, built with D3 v4 and rendered as SVG, plays through time with a sliding year indicator, allowing viewers to observe how the relationship between these two demographic indicators evolves across the world. Data is drawn from a CSV containing country, year, life expectancy, total fertility, population, and continent for each annual observation.
D3.v4 force simulation animates hundreds of small blue circles that scatter randomly, then coalesce to form the word "Dasein". A larger invisible circle follows the mouse, disrupting the assembled text as it moves across the screen. The text shape is generated by rasterizing the word onto a hidden Canvas, sampling pixel positions with `getImageData`, and applying those coordinates as force targets via `d3.forceX` and `d3.forceY`. A gooey SVG filter blends overlapping circles into a fluid, cohesive mass.
This animated visualization uses Pixi.js to render thousands of small blue dots as sprites, which transition between two distinct configurations. Initially, the dots assemble to form the outline of an eye, loaded from an SVG path. The animation then shifts the points to spell the word "viSFest" using a rasterized text target. A D3 force simulation with collision detection and velocity decay drives the smooth transition between states, with dots spawning at random positions when activated and disappearing when not needed. The dot radius and spacing are responsive to the window width, and the eye outline is proportionally scaled using the golden ratio.
This animated visualization morphs between an eye outline and the text “viSFest” using a particle system. It rasterizes text and an SVG eye into coordinate maps, then uses D3's force simulation with collision detection to move colored dots toward the target positions. The scene is rendered with Pixi.js, alternating between the eye shape and the title in a continuous loop.
Dots form the outline of an eye, then transition to spell the word “viSFest.” The animation cycles between these two shapes. The visualization uses D3.js to manage a force simulation with x, y, and collision forces that move individual sprites toward target coordinates derived from rasterized text and an SVG path. Pixi.js renders the animated particles, which are drawn from a pre-rendered circle texture.
Dots form the outline of an eye, then transition into the letters spelling "viSFest," using a Pixi.js canvas with animated sprites. The visualization uses d3.forceSimulation with forceX and forceY targeting coordinates extracted from an SVG path, plus forceCollide for spacing. A PIXI.RenderTexture snapshots a circle graphic for efficient rendering, and each frame updates sprite positions from the simulation. The code rasterizes text and an SVG eye outline into coordinate sets, cycling between these shapes as animation states.
The visualization renders the word "Dasein" as a swarm of blue circles that assemble into text while being disrupted by a mouse-driven wrecking ball. It uses d3.forceSimulation with forceX, forceY, and forceCollide to move particles between random start positions and a rasterized target layout, computed via Canvas getImageData. A gooey SVG filter merges overlapping circles, and the mouse node continuously updates forces to slosh the particles apart and back together.
A remix of the "Reasons to" logo, this visualization fills the shape of the letter R with a grid of hexagonal cells. The hexagons are colored with a linear scale that transitions through a sequence of warm and cool hues, creating a gradient across the composition. Snap.svg is used to test which hexagon centers fall inside the R-shaped path, and only those cells are rendered. The design includes two rotated text labels—"Le monde change"—integrated into the composition. The animation is subtle, with the hexagons appearing in a staggered sequence to build the final mosaic.
This animated visualization rearranges a grid of small hexagons into the shape of the “Reasons to R” logo, using color to create a gradient across the cells. Built with D3 v4 and Snap.svg, it computes hexagonal positions on an SVG canvas and uses Snap’s point-in-path detection to identify which hexagons fall within the custom R-shaped path. Those hexagons are then grouped and animated, scaling from their centers to fill the logo. The piece is a remix by Nadieh Bremer of the classic Reasons to logo, with color mapped linearly across eight hues and the title “Le Monde change! Nous vous aidons à changer avec lui” displayed above the hexagon grid.
This example shows a static SVG canvas displaying the message “Edit the code below to change me!” in large monospace text, centered horizontally and vertically. The visualization serves as a minimal starter template for D3 projects, with the text positioned using explicit `x` and `y` attributes. Built with D3 v4, the code selects the body element, appends an SVG of fixed dimensions, and adds a single text node. It demonstrates basic SVG creation and text styling through D3’s selection and attribute methods, offering a blank foundation for further customization.