DataGlass Project Structure - Dendrogram (Tree Diagram)

This dendrogram (tree diagram) shows the project structure as a classic node-link tree:

• Root node: DataGlass at the left
• Branches: Connect parent packages/modules to their children
• Leaf nodes: Individual classes at the right

Node size represents complexity. The tree layout makes parent-child relationships explicit through connecting lines.

View Source

type: dendrogram
engine: d3
width: 1200
height: 1000
title: "DataGlass Project Structure - Dendrogram View"
orientation: horizontal

data:
  source: |
    [
      {"name": "DataGlass", "parent": "", "value": 0},

      {"name": "chart-renderer", "parent": "DataGlass", "value": 0},
      {"name": "dataglass-plugin", "parent": "DataGlass", "value": 0},
      {"name": "test-harness", "parent": "DataGlass", "value": 0},

      {"name": "Charts", "parent": "chart-renderer", "value": 0},
      {"name": "DataSources", "parent": "chart-renderer", "value": 0},
      {"name": "Validation", "parent": "chart-renderer", "value": 0},
      {"name": "Utils", "parent": "chart-renderer", "value": 0},

      {"name": "Hierarchies", "parent": "Charts", "value": 0},
      {"name": "TreemapChart", "parent": "Hierarchies", "value": 450},
      {"name": "SunburstChart", "parent": "Hierarchies", "value": 420},
      {"name": "CirclePackingChart", "parent": "Hierarchies", "value": 380},
      {"name": "DendrogramChart", "parent": "Hierarchies", "value": 360},
      {"name": "IcicleChart", "parent": "Hierarchies", "value": 340},
      {"name": "TidyTreeChart", "parent": "Hierarchies", "value": 320},

      {"name": "Networks", "parent": "Charts", "value": 0},
      {"name": "ForceDirectedChart", "parent": "Networks", "value": 540},
      {"name": "SankeyDiagram", "parent": "Networks", "value": 480},
      {"name": "ArcDiagramChart", "parent": "Networks", "value": 420},
      {"name": "ChordDiagram", "parent": "Networks", "value": 390},
      {"name": "EdgeBundlingChart", "parent": "Networks", "value": 360},
      {"name": "ParallelSetsChart", "parent": "Networks", "value": 330},

      {"name": "Analysis", "parent": "Charts", "value": 0},
      {"name": "HeatmapChart", "parent": "Analysis", "value": 480},
      {"name": "BoxplotChart", "parent": "Analysis", "value": 420},
      {"name": "HistogramChart", "parent": "Analysis", "value": 390},
      {"name": "ViolinChart", "parent": "Analysis", "value": 360},
      {"name": "RidgelineChart", "parent": "Analysis", "value": 330},
      {"name": "ContourChart", "parent": "Analysis", "value": 300},

      {"name": "Basic", "parent": "Charts", "value": 0},
      {"name": "BarChart", "parent": "Basic", "value": 360},
      {"name": "LineChart", "parent": "Basic", "value": 360},
      {"name": "AreaChart", "parent": "Basic", "value": 330},
      {"name": "ScatterChart", "parent": "Basic", "value": 330},
      {"name": "PieChart", "parent": "Basic", "value": 300},

      {"name": "Marks", "parent": "Charts", "value": 0},
      {"name": "MarkRenderer", "parent": "Marks", "value": 480},
      {"name": "MarksOnlyChart", "parent": "Marks", "value": 450},
      {"name": "LineMarkLayer", "parent": "Marks", "value": 420},
      {"name": "BarMarkLayer", "parent": "Marks", "value": 390},
      {"name": "AreaMarkLayer", "parent": "Marks", "value": 390},

      {"name": "InlineDataSource", "parent": "DataSources", "value": 360},
      {"name": "TransformPipeline", "parent": "DataSources", "value": 450},
      {"name": "DataTransformer", "parent": "DataSources", "value": 390},

      {"name": "ZodValidator", "parent": "Validation", "value": 420},
      {"name": "ChartSpecSchema", "parent": "Validation", "value": 480},
      {"name": "ValidationError", "parent": "Validation", "value": 240},

      {"name": "SecurityUtils", "parent": "Utils", "value": 360},
      {"name": "DomainInference", "parent": "Utils", "value": 420},
      {"name": "PerformanceMonitor", "parent": "Utils", "value": 390},

      {"name": "Core", "parent": "dataglass-plugin", "value": 0},
      {"name": "ChartRenderer", "parent": "Core", "value": 750},
      {"name": "D3Charts", "parent": "Core", "value": 540},
      {"name": "ChartSpecParser", "parent": "Core", "value": 360},
      {"name": "UIUtils", "parent": "Core", "value": 450},

      {"name": "UI", "parent": "dataglass-plugin", "value": 0},
      {"name": "VisualEditorView", "parent": "UI", "value": 600},
      {"name": "ChartGalleryModal", "parent": "UI", "value": 450},
      {"name": "ChartTypeModal", "parent": "UI", "value": 360},
      {"name": "FormRenderer", "parent": "UI", "value": 420},

      {"name": "Canvas", "parent": "dataglass-plugin", "value": 0},
      {"name": "ChartFileGenerator", "parent": "Canvas", "value": 480},
      {"name": "CanvasEnhancer", "parent": "Canvas", "value": 540},
      {"name": "DataFlowEngine", "parent": "Canvas", "value": 510},
      {"name": "CanvasMigrator", "parent": "Canvas", "value": 420},

      {"name": "PluginDataSources", "parent": "dataglass-plugin", "value": 0},
      {"name": "FileDataSource", "parent": "PluginDataSources", "value": 540},
      {"name": "UrlDataSource", "parent": "PluginDataSources", "value": 480},
      {"name": "VaultQuerySource", "parent": "PluginDataSources", "value": 450},
      {"name": "DataPipeline", "parent": "PluginDataSources", "value": 390},

      {"name": "Mermaid", "parent": "dataglass-plugin", "value": 0},
      {"name": "MermaidD3Engine", "parent": "Mermaid", "value": 600},
      {"name": "FlowchartParser", "parent": "Mermaid", "value": 450},
      {"name": "FlowchartRenderer", "parent": "Mermaid", "value": 480},

      {"name": "YamlTestHarness", "parent": "test-harness", "value": 480},
      {"name": "AssertionValidator", "parent": "test-harness", "value": 420},
      {"name": "YamlTestRunner", "parent": "test-harness", "value": 450}
    ]

