Phoenix LiveView function components for hierarchies (spec/10 §3): a node-link tree, a treemap and a sunburst.

Each is a preset design of Visualize.Chart.Presets plus an assign mapping (spec/14 §15.4, D-64, D-70): the nested data — a map whose children are under :children or "children" — is flattened to one row per node, the design's transforms (:tree, :treemap or :partition, then the :filter steps that keep what spec/10 §3 draws) lay the rows out, the marks draw them through Visualize.Chart.Frame.generate/2, and the component prints the elements in the markup spec/10 §3 declares, reading the rows beside them for what follows the node — the tree's circle-and-text group. The treemap's and the sunburst's labels are their marks', fitted and inked by the layer. Node labels default to the :name or "name" of a node's data; leaf values to its :value or "value".

Usage

use Phoenix.Component
import Visualize.Components.Tree

<.tree_diagram data={@hierarchy} width={800} height={600} />

Conventions

• A root-only hierarchy is the empty case: the tree draws its one node, the treemap one cell, the sunburst nothing but the <svg> (the root is never an arc).
• colors is a scheme atom of Visualize.Scale.Color.schemes/0 or an explicit colour list, taken by index and cycled, as in Visualize.Components; an unknown scheme or an empty list raises ArgumentError.
• animate={true} puts style="transition: all 0.3s ease-in-out;" on every mark; class lands on the <svg>; coordinates print with at most four decimals.
• The defaults below are Visualize.Chart.Presets.defaults/1.