Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Family tree ICE 8

Public visualization

Family tree ICE 8

0 stars2🌍 Public
Hhossaphul
Last edited Apr 11, 2023
Created on Apr 10, 2023

This example displays a hierarchical family tree of an employee’s contacts, departments, and locations using a node-link diagram. The visualization uses D3.js (v5) with the `tree` and `hierarchy` APIs to compute the layout, while custom SVG `path` elements draw curved links between nodes. Each node’s radius reflects its `value`, and stroke and fill colors correspond to the `type` and `level` fields from the embedded JSON data. The chart is rendered in an SVG canvas with `d3.select` and `d3.append`, and node labels are positioned dynamically based on depth.

AI-generated description

Resources for Visualizing tree and Networks:

1. Resources.

2. Example code of d3.tree

3. Another Example

Comments

Sign in to join the discussion.

MIT Licensed