Mirza

@mirzajb·2 public vizzes

World Countries Tree

This visualization displays a hierarchical network layout by reading a JSON file under the name "virtual network," which branches into subnets, network security groups, virtual machines, and IP addresses. Rendered as an SVG, the tree uses rectangular nodes for each resource and light-blue circles at connection points, with links drawn as curved paths. The code applies D3’s tree layout with customizable node size and separation, using `d3.hierarchy` to structure the data, `d3.linkVertical` to generate link paths, and a zoom behavior (d3.zoom) for interactive panning. The text styling relies on the Playfair Display font with a shadow effect for readability.

Jul 30, 2019

Loading thumbnail…

World Countries Tree

This example visualizes a hierarchical network of virtual components, from a root "Virtual Network" down through subnets, network security groups, and virtual machines to network interfaces and IP addresses. Using D3 v5, it renders a vertical tree layout with `d3.tree()` and `d3.hierarchy()`, drawing nodes as pink rectangles and light blue circles on an SVG canvas. The code employs `d3.linkVertical()` for edge paths and `d3.zoom()` for pan and zoom interactions. Data comes from a local `data.json` file, loaded asynchronously via `d3.json()`.

Jul 30, 2019