18ketr

@18ketr·3 public vizzes

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.

May 4, 2018

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.

May 4, 2018

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.

May 4, 2018