# erikgartner/dtree architecture

> Architecture diagram of the GitHub repository erikgartner/dtree, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/erikgartner/dtree
- Repository: https://github.com/erikgartner/dtree

## Overview

dTree is a browser-side D3 library for visualizing hierarchical data with multiple parents, including marriages. A consumer supplies data and options to `dTree.init`; preprocessing converts people and marriages into a D3 hierarchy, then the builder measures nodes, lays out the graph, and renders SVG. The returned controls zoom and pan the view, while rendering dispatches configurable callbacks. The map reflects the two sampled runtime modules and README-documented D3/lodash dependencies; the external viewer is a separate product and is not part of this library’s runtime.

Main entry points: [`src/dtree.js`](https://github.com/erikgartner/dtree/blob/master/src/dtree.js) (dTree API), [`src/builder.js`](https://github.com/erikgartner/dtree/blob/master/src/builder.js) (Tree builder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["API and preparation"]
  node_init["dTree API<br/>[dtree.js]"]
  node_prepare["Data preprocessing<br/>[dtree.js]"]
end

subgraph group_render["Layout and rendering"]
  node_builder["Tree builder<br/>[builder.js]"]
end

node_consumer(("Library consumer"))
node_d3["D3 runtime"]
node_lodash["Lodash runtime"]

node_consumer -->|"supplies data"| node_init
node_init -->|"preprocesses data"| node_prepare
node_init -->|"creates and renders"| node_builder
node_builder -->|"lays out and draws"| node_d3
node_init -->|"controls zoom"| node_d3
node_builder -->|"uses helpers"| node_lodash
node_init -->|"returns zoom controls"| node_consumer

click node_init "https://github.com/erikgartner/dtree/blob/master/src/dtree.js"
click node_prepare "https://github.com/erikgartner/dtree/blob/master/src/dtree.js"
click node_builder "https://github.com/erikgartner/dtree/blob/master/src/builder.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_init,node_prepare toneBlue
class node_builder toneAmber
class node_consumer,node_d3,node_lodash toneIndigo
```

## Components

### API and preparation

- [dTree API](https://github.com/erikgartner/dtree/blob/master/src/dtree.js): `src/dtree.js`
- [Data preprocessing](https://github.com/erikgartner/dtree/blob/master/src/dtree.js): `src/dtree.js`

### Layout and rendering

- [Tree builder](https://github.com/erikgartner/dtree/blob/master/src/builder.js): `src/builder.js`

### Other components

- **Library consumer**
- **D3 runtime**
- **Lodash runtime**

## Connections

- Library consumer → dTree API: supplies data (evidence: `README.md`)
- dTree API → Data preprocessing: preprocesses data (evidence: `src/dtree.js`)
- dTree API → Tree builder: creates and renders (evidence: `src/dtree.js`)
- Tree builder → D3 runtime: lays out and draws (evidence: `src/builder.js`)
- dTree API → D3 runtime: controls zoom (evidence: `src/dtree.js`)
- Tree builder → Lodash runtime: uses helpers (evidence: `src/builder.js`)
- dTree API → Library consumer: returns zoom controls (evidence: `src/dtree.js`)