> ## Documentation Index
> Fetch the complete documentation index at: https://calcs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Cross-Section Diagram
> Plot arbitrary cross-sections with section data like centroid, mesh, and principal axes
The Cross-Section Diagram is used throughout the modern platform to plot arbitrary cross-sections, potentially with section data such as centroid, mesh, and principal axes. It uses diagram widget type `"crossSection"`.
## Implementation
```json theme={null}
{
"type": "sheetTemplateWidgets",
"attributes": {
"type": "diagram",
"diagram": [
{
"type": "crossSection"
}
],
"equation": [
{
"result": "{PARAMETERS}",
"condition": "CONDITIONS"
}
],
"referenceId": "cross_section_diagram"
}
}
```
## Plot Parameters
| Parameter | Format | Example | Description |
| --------------- | ------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| lines | dict | `xsect.lines` | Format: `[{"points": [{x: 0, y:0},{x: 0, y:L*12}, ...], "color": "#000", "lineWeight": 3, "material": "default"},{"points":...}]` |
| dimensions | dict | `xsect.dimensions` | Format: `{"name": "dim_name", "type": "outer"/"around"/"radius", "side": "N"/"S"/"E"/"W", "x1": 0, "y1": 0, "x2": 1, "y2": 1}` |
| labels | dict | `[{text: "hi", loc: [0,0]}]` | Format: `[{text: "text string", loc: [x,y], verticalAnchor: "start"/"end"/"middle", textAnchor: "start"/"end"/"middle", arrowEnd: [x,y]}]`. If `arrowEnd` is omitted or set to `[]`, then no arrow will be displayed (only the text) |
| domain | 2x2 matrix | `xsect.domain` | Format: `[[xmin, xmax], [ymin, ymax]]` |
| height | integer | `300` | (defaults to `300`) |
| dimOffset | float | `0.05` | (defaults to `0.05`) The percentage to offset dimensions from the cross-section |
| lenUnit | string | `"mm"` | (defaults to `"mm"`) The unit to show for the lengths |
| origin | boolean | `true` | Whether or not to show the origin location |
| centroid | \[float, float] | `[cx, cy]` | (defaults to `false`) Centroid location to plot |
| principalAxis | float | `5.5` | (defaults to `false`) Angle in degrees of the principal axis. Will plot through the centroid, so a centroid location must be passed |
| shearCentre | \[float, float] | `[sx, sy]` | (defaults to `false`) Shear centre location to plot |
| plasticCentroid | \[float, float] | `[px, px]` | (defaults to `false`) Plastic centroid location to plot |
| loadAxis | "+x","-x","+y","-y" | "+x" | (defaults to `false`) Axis and direction of primary loading, if that is to be plotted |
| loadLoc | float | `80` | (defaults to the centre of the diagram - note that this is not necessarily the centroid) Location at which to put the primary loading direction label |
| rotate | boolean | `true` | (defaults to `false`) Whether or not to rotate the diagram 90 degrees |
| mirror | string | `"y", "x"` | Mirrors about specified Axis (ex. mirror:"y") |
| shift | \[float, float] | `[a, a+b], [30, 20]` | Shifts object from its starting point using the specified \[x, y] coordinates |
| compass | object | `compass:{textX: "X", textY: "Y"}` | Shows a X/Y axis label |
## Short Form Section Names
Within `dev-environment/solver`, the short form names for sections can be found in the file `dsection_properties_v1.py`. These names are used within the cross-section remote widget for the `type` parameter.
| **Shape** | **Short Form** |
| -------------------------------- | ------------------------------------------- |
| Rectangular Section | RectangularSection or Rect |
| Circular Section | CircularSection or Circ |
| Circular Hollow Section | CHS |
| Elliptical Section | EllipticalSection or Elli |
| Elliptical Hollow Section | EHS |
| Rectangular Hollow Section | RHS |
| Square Hollow Section | SHS |
| I-section | ISection or I or UB or WB |
| Monosymmetric I-section | MonoISection or MonoI |
| Tapered Flange I-sections | TaperedFlangeISection or TFI |
| Parallel Flange Channel | PFC or ParallelFlangeChannel |
| Tapered Flange Channel | TaperedFlangeChannel or TFC |
| Tee Section | TeeSection or T |
| Angle Section | AngleSection or L |
| Cee Section | Cee or C |
| Zee / Zed Section | ZedSection or ZeeSection or Zed or Zee or Z |
| Cruciform Section | CruciformSection or Cruciform or X |
| Polygon Section | PolygonSection or Polygon |
| Custom Drawn Section | CustomDrawnSection or Custom |
| Custom Drawn Thin-walled Section | CustomThinWalledSection or CustomThin |
## General Starting Tips and Pointers for Creating Diagrams
Diagrams can be created just from the diagram widget, specifically using `lines` and `dimensions` to outline the shape using the cross-section.
### Basic Lines and Dimensions
```javascript theme={null}
lines: [
{
"points": [
{x: -1 ft, y: 0 ft},
{x: L_wall + 1 ft, y: 0 ft}
],
"color": "brown",
"material": "default",
"lineWeight": 4
}
],
dimensions: [
{
"name": "h",
"type": "outer",
"side":"E",
"x1" : L_wall,
"y1": i == 1 ? 0 ft : matrixSubset(perStory, i-1,4),
"x2": L_wall,
"y2": matrixSubset(perStory, i,4)
}
]
```
Notice that units have to be added to prevent any errors. The `points` section outlines the line which can be colored and have line weights. The `dimensions` allows a dimensioning line to go along a certain length based on the values added in the `x1`, `x2`, `y1`, and `y2` arguments.
### Using Iteration for Complex Diagrams
Iteration is often required for creating diagrams. Take a look at the code for the story cross-sections below from timberShearWallASD:
```javascript theme={null}
iterate(1, n_story, 1, {
type:"Rect",
d: matrixSubset(stories,i,2),
b: L_wall,
shift: [0, matrixSubset(stories,i,3)]
}, i)
```
This `iterate` function automatically creates an array which can be concatenated. Otherwise, you'll need to specify using `[]`. This is later called by the remote widget and sends this argument array to `sectionsData`.
## Working with Remote Widgets
Cross-section diagrams are commonly used with remote widgets that generate section property data:
```json theme={null}
{
"type": "sheetTemplateWidgets",
"attributes": {
"type": "remote",
"solver": "crossSection",
"equation": [
{
"condition": "@default",
"result": "{
sectionsData: section_data,
plotCentroid: true,
plotShearCentre: true
}"
}
],
"referenceId": "section_properties"
}
}
```
## Best Practices
1. **Units**: Always include units in coordinate specifications to prevent errors
2. **Organization**: Group related lines and dimensions logically
3. **Color Coding**: Use consistent colors for different materials or components
4. **Labels**: Provide clear labels for dimensions and important features
5. **Iteration**: Use the `iterate()` function for repetitive elements rather than manual arrays
When using the `principalAxis` parameter, ensure that a `centroid` location is also provided, as the principal axis will be plotted through the centroid.