[0] BIM Data Visualisation 201: Introduction to 3D data reporting
An interactive notebook for practitioners in 3D BIM reporting and model assurance.
This is an interactive BIM assurance report that generates a synthetic building model in the browser, automatically detecting clashes, checking ISO 19650 compliance, and rendering a 3D visualization—all without server requests. Users adjust parameters like floor count and defect rate to watch the entire report regenerate in real time, with clickable 3D elements, filterable audit tables, and compliance dashboards that recompute on demand. It demonstrates client-side BIM analysis using Three.js, Chart.js, and vanilla JavaScript, combining a notebook interface with practical quality control tools for federated building models.
This page is an interactive **BIM Assurance Report** — a notebook-style interface for inspecting a synthetic building information model. All computation runs client-side: element generation, AABB clash detection, ISO 19650 compliance checking, and 3D visualisation via Three.js.
Adjust the **Parameters** cell to change the model size and defect rate, then watch the entire report regenerate. Click elements in the 3D viewer to inspect their properties. Filter the audit table by status. Every chart and metric recomputes from the generated data.
> **Stack:** Three.js (3D), Chart.js (charts), vanilla JS (data gen + UI)
[1] Report Summary
| Field | Value |
|-------|-------|
| **Project** | Riverside Tower — Phase 2 |
| **Report Date** | — |
| **Standard** | ISO 19650-2:2018 |
| **Model Elements** | — |
| **Overall Grade** | — |
| **Clashes Detected** | — |
### Executive Summary
This report presents the BIM assurance findings for the federated model. The model contains **—** elements across — floors, spanning Architectural, Structural, MEP, and Electrical disciplines. Overall compliance is rated **—** with — elements passing, — warnings, and — failures.
> **Traffic Light Status:** Pending — click **Run** to generate the model.
[2] Information Container — 3D Model
This section provides an interactive 3D view of the federated BIM model. Use the **Parameters** panel to configure the number of floors and defect rate, then click **Regenerate** to rebuild the model. The 3D viewer supports orbit controls — drag to rotate, scroll to zoom, right-click to pan.
Use the view mode toggles to colour elements by **Status**, **Discipline**, or filter to show only **Clashes** or **Failed** elements. The **X-Ray** toggle makes walls transparent to reveal MEP routing inside the building.
> Click any element in the 3D viewer to inspect its properties.
[3] Clash Detection
Clash detection uses axis-aligned bounding box (AABB) intersection testing between MEP/Electrical elements and Architectural/Structural elements. Clashes are classified by severity: **Critical** (hitting beams/columns), **Major** (hitting walls), or **Minor**.
[4] Data Completeness
Data completeness measures how well each element's properties are filled in across the model. The charts below show overall model status, completeness by discipline, property fill rates, and a heatmap of fill rates by discipline and property.
[5] Standards Compliance
Compliance checking evaluates six standards: ISO 19650 data adequacy, COBie export readiness, naming conventions, LOD compliance, Uniclass 2015 classification, and fire rating assignment. Use the standards filter in the Parameters panel to focus on a specific standard set.
[6] Element Audit
The element audit table lists every element in the generated model with its properties, compliance status, and identified issues. Use the filter tabs to show only elements with a specific status.
[7] Analytics
Quality analytics across three dimensions: a radar chart showing scores for Geometry, Data Quality, Naming, Classification, and LOD; a stacked bar chart of issues by floor; and a doughnut chart of clash severity distribution.
[8] Findings & Recommendations
### Key Findings
- Model analysis pending — click **Run** to generate findings.
### Priority Actions
1. Run the notebook to generate the model and compute compliance.
---
### Sign-off
| Role | Name | Date | Status |
|------|------|------|--------|
| BIM Manager | _________________ | ________ | Pending |
| Design Lead | _________________ | ________ | Pending |
| Information Manager | _________________ | ________ | Pending |
*Report generated automatically. All data is synthetic for demonstration purposes.*
[9] How It Works
### How It Works
The notebook generates a synthetic BIM model with configurable floors and defect rates. Each element gets randomised properties — some deliberately invalid to simulate real-world data quality issues.
**Data Generation** creates elements across four disciplines (Architectural, Structural, MEP, Electrical) with types like Wall, Column, Beam, Pipe, Duct, and Cable. Each element has a 3D position computed from building geometry.
**Clash Detection** uses axis-aligned bounding box (AABB) intersection testing between MEP/Electrical elements and Architectural/Structural elements. Clashes are classified as Critical (hitting beams/columns), Major (hitting walls), or Minor.
**Compliance Checking** evaluates six standards: ISO 19650 data adequacy, COBie export readiness, naming conventions, LOD compliance, Uniclass 2015 classification, and fire rating assignment.
**3D Viewer** renders the model using Three.js with PBR materials, shadow mapping, and orbit controls. View modes colour by status, discipline, or clash involvement. The X-Ray toggle makes walls transparent to reveal MEP routing.
[10] Implementation Notes
### Implementation Notes
| Component | Approach | Notes |
|-----------|----------|-------|
| 3D Engine | Three.js + OrbitControls | ESM import, PBR materials |
| Charts | Chart.js 4.x | Doughnut, bar, radar |
| Heatmap | HTML grid | CSS-coloured cells |
| Data Table | Vanilla DOM | Filterable, status-coloured |
| Clash Detection | AABB intersection | O(n*m) brute force |
| Data Generation | Procedural JS | Seeded by floor count + defect rate |
### What This Demonstrates
- **Notebook metaphor** applied to BIM — cells with type badges, sequential numbering, and a regenerate button
- **Client-side computation** — no server round-trips, all processing in the browser thread
- **Interconnected visualisations** — changing parameters propagates through generation → detection → compliance → charts → table
- **Three.js in a static site** — ESM module loading via importmap, no bundler required
### Limitations
- AABB collision is approximate — real BIM tools use exact geometry
- Element generation is synthetic — real models have thousands of types
- Three.js + Chart.js together add ~200 KB gzipped
- The 3D viewer is CPU-bound on mobile (no WebGPU fallback)