DataGlass Project Structure - Icicle Chart (Horizontal Partitions)

This icicle chart shows the project structure as stacked horizontal bars:

• Top bar: Root (DataGlass)
• Each row: A level in the hierarchy
• Bar width: Proportional to size/complexity
• Stacking: Children stacked directly below their parent

Like an upside-down icicle, each level "drips down" from its parent. Great for comparing sizes across levels.

View Source

type: icicle
engine: d3
width: 1200
height: 800
title: "DataGlass Project Structure - Icicle 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 the Icicle Chart

Layout (top to bottom)

1. Row 1 (top): DataGlass root - spans full width
2. Row 2: Three packages - divided proportionally
3. Row 3: Modules within each package
4. Row 4: Sub-modules (Hierarchies, Networks, etc.)
5. Row 5 (bottom): Individual classes

Visual Elements

• Rectangles: Each node is a horizontal bar segment
• Width: Proportional to total size (sum of all children)
• Height: Equal for all nodes at the same depth
• Alignment: Children stack directly under their parent
• Colors: Package-level coloring

Bar Width Meaning

The width of each bar represents:

• For classes: their individual complexity value
• For modules: sum of all child classes
• For packages: sum of all contained classes
• chart-renderer package is widest (has most classes)

Interactions

• Hover over rectangles to see full path and size
• Click to zoom into that subtree
• Vertical alignment shows parent-child containment

Why Icicle Chart?

Advantages: ✅ Space efficient - uses full width/height ✅ Easy size comparison - bar width directly comparable ✅ Clear depth levels - each row is a level ✅ Vertical flow - natural top-down hierarchy reading ✅ Good for wide trees - handles many siblings well

Compared to:

• Treemap: Similar space efficiency but icicle shows depth clearly
• Sunburst: Icicle uses rectangular space better
• Dendrogram: Icicle more compact for wide trees
• Circle Packing: Icicle easier to compare sizes

Best for:

• Comparing sizes across hierarchy levels
• Understanding relative package sizes
• Seeing depth structure clearly
• Wide hierarchies with many siblings

Visual metaphor: Like geological strata or an icicle dripping down - each layer builds on the one above it.