Beam Analysis Tool: Shear and Moment Diagrams on the Web

Motivation

Check the repo out here.

Live demo of the app here.

Working as a structural engineer, beam design and analysis is a pretty common task. So common in fact, that engineers have created formulas and lookup tables of some of the most common beam-load scenarios that an engineer would encounter in practice. Here’s an example of a set of tables and formulas written for that very purpose.

With those tables and formulas, an engineer equipped with the power of algebraic substitution can literally substitute the load, span geometry, and beam properties that fit the beam-load case under consideration, and they’re off determining reactions, shear, flexure, and deflections as fast as your client says, “Can you try re-designing that same beam, but this time without this column and/or wall at midspan?”

Here’s another problem. By the very nature of design work, this process is iterative and can become tedious, especially if an engineer is running through these equations using good ol’ pencil and paper because they originally thought it was going to be a “quick, one-time” computation that their project manager wanted right away. Then this conversation happens with your Project Manager:

PM: “We’ll need to generate options for the client.”

You: (provides options with time no one has)

PM: “Thanks for doing that. Hey, we got more feedback from the client, can you run these numbers again? These are some of the updated conditions. Let’s run it with this updated beam span. The architect is interested in removing a support and I’d like to see how much the deflections change with a lighter load on a single beam since there may be problems with headroom if there’s a deeper beam is needed. We might have to sister the joists if the deflections are too high.

To expedite the process, engineers turn to the one computational tool that runs practically everything in the Architectural, Engineering, and Construction (AEC) industry… that’s right… Excel… I’m almost certain that these kinds of beam tables are already built in Excel by thousands of engineers before me and will be built by thousands more in the future. The better question to ask a structural engineer regarding their “favorite” computational tool, “What can’t be done in Excel?”

In any case, I’m more interested in moving away from Excel and prototyping what this might look like in a browser-based context. The goals for this application are simple:

• Prototype this tool into a single-page application in React.
• Use D3.js to generate interactive beam diagrams that can query values along the length of the beam.

Combining the use of a reactive UI with snappy visualizations to expedite repetitive calulations on the ubiquitous web browser seems like a nicer alternative to using BeamCalculatorV4-Final-Final-AnInternFrom2YearsAgoWroteThis.xlsx, which may or may not be the most updated version despite the name of the file persistently saying so.

Back of the Envelope: What are Shear and Moment Diagrams?

Shear and moment diagrams are one of the learning objectives in a course on Statics, which is the study of how physical systems such as trusses and other frames resolve applied loads to acheive equilibrium, the balance of forces throughout a structural system.

In the context of the tool I’ve built, beam diagrams describe the internal forces namely shear and moment and how the magnitude of these forces change along the length of a beam under a particular loading condition. These diagrams form the basis for understanding structural engineering design and analysis of beams. When combined with beam section and material properties (e.g. cross-sectional areas, moments of inertia, etc), engineers can use these diagrams to extract stresses and deflections to validate designs and determine if beams are exceeding their capacity or deflection thresholds anywhere along the length of the beam.

For example, after some unit conversions, checking flexural stresses (a normal stress) in a beam, can be checked with the following equation:

$$ f_b = \frac{M}{S} $$

where:

$$ \begin{align*} f_b &= \text{Flexural Stress, }\frac{\text{kip}}{in^2} \newline M &= \text{Bending Moment, kip-ft} \newline S &= \text{Section Modulus, } in^3 \end{align*} $$

D3.js: Bespoke Beam Diagrams

Rooted in Scalable Vector Graphics (SVG), a web standard, D3.js is a JavaScript library that gives just enough “higher-level” SVG markup primitives to provide both a high degree of customization for building charts and graphs without starting from scratch using pure SVG markup to build a graph or chart. Although in the context of React, using pure SVG elements to build shapes such as grid lines seemed more straightforward at times than utilizing D3’s API.

While there are many alternative chart plotting libraries available, I was really looking forward to using D3 and put some mileage into learning the library which also meant putting in some extra lines of code to get it work. Also, thanks to Amelia Wattenberger’s post on D3.js and React, understanding where D3 and React interact was a much more pleasant experience.

Here’s an example of the MomentPlot React component I wrote to generate a moment diagram for a beam.

The reference table of beam formulas provide a way to evaluate shear, moment, and deflections at any point along the beam as a function of the beam’s length. Generating points along the beam, I can use those points to evaluate the formulas and store the results in a data object to pass as a prop into the MomentPlot.jsx, ShearPlot.jsx, and DeflectionPlot.jsx React components.

One of the more challenging parts of writing an interactive graph with React components was writing the tooltip feature allowing users to query values along the beam by simply hovering over the graph. This tooltip was essential to the application because while structural engineers are concerned with maximum values at one location, engineers are also interested in querying values anywhere along the beam’s span. Mechanical ductwork, plumbing pipes, and electrical conduit seem to attract a lot of holes in beams and engineers are often tasked with specifying where these holes need to be located along the length of the beam.

Conclusion

There are many more load cases to implement as well as incorporating toggles for displaying different units such as pounds (lbs) and Newtons (N), meters (m), etc, but so far I’m happy with it.