Skip to main content
100%

Store constraining + click to center

✓ Published1🌍 Public
CCalvin Gomez
Last edited May 19, 2020
Created on May 19, 2020

This visualization displays a hierarchical tree of store data using a bubble chart layout, where each circle represents a store or category. The color of each circle indicates whether a store is customer capacity constrained, with blue for constrained and gray for unconstrained. Users can click any circle to smoothly animate the view, centering that node in the display, and click again to reset. The code uses d3.pack for layout, d3.scaleOrdinal for coloring, and d3.event with an SVG `<g>` element's transform transition to handle the panning animation. The data is loaded from a JSON file showing store hierarchy and capacity flags.

AI-generated description
MIT Licensed

Similar vizzes