# nbr-domain-visualizer

> Provides a reusable JavaScript component for interactive NBR-6118 strain domain visualization. Use this skill when the user needs to implement a beam domain diagram (Dom??nio 2, 3, 4) with a moving strain line based on calculation results.

- Author: Leandro Hildinger
- Repository: LeandroHildinger/Scap
- Version: 20260125224437
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/LeandroHildinger/Scap
- Web: https://mule.run/skillshub/@@LeandroHildinger/Scap~nbr-domain-visualizer:20260125224437

---

---
name: nbr-domain-visualizer
description: Provides a reusable JavaScript component for interactive NBR-6118 strain domain visualization. Use this skill when the user needs to implement a beam domain diagram (Dom??nio 2, 3, 4) with a moving strain line based on calculation results.
---

# NBR Domain Visualizer Skill

This skill provides a standardized, reusable JavaScript class (`DomainVisualizer`) to render the interactive "Domain" chart for reinforced concrete beams according to NBR-6118. It includes both the logic component and the required background image.

## Use Cases

- **Interactive Diagrams**: When an app needs to show the strain profile ($\epsilon_c, \epsilon_s$) overlaying a standard domain image.
- **Deformation Analysis**: To visualize the neutral axis depth ($x/d$) and the resulting strains.

## How to Use

### 1. Copy Assets

Copy both the component and the background image from `assets/` to your project:
- `assets/DomainVisualizer.js` -> `app/js/components/` (or similar)
- `assets/dominio-nbr.png` -> `app/assets/` (or similar)

### 2. Implementation

1.  **HTML**: Ensure you have an SVG overlay on top of the domain image. The SVG must match the image size exactly.
    ```html
    <div class="domain-plot-container" style="position: relative;">
        <!-- Background Image -->
        <img src="path/to/dominio-nbr.png" alt="Dom??nios NBR 6118" style="width: 100%; display:block;">
        
        <!-- SVG Overlay -->
        <svg viewBox="0 0 100 100" preserveAspectRatio="none"
             style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;">
            <line id="domain-line" stroke="red" stroke-width="2" opacity="0" />
        </svg>
    </div>
    ```

2.  **JavaScript**: Import and use the class.
    ```javascript
    import { DomainVisualizer } from './components/DomainVisualizer.js';

    // Initialize with the ID of the SVG line element
    const visualizer = new DomainVisualizer('domain-line');

    // Update based on neutral axis (xi = x/d_tension)
    // The component handles all coordinate mapping automatically
    visualizer.updateFromXi(0.45); 
    
    // OR update with specific strains (ELU)
    // visualizer.update(eps_c, eps_s);
    ```

## Critical Alignment Requirements

- The SVG must overlap the image with identical width/height (no padding/margins).
- Use `preserveAspectRatio="none"` in the SVG to avoid drift when the container resizes.
- Avoid CSS that hides the SVG or adds extra padding to the image.

## Inputs & Units

- **xi** must be computed as **x/d_tension** (distance from compression face to centroid of tensile steel), not x/h.
- **eps_c** and **eps_s** are **positive values in permil (???)**.
- For ELU, clamp or compute strains with: `eps_cu = 3.5???` and `eps_s_max = 10???`.
- For negative bending, swap the compression face before computing `xi`, or call `update(eps_c, eps_s)` directly using ELU strains.

## Calibration & Debug

If you use a different background image or your line looks misaligned:

```javascript
const visualizer = new DomainVisualizer('domain-line', {
  debug: true, // renders calibration points
  map: { x_left: 5.45, x_zero: 67.3, x_ecu: 87.9, y_top: 17.9, y_bottom: 92.3 }
});

// Later, if needed:
visualizer.setMap({ x_zero: 67.0 });
```

## Logic Overview

The component maps the physical strains (0 to 10 permil for steel, 0 to 3.5 permil for concrete) to specific X/Y percentage coordinates on the background image. 

- **Top Axis**: Represents $\epsilon_c$ (Concrete shortening).
- **Bottom Axis**: Represents $\epsilon_s$ (Steel elongation).
- **Pivot Point**: The neutral axis passes through zero strain on both bars.