Moving Bubble Tutorial

100%

Moving Bubble Tutorial

✓ Published0🌍 Public

Last edited May 4, 2018

Created on May 4, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Moving Bubble Tutorial

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.

118ketr

93% match

Loading thumbnail…

Untitled

This interactive map of New York City boroughs uses a Mercator projection to display a choropleth where each region’s fill color reflects the length of its name. Hovering over a borough triggers a playful “text art” effect that cycles through random Google Fonts, while clicking zooms into the selected region. Built with D3 v3 and React, the visualization leverages `d3.geo.path` for map rendering, `d3.scale.linear` for color encoding, and animated SVG transitions for the zoom effect.

YYuren Dong

72% match

Loading thumbnail…

D3 JS BUBLES

This visualization displays a set of fifteen animated bubbles moving vertically in a sinusoidal wave pattern, with their radii oscillating as they travel across the screen. The circles are rendered as SVG elements using D3 v7, with the data generated procedurally through a sine function that updates each frame. A `setInterval` timer drives the animation at approximately 60 frames per second, recalculating each bubble's `cx`, `cy`, and `r` attributes continuously. The example demonstrates basic D3 data joins and transitions without interaction.

TTehran Mammadov

71% 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

70% match

Loading thumbnail…

Fork of Bubble Chart Visualization

This fork of a bubble chart visualization displays the relative number of boba shops across eleven California cities using an interactive force-directed layout. Circles are initially clustered at the center, then repelled and spaced by d3.forceSimulation, d3.forceManyBody, and d3.forceCollide until stable. Users can drag any circle with d3.drag, while a custom tooltip reveals city names and counts on hover. The visualization loads data from a CSV file via d3.csv, scales circle radii with d3.scaleLinear, applies an ordinal color scheme, and renders everything as SVG elements.

Wwaterm80

69% match

Loading thumbnail…

Timed Moving Bubbles

Timed Moving Bubbles visualizes the progression of 96 individuals through relationship stages—met, romantic, lived together, and married—using animated circles. Each bubble represents a person, colored and clustered by current stage, with counts displayed above. A recurring timer decrements each person’s stage duration, moving bubbles between groups when time expires, using `d3.forceSimulation` with custom cluster and collision forces. SVG circles transition radii via `transition.attrTween`, while stage data loads from a TSV file, rendering the timeline in a React-driven HTML page.

Mmoonknight21

69% match

Loading thumbnail…

D3: NYC Crime Visualization

This interactive NYC crime visualization presents multiple coordinated views: a choropleth map of precincts, a pie chart of crime types, and bar charts showing age and race distributions. Users can click precincts or crime categories to filter across all views, with a reset button to restore the full dataset. The visualization uses D3 v6 with d3.geoMercator and d3.geoPath for the map projection, d3.arc for the pie chart, and d3.scaleBand for bar charts. Crime data is color-coded via a linear gradient legend and tooltip interactions.

Ooliverliuoo

69% match