D3 Unconf Badge

100%

D3 Unconf Badge

✓ Published0🌍 Public

Last edited Aug 28, 2017

Created on Aug 27, 2017

A black canvas displays an animated cluster of concentric, rotating square outlines that continuously enlarge and shift. The visualization updates every four seconds, generating a new set of 60 layered rectangles that scale and rotate around the center, creating a pulsing, geometric badge effect. Built with D3 v4, the code uses `d3.transition` for smooth 4-second animations, `d3.interval` to trigger periodic updates, and SVG `rect` elements with CSS transforms for rotation. Each frame recalculates rectangle positions via scaling and rotation math, producing an evolving spiral-like pattern on a stark black background.

AI-generated description

Similar vizzes

Loading thumbnail…

D3.Unconf 2016 Badge

A flower-shaped badge encodes movie metadata from a JSON dataset, with each flower's petal count, size, and colors mapping to IMDb votes, ratings, and genres. The visualization uses D3 v4 to generate SVG paths for petals and applies a multiply blend mode for overlapping color effects, while D3 scales and Lodash handle data binning and aggregation. A motion blur filter on the SVG defs adds a subtle animated quality to the static rendering.

LLucyI

77% match

Loading thumbnail…

Test D3 Badge Placement

This example demonstrates the mechanics of placing D3 badges using force simulation. It renders a static 1500x1500 pixel pink background, then uses d3.forceSimulation to position badge elements based on simulated physics. The code defines and runs the simulation, though it does not show a complete chart or dataset. The rendering relies on HTML divs for the background, and the badge placement is handled entirely through the simulation’s tick updates, with no external data sources or canvas/geographic APIs involved.

KKevinGutowski

75% match

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10

73% match

Loading thumbnail…

2. D3

A large SVG displays horizontal and vertical stripes created from 100 rectangles each, layered with two circular masks. The overlapping masked striping produces a radial, sunburst-like pattern centered on the canvas. Built with D3.js, the code uses `range`, `selectAll`, and `join` to generate the bars, while `symbol` and `symbols` define the circular mask paths. The viewport is sized dynamically to the browser window.

SSubhamChhetri

71% match

Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle

71% match

Loading thumbnail…

Spiral Circle

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

Mmbostock

70% match

Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Jjesramyep1263

70% match

Loading thumbnail…

Untitled

A 3D bar chart built with D3 v4 and the d3-3d plugin renders a grid of colored cubes whose heights represent negative random values. An update button triggers a 1-second transition that re-randomizes the cube heights, while text labels animate to show the changing magnitude. Users can drag the SVG to rotate the entire scene, adjusting the rotation angles via d3.drag and redrawing all cube faces and labels through the plugin’s projection and sorting methods.

PPriyaEnuganti

70% match