Moving Bubble Tutorial

100%

Moving Bubble Tutorial

✓ Published0🌍 Public

Last edited May 4, 2018

Created on May 4, 2018

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.

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

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

92% 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…

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

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

69% match

Loading thumbnail…

VP First Visual With Water Droplets

This animated scatter plot visualizes New York City water consumption and population data from the City of New York dataset, with each data point rendered as a water droplet shape using SVG path commands. The droplets drop into place sequentially via `transition().delay()`, scaling from zero to full size. A linear gradient fills each droplet with a water-like blue, while a background pattern displays a rain cloud image. Hovering a droplet reveals its year, consumption, population, and per-capita values through an HTML tooltip. The visualization uses D3 scales, axes, and custom SVG patterns to convey the relationship between consumption and population over time.

VVansh Patel

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

68% match