Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Store constraining + labels + zoom

Public visualization

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

Comments

Sign in to join the discussion.

MIT Licensed