Store constraining + labels + zoom

100%

Store constraining + labels + zoom

✓ Published2🌍 Public

Last edited Jun 2, 2020

Created on May 19, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Store constraining + click to zoom

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.

CCalvin Gomez

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

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

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

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

84% match

Loading thumbnail…

Circle-Packing

This example visualizes a hierarchical dataset as a circle-packing layout, where each leaf node is a circle sized by its value and nested groups are represented by larger containing circles. It shows the structure of a module tree from a CSV file, with color indicating depth and text labels clipped to leaf circles. The code uses `d3.stratify` to build the hierarchy from flat data, `d3.pack` for layout, and `d3.scaleSequential` with the `interpolateMagma` color scheme. Hovering highlights a node and all its ancestors via `d3.selectAll` with the `node--hover` class, rendered as SVG elements in a `<g>` container.

HHugoberry

75% match

Loading thumbnail…

Circle Packing

This visualization displays a hierarchical dataset as nested circles, using area to represent the number of descendants in each node. Color distinguishes between constrained and unconstrained nodes, with constrained items shown in gray and unconstrained ones in blue. The layout is computed using D3’s `pack` algorithm, which positions circles within a viewport sized to the browser window. Data is loaded from `data.json` via D3’s `json` function, then processed with `hierarchy` and rendered as SVG `<circle>` elements, with white strokes providing visual separation between adjacent circles.

CCalvin Gomez

75% match