colorScheme: tableau10

Understanding the Dendrogram

Layout (left to right)

1. Root (left): DataGlass project
2. Level 1: Three packages (chart-renderer, dataglass-plugin, test-harness)
3. Level 2: Modules within packages (Charts, UI, DataSources, etc.)
4. Level 3: Sub-modules (Hierarchies, Networks, Analysis, etc.)
5. Leaves (right): Individual class implementations

Visual Elements

• Nodes: Circles sized by complexity (larger = more complex)
• Links: Lines connecting parent to children
• Colors: Package-level color coding (all children of a package share color family)
• Spacing: Vertical spacing shows number of items in each branch

Node Size

The circle size represents class complexity:

• Larger circles = more complex classes
• ChartRenderer (750) is the largest node
• Module/package nodes (value=0) are sized by their children

Interactions

• Hover over nodes to see details (name, value, depth)
• Follow lines to trace parent-child relationships
• Clear visual path from root to any leaf node

Why Dendrogram?

Advantages: ✅ Classic tree structure - familiar mental model ✅ Explicit relationships - lines show exact connections ✅ Easy to trace paths - follow branches from root to leaves ✅ Space for labels - horizontal layout leaves room for class names ✅ Good for deep hierarchies - handles 4-5 levels well

Compared to:

• Treemap: Space-efficient but no explicit links
• Sunburst: Good for depth but harder to read labels
• Circle Packing: Shows containment but not explicit branches
• Dendrogram: Classic tree view, best for understanding structure

Best for:

• Understanding exact parent-child relationships
• Tracing paths through the hierarchy
• Seeing the branching structure
• Traditional tree-based thinking