This tree diagram uses D3.js v4 to visualize hierarchical data with nodes represented by geometric symbols instead of traditional circles or text markers. The example loads a static JSON dataset and applies D3’s `d3.tree()` layout, with `d3.hierarchy` structuring the parent-child relationships. Link paths between nodes are styled with strokes based on each node's nested `level` property, while each node’s symbol shape and fill are determined by `d3.symbol()`—using `symbolCross` for values above nine and `symbolDiamond` below—and sized by the node's `value` attribute. The SVG rendering includes internal and leaf nodes with text labels positioned relative to each symbol.