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

{
    "type": "sheetTemplateWidgets",
    "attributes": {
        "type": "diagram",
        "diagram": [
            {
                "type": "crossSection"
            }
        ],
        "equation": [
            {
                "result": "{PARAMETERS}",
                "condition": "CONDITIONS"
            }
        ],
        "referenceId": "cross_section_diagram"
    }
}

​
Plot Parameters

ParameterFormatExampleDescription
linesdictxsect.linesFormat: [{"points": [{x: 0, y:0},{x: 0, y:L*12}, ...], "color": "#000", "lineWeight": 3, "material": "default"},{"points":...}]
dimensionsdictxsect.dimensionsFormat: {"name": "dim_name", "type": "outer"/"around"/"radius", "side": "N"/"S"/"E"/"W", "x1": 0, "y1": 0, "x2": 1, "y2": 1}
labelsdict[{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)
domain2x2 matrixxsect.domainFormat: [[xmin, xmax], [ymin, ymax]]
heightinteger300(defaults to 300)
dimOffsetfloat0.05(defaults to 0.05) The percentage to offset dimensions from the cross-section
lenUnitstring"mm"(defaults to "mm") The unit to show for the lengths
originbooleantrueWhether or not to show the origin location
centroid[float, float][cx, cy](defaults to false) Centroid location to plot
principalAxisfloat5.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
loadLocfloat80(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
rotatebooleantrue(defaults to false) Whether or not to rotate the diagram 90 degrees
mirrorstring"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
compassobjectcompass:{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.

​
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

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: 
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: 
{
    "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.