Skip to main content
SimilarExport ZIP
100%

Store constraining + click to zoom

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

A d3.pack layout renders a hierarchical dataset of store regions as nested circles, with color encoding indicating whether each node is customer-capacity-constrained. Clicking a circle triggers a d3.zoom-like transition that scales and translates the view to center that node, with a second click restoring the original zoom level. The data is loaded from JSON, and the tree is flattened via `root.descendants()`. SVG circles and text labels are animated using `transition.attr` on the group element, with stroke width adjusted inversely to the zoom factor.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Store constraining + labels + zoom

This example visualizes a hierarchical store hierarchy using a circular packing layout, where each node's size represents its position in the tree and color indicates whether a store is customer capacity constrained (gray) or not (blue). Text labels are displayed at each node with font sizes scaling by depth, and the entire visualization supports interactive zooming via d3.zoom. The code loads store data from a JSON file and uses d3.pack, d3.hierarchy, and d3.scaleOrdinal to map data properties to visual encodings, rendering circles and labels as SVG elements.

CCalvin Gomez
89% match
Loading thumbnail…

Store constraining + zoomable pack circle

This zoomable circle packing visualization displays hierarchical data from altData.json using nested circles sized by leaf node values. The chart starts centered on the root node and animates through zoom transitions when clicking child circles, revealing deeper levels of the hierarchy. Built with D3 v5, the code uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to calculate layouts and smooth zooming, while transitions update circle radii and label visibility. The SVG rendering uses a color scale to distinguish depths, with click handlers enabling interactive navigation through the tree structure.

CCalvin Gomez
87% match
Loading thumbnail…

Store constraining + click to center

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.

CCalvin Gomez
87% match
Loading thumbnail…

Store constraining

A circle-packing visualization displays the hierarchical structure of store regions, with each circle representing a node in the tree. Blue circles indicate stores without customer capacity constraints, while gray circles mark those that are constrained, as determined by the `isCustomerCapacityConstrained` property in the loaded JSON data. The visualization uses D3 v5's `pack` layout to compute circle positions and radii, with `d3.hierarchy` and `d3.json` loading and structuring the hierarchical data. Circles are rendered as SVG elements with colors applied via a custom function based on the data property.

CCalvin Gomez
80% match
Loading thumbnail…

Store constraining + labels

The visualization shows a hierarchical treemap of store regions and their sub-locations, colored by whether each node is customer-capacity-constrained. Blue circles represent unconstrained nodes, while gray circles indicate constrained ones. Labels display the name of each store, with circles sized according to their position within the packed hierarchy. It uses d3.hierarchy, d3.pack, and SVG circles and text elements to render the data, sourced from a static JSON file.

CCalvin Gomez
80% match
Loading thumbnail…

Store constraining: Live

This gallery example shows a store-constraining tool where a circle-packing layout visualizes store brand hierarchies, with circles colored by capacity-constrained status. Using d3.pack and d3.hierarchy, the code renders an SVG that also feeds a Bootstrap DataTable listing store names and constrain/unconstrain buttons. Clicking a button generates ION configuration records via the d3.json-loaded data, inverting the customer capacity flag for all related physical store instances while logging the merged output to the console.

CCalvin Gomez
80% match
Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays a hierarchical dataset as nested circles, where each circle represents a node and its size corresponds to the node's value. Clicking any circle animates a zoom to that node, revealing its children and hiding unrelated elements. The implementation uses d3.layout.pack for the circle layout and d3.interpolateZoom for smooth zoom transitions. The data comes from the flare.json file, which contains a tree structure with named categories and numeric sizes. The visualization renders with SVG circles and labels, with a color scale applied by tree depth.

AAndresAnayaIsaza
77% match
Loading thumbnail…

MB zoom circles in and out

Three circles, colored green, purple, and red, sit on a white canvas as the core subjects of this zooming example. The visualization demonstrates click-to-zoom interactions using d3.zoom, where clicking a circle triggers a smooth transition that scales and translates the view to center on that circle. The code uses d3.v4 with SVG rendering, and the zoom behavior is applied to the entire SVG container while individual circles respond to click events. A background rectangle handles resetting the view when clicked, and the active circle is tracked to toggle between zoomed and reset states. The data consists of a simple JSON array of circle positions, radii, and colors, rendered as SVG circle elements.

IIgathi
75% match