Skip to main content
SimilarExport ZIP
100%

Moving Bubble Tutorial

✓ Published0🌍 Public
118ketr
Last edited May 4, 2018
Created on May 4, 2018

This example shows animated colored circles moving between clusters on a map of New York City, using a force-directed layout to simulate the transition of data points from borough-based positions to agency-based positions. The visualization reads from a CSV file containing agency and borough data, rendering each record as a small node with a fill color mapped to its borough or agency category. It uses the D3.js library, specifically `d3.layout.force`, to animate node positions over time, with an SVG image as the geographic backdrop and text counters displaying elapsed time.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Moving Bubble Tutorial

Small colored circles cluster over a map of New York City’s five boroughs, then animate across the screen to regroup by city agency (NYPD, HPD, DOT, DEP). The visualization uses D3.js version 3.5.5 with its force layout to drive continuous motion, reading agency and borough data from a CSV file. Circles start at borough foci and travel to agency-specific focal points, while a timer displays elapsed seconds.

118ketr
93% match
Loading thumbnail…

Moving Bubble Tutorial

The visualization shows circles representing New York City service requests, grouped by borough overlaid on a map image, then animating to cluster by agency (NYPD, HPD, DOT, DEP). The code uses a D3 force layout with multiple foci to achieve the moving bubble effect. Data from the CSV file populates the nodes, and rendering is done via SVG animation, with different colors assigned to each borough and agency.

118ketr
92% match
Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Mmbostock
77% match
Loading thumbnail…

Untitled

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

SSitanshu Rupani
74% match
Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani
74% match
Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr
74% match
Loading thumbnail…

Arbitrary Visualization

Clicking on the canvas generates a cluster of blue-tinted, gradient-filled SVG shapes that grow, fade, and dissolve over time. Each click creates a new group of nodes connected by closed basis curves, which are then simulated through a force-directed layout using `d3.forceSimulation` with charge, collision, and Y-position forces. The nodes and links are drawn as SVG `path` elements, with a radial gradient fill and animated opacity transitions that remove each shape after a 60-second delay. The code uses d3 v4 and a custom `d3.line` with `curveBasisClosed` to define the bubble edges.

MMTClass
73% match
Loading thumbnail…

Untitled

A cluster of 100 circles, each colored by one of four categories, moves under a force-directed layout in an animated SVG scene. D3's `d3.layout.force` continuously updates node positions, while a custom tick function applies directional offsets based on node index to separate groups into distinct clusters. Clicking or dragging any circle adds random jitter, causing the clusters to scatter and then re-form. The visualization uses D3 v3 with React, fading the entire SVG in over one second on load.

CCO18323
72% match