DataGlass Project Structure - Circle Packing (Nested Hierarchy View)

This circle packing chart shows the project structure with nested circles representing the hierarchy:

• Outer circle: Root (DataGlass)
• Large circles: Packages (chart-renderer, dataglass-plugin, test-harness)
• Medium circles: Modules (Charts, UI, Canvas, etc.)
• Small circles: Individual classes

Circle size represents the relative complexity/size of each class. Nested layout makes it easy to see containment relationships.

View Source

type: circle-packing
engine: d3
width: 1000
height: 1000
title: "DataGlass Project Structure - Circle Packing View"

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 Circle Packing

Nesting (from outside to inside)

1. Root circle: DataGlass (contains everything)
2. 3 large circles: chart-renderer, dataglass-plugin, test-harness packages
3. Module circles: Charts, UI, Canvas, DataSources, etc.
4. Sub-module circles: Hierarchies, Networks, Analysis, etc.
5. Small circles: Individual class implementations

Color Coding

• Colors: Each top-level package has its own color family
• Package identification: All nested circles within a package share similar colors
• Easier to see which classes belong to which package compared to treemap

Circle Size

The circle area represents the relative complexity:

• Larger circles = more complex classes (more methods/lines)
• ChartRenderer and MermaidD3Engine are the largest circles
• Module circles (with value=0) size determined by their children

Interactions

• Hover over any circle to see its full path and size
• Click a circle to zoom into that subtree
• Nested layout shows containment: every circle is inside its parent

Why Circle Packing?

Advantages: ✅ Clear containment - nested circles show parent-child relationships visually ✅ Space efficient - packs many items in compact space ✅ Zoom capability - click to focus on a package or module ✅ Aesthetic - pleasing circular layout

Compared to:

• Treemap: Better for space efficiency but loses visual nesting
• Sunburst: Better for showing depth/levels, but harder to compare sizes
• Circle Packing: Best balance of nesting + size comparison

The three visualizations complement each other:

• Treemap: See all classes efficiently
• Sunburst: Understand hierarchical depth
• Circle Packing: See containment and relative sizes