Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Store constraining + labels + zoom

Public visualization

Viewing a saved revision (read-only)

b860e8cbef6542abad74d2e58b7f9a8f

Store constraining + labels + zoom

0 stars2🌍 Public
CCalvin Gomez
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