How knight-l/sc-datav works
This is a React/Three.js data-visualization dashboard with a gallery landing page and four distinct dashboard demos. The main user flow is to select a demo from the landing page, view its map and dashboard panels, and interact with map or display controls. Source excerpts verify routing, Demo0 composition, Demo2 map composition, and shared chart behavior; some Demo1/Demo3 internals are represented at directory level because their wiring was not sampled.
Main entry points: App.tsx Route selection · index.tsx Demo gallery · seamVirtualScroll.tsx Virtual data scroll · demo.tsx Demo0 dashboard
Components 24
Application flow
- Route selection
src/App.tsx - Demo gallery
src/pages/Index/index.tsx - Gallery backdrop
src/pages/Index/bg.tsx
Shared UI
- Responsive sizing
src/components/autoFit.tsx - ECharts renderer
src/components/chart.tsx - Virtual data scroll
src/components/seamVirtualScroll.tsx - Animation frame hook
src/hooks/useAnimationFrame.ts - Element size hook
src/hooks/useSize.ts
Demo0 dashboard
- Demo0 dashboard
src/pages/Demo0/demo.tsx - 3D map scene
src/pages/Demo0/map/index.tsx - Map layers
src/pages/Demo0/map - Charts and controls
src/pages/Demo0/panel/index.tsx - Dashboard charts
src/pages/Demo0/panel
Demo1 dashboard
- Demo1 dashboard
src/pages/Demo1/demo.tsx - 3D city map
src/pages/Demo1/map - Dashboard panels
src/pages/Demo1/panel/index.tsx - Charts and framing
src/pages/Demo1/panel
Demo2 and 3
- Demo2 dashboard
src/pages/Demo2/demo.tsx - 3D map scene
src/pages/Demo2/map/base.tsx - Map effects
src/pages/Demo2/map - Dashboard panels
src/pages/Demo2/panel - Demo3 scene
src/pages/Demo3/demo.tsx - 3D model
src/pages/Demo3/model.tsx
Other components
- Dashboard viewer
Connections 27
- Dashboard viewer → Demo gallery: opens
- Demo gallery → Route selection: navigates to
src/pages/Index/index.tsx - Route selection → Demo gallery: routes to
src/App.tsx - Route selection → Demo0 dashboard: routes to
src/App.tsx - Route selection → Demo1 dashboard: routes to
src/App.tsx - Route selection → Demo2 dashboard: routes to
src/App.tsx - Route selection → Demo3 scene: routes to
src/App.tsx - Demo gallery → Gallery backdrop: renders
src/pages/Index/index.tsx - Demo0 dashboard → 3D map scene: renders
src/pages/Demo0/demo.tsx - Demo0 dashboard → Charts and controls: renders
src/pages/Demo0/demo.tsx - 3D map scene → Map layers: assembles
src/pages/Demo0/map/index.tsx - Charts and controls → Dashboard charts: renders
src/pages/Demo0/panel/index.tsx - Dashboard charts → ECharts renderer: uses
src/pages/Demo0/panel/chart1.tsx - Dashboard charts → Virtual data scroll: uses
src/pages/Demo0/panel/chart4.tsx - Charts and controls → Responsive sizing: sizes with
src/pages/Demo0/panel/index.tsx - Demo1 dashboard → 3D city map: renders
- Demo1 dashboard → Dashboard panels: renders
- Dashboard panels → Charts and framing: renders
src/pages/Demo1/panel/index.tsx - Dashboard panels → Responsive sizing: sizes with
src/pages/Demo1/panel/index.tsx - Dashboard panels → ECharts renderer: uses
- 3D map scene → Map effects: assembles
src/pages/Demo2/map/base.tsx - Demo2 dashboard → 3D map scene: renders
- Demo2 dashboard → Dashboard panels: renders
- Demo3 scene → 3D model: renders
src/pages/Demo3/demo.tsx - ECharts renderer → Element size hook: measures
src/components/chart.tsx - Virtual data scroll → Element size hook: measures
src/components/seamVirtualScroll.tsx - Virtual data scroll → Animation frame hook: animates with
src/components/seamVirtualScroll.tsx