DataGlass Project Structure - Sunburst (Better Hierarchy View)

This sunburst chart shows the project structure with clear visual hierarchy where each ring represents a level:

• Center: Root (DataGlass)
• Inner ring: Packages (chart-renderer, dataglass-plugin, test-harness)
• Middle rings: Modules (Charts, UI, Canvas, etc.)
• Outer ring: Individual classes

Colors represent the package level, making it easy to see which classes belong to which package.

View Source

type: sunburst
engine: d3
width: 1000
height: 1000
title: "DataGlass Project Structure - Hierarchical 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 Sunburst

Rings (from center outward)

1. Center: DataGlass (root)
2. 1st ring: 3 packages - chart-renderer (🔵 blue), dataglass-plugin (🟢 green), test-harness (🟠 orange)
3. 2nd ring: Modules within each package (Charts, DataSources, UI, Canvas, etc.)
4. 3rd ring: Sub-modules (Hierarchies, Networks, Analysis, etc.)
5. Outer ring: Individual classes

Color Coding

• 🔵 Blue shades: chart-renderer package
• 🟢 Green shades: dataglass-plugin package
• 🟠 Orange shades: test-harness package

All classes in the same package share the same base color family!

Arc Size

The arc width represents the relative complexity of that section:

• Larger arcs = more/bigger classes in that module
• ChartRenderer (largest) is the most complex class
• Charts module has the most classes

Interactions

• Hover over any arc to see the full path and size
• Click an arc to zoom into that section
• Colors make it instantly clear which package you're looking at

Why This is Better Than Treemap

✅ Clear hierarchy - each ring is a level ✅ Meaningful colors - package-level color coding ✅ See relationships - adjacent arcs show related components ✅ Zoom capability - click to focus on a package or module

The treemap shows all classes efficiently, but the sunburst shows how they're organized.