fresh block

100%

✓ Published0🌍 Public

Last edited Oct 27, 2017

Created on Oct 27, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

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.

Aaktraiser

93% match

Loading thumbnail…

fresh block

A small force-directed simulation places three colored circles, representing nodes, in a 500-by-500 SVG canvas. The code uses `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to animate node positions, while a `tick` handler updates the circles' `cx` and `cy` attributes. The simulation restarts at timed intervals, first removing a node from the data array, then re-adding it, and finally pushing a new node, demonstrating how the layout adjusts to dynamic data changes.

EEE2dev

80% match

Loading thumbnail…

fresh block

A clustered force-directed layout shows 200 colored circles grouped into 10 distinct clusters, with circle size varying randomly. The visualization uses d3.v4’s `d3.layout.force` for simulation and `d3.geom.quadtree` for collision detection, while custom cluster and collide functions enforce intra-cluster padding and inter-cluster separation. Rendering is SVG, with color assigned via `d3.scale.category10` and circles positioned on each tick. The data is procedurally generated in the browser using random radius and cluster assignments.

Aangelferroey

79% match

Loading thumbnail…

Particles

Hundreds of small, colored rectangles converge into the word “FRISS” before scattering apart. They then reform and slosh around as the mouse moves, creating a gooey, viscous effect. The code rasterizes text by drawing it to a Canvas and using `getImageData` to identify pixel locations as target points. A `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` animates the elements, while an SVG filter applies the gooey blur and color matrix.

FFrissAnalytics

78% match

Loading thumbnail…

fresh block

This example visualizes a network of interconnected nodes, likely representing user connections or data relationships, using a force-directed layout. The visualization employs D3’s `d3.forceSimulation` to compute the physics of node positions and link forces, while `d3.select` and SVG elements handle rendering. The scene is drawn against a dark background, with nodes as circles and links as lines, suggesting a real-time or interactive graph. The code also integrates a canvas-based `getImageData` operation, possibly for pixel-level effects or hit detection, though the primary display relies on SVG. Data appears to originate from a static gist, emphasizing structure over live data feeds.

BBolitto

78% match

Loading thumbnail…

fresh block

A simple D3.js v4 visualization displays a greeting and three colored circles on an SVG canvas. The text "Hey O-Team!" appears in a large, centered font, while purple, yellow, and aqua circles are positioned at fixed coordinates. The code uses direct SVG append operations via D3 selections, setting attributes for positioning and styling, with no data binding or interactive behavior. The static composition serves as a basic demonstration of SVG element creation with D3, sourced from a Blockbuilder-generated file.

BBrieLewis

76% match

Loading thumbnail…

fresh block

This visualization shows a collision-based organic layout of 500 colored blobs, each with a size proportional to population data from a French election GeoJSON file. The blobs start as a random scatter and evolve into a stable, tension-balanced formation. The code uses D3 v4’s `d3.forceSimulation` with custom forces, including a quadtree-based collide function that checks for overlapping polygon shapes defined by each blob’s “feelers.” Colors come from a `d3.cubehelix` scale, and the rendering is done in SVG with a dark background, highlighting the animated movement toward equilibrium.

AAlainRo

76% match

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

KKerchoo

75% match