Skip to main content
SimilarExport ZIP
100%

Store constraining: Live

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
85% 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
84% match
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
84% 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
84% 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
80% 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
73% match
Loading thumbnail…

Fork of Circles with D3

This interactive scatter plot visualizes store sales data, dynamically cycling through different attributes (Store Area, Daily Customer Count, Store Sales, and Items Available) on the x-axis every two seconds. Built with D3.js, the visualization uses an SVG scatter plot with circles representing individual stores, where the y-axis displays items available and the x-axis automatically updates to showcase different metrics. The animation highlights the flexibility of D3's data joins and method chaining, allowing the chart to smoothly transition between different data views. The reusable chart pattern keeps the code modular and maintainable.

RRohithNaiduDevareddy@my.unt.edu
71% match
Loading thumbnail…

Fork of Circles with D3

This interactive scatter plot displays store sales data across three different y-axis metrics, cycling through Store_Sales, Daily_Customer_Count, and Items_Available every two seconds. Built with D3.js v7, the visualization uses d3.csv, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the SVG plot. The reusable scatterPlot function updates the y-axis and data binding asynchronously, demonstrating a data-driven approach where the top ten store area values are displayed with circles of radius 5.

RRohithNaiduDevareddy@my.unt.edu
70% match