DataGlass Project Structure - Treemap Visualization
This treemap visualizes the class structure of the DataGlass project, organized by package and module.
View Source
type: treemap
engine: d3
width: 1200
height: 800
title: "DataGlass Project Class Structure"
padding: 3
tile: squarify
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": "Errors", "parent": "chart-renderer", "value": 0},
{"name": "Hierarchies", "parent": "Charts", "value": 0},
{"name": "Networks", "parent": "Charts", "value": 0},
{"name": "Analysis", "parent": "Charts", "value": 0},
{"name": "Basic", "parent": "Charts", "value": 0},
{"name": "Radial", "parent": "Charts", "value": 0},
{"name": "Lines", "parent": "Charts", "value": 0},
{"name": "Marks", "parent": "Charts", "value": 0},
{"name": "Strategies", "parent": "Charts", "value": 0},
{"name": "TreemapChart", "parent": "Hierarchies", "value": 15},
{"name": "SunburstChart", "parent": "Hierarchies", "value": 14},
{"name": "CirclePackingChart", "parent": "Hierarchies", "value": 13},
{"name": "DendrogramChart", "parent": "Hierarchies", "value": 12},
{"name": "IcicleChart", "parent": "Hierarchies", "value": 11},
{"name": "TidyTreeChart", "parent": "Hierarchies", "value": 10},
{"name": "ForceDirectedChart", "parent": "Networks", "value": 18},
{"name": "SankeyDiagram", "parent": "Networks", "value": 16},
{"name": "ArcDiagramChart", "parent": "Networks", "value": 14},
{"name": "ChordDiagram", "parent": "Networks", "value": 13},
{"name": "EdgeBundlingChart", "parent": "Networks", "value": 12},
{"name": "ParallelSetsChart", "parent": "Networks", "value": 11},
{"name": "HeatmapChart", "parent": "Analysis", "value": 16},
{"name": "BoxplotChart", "parent": "Analysis", "value": 14},
{"name": "HistogramChart", "parent": "Analysis", "value": 13},
{"name": "ViolinChart", "parent": "Analysis", "value": 12},
{"name": "RidgelineChart", "parent": "Analysis", "value": 11},
{"name": "ContourChart", "parent": "Analysis", "value": 10},
{"name": "BollingerChart", "parent": "Analysis", "value": 9},
{"name": "BarChart", "parent": "Basic", "value": 12},
{"name": "LineChart", "parent": "Basic", "value": 12},
{"name": "AreaChart", "parent": "Basic", "value": 11},
{"name": "ScatterChart", "parent": "Basic", "value": 11},
{"name": "PieChart", "parent": "Basic", "value": 10},
{"name": "RadialBarChart", "parent": "Radial", "value": 13},
{"name": "RadialAreaChart", "parent": "Radial", "value": 12},
{"name": "CandlestickChart", "parent": "Lines", "value": 15},
{"name": "HorizonChart", "parent": "Lines", "value": 12},
{"name": "SlopeChart", "parent": "Lines", "value": 11},
{"name": "ParallelCoordsChart", "parent": "Lines", "value": 10},
{"name": "LineMarkLayer", "parent": "Marks", "value": 14},
{"name": "BarMarkLayer", "parent": "Marks", "value": 13},
{"name": "AreaMarkLayer", "parent": "Marks", "value": 13},
{"name": "DotMarkLayer", "parent": "Marks", "value": 12},
{"name": "MarkRenderer", "parent": "Marks", "value": 16},
{"name": "MarksOnlyChart", "parent": "Marks", "value": 15},
{"name": "BarChartStrategy", "parent": "Strategies", "value": 10},
{"name": "LineChartStrategy", "parent": "Strategies", "value": 10},
{"name": "AreaChartStrategy", "parent": "Strategies", "value": 9},
{"name": "ScatterChartStrategy", "parent": "Strategies", "value": 9},
{"name": "PieChartStrategy", "parent": "Strategies", "value": 8},
{"name": "InlineDataSource", "parent": "DataSources", "value": 12},
{"name": "TransformPipeline", "parent": "DataSources", "value": 15},
{"name": "DataTransformer", "parent": "DataSources", "value": 13},
{"name": "AggregateTransformation", "parent": "DataSources", "value": 11},
{"name": "FilterTransformation", "parent": "DataSources", "value": 10},
{"name": "ZodValidator", "parent": "Validation", "value": 14},
{"name": "ChartSpecSchema", "parent": "Validation", "value": 16},
{"name": "ValidationError", "parent": "Validation", "value": 8},
{"name": "SecurityUtils", "parent": "Utils", "value": 12},
{"name": "SecurityValidator", "parent": "Utils", "value": 10},
{"name": "DomainInference", "parent": "Utils", "value": 14},
{"name": "PerformanceMonitor", "parent": "Utils", "value": 13},
{"name": "Logger", "parent": "Utils", "value": 9},
{"name": "DataGlassError", "parent": "Errors", "value": 8},
{"name": "RenderError", "parent": "Errors", "value": 7},
{"name": "DataLoadError", "parent": "Errors", "value": 7},
{"name": "UI", "parent": "dataglass-plugin", "value": 0},
{"name": "Canvas", "parent": "dataglass-plugin", "value": 0},
{"name": "PluginDataSources", "parent": "dataglass-plugin", "value": 0},
{"name": "Core", "parent": "dataglass-plugin", "value": 0},
{"name": "Mermaid", "parent": "dataglass-plugin", "value": 0},
{"name": "ChartRenderer", "parent": "Core", "value": 25},
{"name": "D3Charts", "parent": "Core", "value": 18},
{"name": "ChartSpecParser", "parent": "Core", "value": 12},
{"name": "ChartConfigBuilder", "parent": "Core", "value": 11},
{"name": "UIUtils", "parent": "Core", "value": 15},
{"name": "VisualEditorView", "parent": "UI", "value": 20},
{"name": "ChartGalleryModal", "parent": "UI", "value": 15},
{"name": "ChartTypeModal", "parent": "UI", "value": 12},
{"name": "FormRenderer", "parent": "UI", "value": 14},
{"name": "ChartPreview", "parent": "UI", "value": 11},
{"name": "EngineIndicator", "parent": "UI", "value": 8},
{"name": "ChartFileGenerator", "parent": "Canvas", "value": 16},
{"name": "CanvasEnhancer", "parent": "Canvas", "value": 18},
{"name": "DataFlowEngine", "parent": "Canvas", "value": 17},
{"name": "CanvasMigrator", "parent": "Canvas", "value": 14},
{"name": "LiveUpdateManager", "parent": "Canvas", "value": 13},
{"name": "ConnectionValidator", "parent": "Canvas", "value": 11},
{"name": "FileDataSource", "parent": "PluginDataSources", "value": 18},
{"name": "UrlDataSource", "parent": "PluginDataSources", "value": 16},
{"name": "VaultQuerySource", "parent": "PluginDataSources", "value": 15},
{"name": "HeadingDataSource", "parent": "PluginDataSources", "value": 12},
{"name": "CanvasDataSource", "parent": "PluginDataSources", "value": 14},
{"name": "DataPipeline", "parent": "PluginDataSources", "value": 13},
{"name": "MermaidD3Engine", "parent": "Mermaid", "value": 20},
{"name": "FlowchartParser", "parent": "Mermaid", "value": 15},
{"name": "FlowchartRenderer", "parent": "Mermaid", "value": 16},
{"name": "ZoomPanController", "parent": "Mermaid", "value": 12},
{"name": "LevelFilter", "parent": "Mermaid", "value": 10},
{"name": "YamlTestHarness", "parent": "test-harness", "value": 16},
{"name": "AssertionValidator", "parent": "test-harness", "value": 14},
{"name": "YamlTestRunner", "parent": "test-harness", "value": 15},
{"name": "PerformanceProfiler", "parent": "test-harness", "value": 13}
]
colorScheme: category20cWhat You're Seeing
About the Flat Display
The treemap is showing only the leaf nodes (actual classes) because that's how D3 treemaps work - intermediate hierarchy levels (packages, modules) are used for color grouping but not shown as separate rectangles.
Color Meanings
Colors are randomly assigned from the category20c palette - each unique color represents a different class. Unfortunately, D3's treemap doesn't automatically color by parent hierarchy level, so the colors don't directly indicate which package/module a class belongs to.
To understand the structure, read the labels:
- Top-level names like "ChartRenderer", "TreemapChart" are the classes
- The size of each rectangle shows relative complexity
- Classes from the same module are typically adjacent
Better Hierarchy Visualization
For a true hierarchical view where you can see packages → modules → classes with meaningful colors, you would want to use:
- Sunburst chart (radial hierarchy with layers)
- Circle packing (nested circles)
- Icicle chart (horizontal hierarchy)
This treemap optimizes for space efficiency to show all 100+ classes at once, but sacrifices hierarchical clarity.
Structure Overview
chart-renderer Package (Core Library)
- Charts: 31 D3 chart implementations organized by category
- Hierarchies: Treemap, Sunburst, Circle Packing, etc.
- Networks: Force-Directed, Sankey, Chord, etc.
- Analysis: Heatmap, Boxplot, Histogram, etc.
- Basic: Bar, Line, Area, Scatter, Pie
- Marks: Observable Plot-style composable marks
- Strategies: Strategy pattern implementations
- DataSources: Data loading and transformation pipeline
- Validation: Zod-based schema validation with error tracking
- Utils: Security, domain inference, performance monitoring
- Errors: Custom error classes with source location tracking
dataglass-plugin Package (Obsidian Plugin)
- Core: Main rendering orchestration and configuration
- UI: Visual editor, chart gallery, modals
- Canvas: Native canvas integration with data flow
- DataSources: Obsidian-specific data sources (files, vault, URLs, headings)
- Mermaid: Mermaid diagram support with D3 rendering
test-harness Package
- YAML-based testing framework with assertions and profiling
Interactions
Hover over rectangles to see the full class path (package → module → class).
Size represents the approximate complexity of each class (lines of code / methods).
Labels show the class name - look for patterns in names to identify modules (e.g., all "*Chart" classes, "*Layer" classes, etc.).