diagram = { // Standard US reinforcing bar properties const barDiameter = { "#3": 0.375, "#4": 0.5, "#5": 0.625, "#6": 0.75, "#7": 0.875, "#8": 1.0, "#9": 1.128, "#10": 1.27, "#11": 1.41, "#14": 1.693, "#18": 2.257 } const barArea = { "#3": 0.11, "#4": 0.2, "#5": 0.31, "#6": 0.44, "#7": 0.6, "#8": 0.79, "#9": 1.0, "#10": 1.27, "#11": 1.56, "#14": 2.25, "#18": 4.0 } // Helper function const error = msg => { return html`

Error. ${msg}

` } // Do some input validity checks if (isNaN(input.fc)) { return error(`f_c′ must be numeric.`) } if (isNaN(input.fy)) { return error("f_y must be numeric.") } if (isNaN(input.width)) { return error("Width must be numeric.") } if (isNaN(input.cover)) { return error("Cover must be numeric.") } const isCircle = input.crossSection === "Circle" const isOctagon = input.crossSection === "Octagon" const isRectangle = !(isCircle || isOctagon) const gotSpirals = input.confiner === "Spirals" const depthStr = input.depth let H = 0 if (isCircle || isOctagon) { // Depth is irelevant. We'll use width. } else if (isNaN(depthStr)) { return error("Depth must be numeric or blank.") } else { H = Number(depthStr) } const rebarPattern = /^([0-9]+) *x *([0-9]+)$/ let barPattern = input.barPattern.trim() if (isCircle || isOctagon || gotSpirals) { if (isNaN(barPattern)) { return error("A circular bar pattern must be entered as a single integer, e.g., “12”.") } } else if (!isNaN(barPattern)) { if (Number(barPattern) % 4 !== 0) { return error("The bar pattern should be an integer evenly divisible
by 4 or it should be written in the format
𝐦 x 𝐧, where 𝐦 and 𝐧 are integers ≥ 2.") } } else if (!rebarPattern.test(barPattern)) { return error("Invalid input for number of bars.") } // Collect the input data const fPrimeC = Number(input.fc) const fy = Number(input.fy) const b = Number(input.width) const barSize = input.barSize const cover = Number(input.cover) const tieSize = input.tieSize.trim() // More column data const barDia = barDiameter[barSize] if (!barDia) { return error("Not a valid bar size.") } const barRadius = barDia / 2 const areaPerBar = barArea[barSize] const tieDia = barDiameter[tieSize] if (!tieDia) { return error("Not a valid tie size.") } const tieIR = 2 * tieDia // inside radius of tie bending curve const tieOR = 3 * tieDia const Ag = isRectangle ? b * H : isOctagon ? 0.8284271247 * b ** 2 : Math.PI * b ** 2 / 4 // Get the number of bars let numTopBars = 0 let numSideBars = 0 let numBars = 0 if (isNaN(barPattern)) { const pos = barPattern.indexOf("x") numTopBars = Number(barPattern.slice(0, pos)) numSideBars = Number(barPattern.slice(pos + 1)) numBars = 2 * numTopBars + 2 * (numSideBars - 2) } else { numBars = Number(barPattern) if (!(isOctagon || isCircle || gotSpirals)) { numTopBars = numBars / 4 + 1 numSideBars = numTopBars } } if (numBars < 4 ) { return error("ACI 318 section 10.7 requires at least 4 vertical bars.") } if (numBars < 6 && gotSpirals) { return error("ACI 318 section 10.7 requires at least 6 vertical bars in a spiral.") } const steelArea = numBars * areaPerBar const rho = steelArea / Ag if (rho < 0.005 || rho > 0.08) { return error("ACI 318 sections 10.6.1 and 10.3.1.2 require ρ to be between 0.5% and 8%.") } const scale = 100 / Math.max(b, H) // Draw the column in a box 100px wide. // We'll create an SVG. First write the input data. let svg = ` Concrete Column fc′ fy ACI 318- ${isCircle ? "Diameter" : (isOctagon ? "Width across flats" : "Width")} ${String(fPrimeC)} ${String(fy)} 14 ${b} ksi ksi inches inches ` if (isRectangle) { // Write the depth svg += `Depth${H}inches` } // Write bar size, bar pattern, cover, and tie size const yBarSize = isRectangle ? 140 : 120 svg += `Bar size${barSize}` svg += `${isNaN(barPattern) ? "Bar pattern" : "# of bars"}${barPattern}` svg += `Clear cover${cover}inches` svg += `${gotSpirals ? "Spiral" : "Tie"} size${tieSize}` // Draw the column cross-section if (isRectangle) { svg += `\n` } else if (isCircle) { svg += `\n` } else { // An octagon const angleIncrement = 2 * Math.PI / 16 const cx = 210 + b / 2 * scale const cy = 20 + b / 2 * scale const R = (b / 2 / Math.cos(angleIncrement)) * scale svg += `\n` } // Draw the ties/spirals if (isCircle || isOctagon || gotSpirals) { svg += `\n\n` } else { svg += `\n \n` } // Draw the vertical bars const brp = (barRadius * scale).toFixed(2) // bar radius in px let topSpacing = 0 let sideSpacing = 0 if (isCircle || isOctagon || gotSpirals) { const angleIncrement = 2 * Math.PI / numBars const cx = 210 + b / 2 * scale const cy = 20 + b / 2 * scale const R = (b / 2 - cover - tieDia - barRadius) * scale - 1 const adjustment = numBars === 6 ? 0 : Math.PI / (numBars === 4 ? 4 : 2) for (let i = 1; i <= numBars; i++) { const theta = (i - 1) * angleIncrement + adjustment const xbar = (cx + Math.cos(theta) * R).toFixed(2) const ybar = (cy - Math.sin(theta) * R).toFixed(2) svg += `\n` } } else { // Rectangular column const margin = ((1 - 0.7071) * tieIR - (1 - 0.7071) * barRadius > 0) ? cover + tieDia + (1 - 0.7071) * tieIR - (1 - 0.7071) * barRadius + barRadius : cover + tieDia + barRadius + 0.0625 topSpacing = (b - 2 * margin) / (numTopBars - 1) sideSpacing = (H - 2 * margin) / (numSideBars - 1) for (let i = 0; i < numTopBars; i++) { svg += `\n` svg += `\n` } for (let i = 1; i < numSideBars - 1; i++) { svg += `\n` svg += `\n` } } // Check if we want to draw the centerlines if (isRectangle && (b !== H || numTopBars !== numSideBars)) { svg += `\n` svg += `\n` // Write x's on the horizontal axis svg += `x\n` svg += `x\n` } // Write in the Ag, As, and rho values svg += `Ag = ${Ag.toFixed(1)} in²\n` svg += `As = ${steelArea.toFixed(2)} in²\n` svg += `ρ = ${(rho * 100).toFixed(2)}%\n` // Write in the bar spacing if (isCircle || isOctagon || gotSpirals) { const spacing = (b - 2 * cover - 2 * tieDia - barDia) * Math.PI / numBars svg += `bar spacing = ${spacing.toFixed(2)}″\n` } else { svg += `bar spacing = ${topSpacing.toFixed(2)}″ × ${sideSpacing.toFixed(2)}″ c/c\n` } if (rho < 0.01 || rho > 0.06) { svg += `Check if ACI 318 section 18.7.4 allows this ρ value.` } // Draw the x & y axis for the diagram const baseX = 450 const baseY = 180 svg += `\n` svg += `\n` // øPn label on the y-axis svg += `ϕPn (kips)\n` // 0 at the origin svg += `0` // øMn label on the x-axis svg += `ϕMn (kip·ft)\n` // Do the math to find the curve points let [Px, Mx, Mxb, Pmax, MxMax, PatMxMax, MxAtPmax] = curveArray(fPrimeC, fy, b, H, Ag, areaPerBar, barRadius, barPattern, cover, tieDia) let needTwoCurves = false let Py =0 let My = 0 let Myb = 0 let MyMax = 0 let MyatPmax = 0 let PatMyMax = 0 let MyAtPmax = 0 if (H !== 0 && (b !== H || numTopBars !== numSideBars)) { needTwoCurves = true; if (isNaN(barPattern)) { // The bar pattern is written as `m x n`, where m and n are integers. // So we reverse the order to look at moments about the y axis. const parts = barPattern.match(rebarPattern) barPattern = parts[2] + " x " + parts[1] } [Py, My, Myb, Pmax, MyMax, PatMyMax, MyAtPmax] = curveArray(fPrimeC, fy, H, b, Ag, areaPerBar, barRadius, barPattern, cover, tieDia) } // find scales and find the max M const vertScale = 170 / (1.05 * Pmax) const topOfGraph = baseY - vertScale * Pmax let Mb = 0 let Mmax = 0 let PatMmax = 0 let MatPmax = 0 let biggerMAxis = "" if (MxMax > MyMax) { Mmax = MxMax PatMmax = PatMxMax Mb = Mxb MatPmax = MxAtPmax biggerMAxis = "x" } else { Mmax = MyMax PatMmax = PatMyMax Mb = Myb MatPmax = MyAtPmax biggerMAxis = "y" } let horizScale = 200 / (1.05 * Mmax) svg += ` Pmax ? Pmax : Px[i])).toFixed(2) } svg += path + `"/>\n` // Write Mpure let xPos = baseX + horizScale * Mb let align = (Mb > Mx[Mx.length - 2]) ? "start" : "end" svg += `${Math.round(Mb / 12)}\n` if (needTwoCurves) { svg += ` Pmax ? Pmax : Py[i])).toFixed(2) } svg += path + `"/>\n` } // Pmax svg += `${Math.round(Pmax)} kips\n` // PatMmax & Mmax xPos = baseX + horizScale * Mmax + 10 const sPatMmax = Math.round(PatMmax) const sMmax = Math.round(Mmax / 12) svg += `ϕPn = ${sPatMmax} kips\n` svg += `ϕMn = ${sMmax} kip·ft\n` if (needTwoCurves) { svg += `(${biggerMAxis} axis)\n` } // M at Pmax svg += `ϕMn = ${Math.round(MatPmax / 12)} kip·ft\n` // Draw the background lines const iVert = backgroundLineSpacing(Pmax) const iHoriz = backgroundLineSpacing(Mmax / 12) const endX = baseX + 200 horizScale = horizScale * 12 for (let i = 1; i < 20; i++) { if (baseY - i * iVert * vertScale < topOfGraph) { break } svg += `\n` svg += `${Math.round(i * iVert)}\n` } for (let i = 1; i < 20; i++) { if (i * iHoriz * horizScale > 200) { break } svg += `\n` svg += `${Math.round(i * iHoriz)}\n` } svg = "" // We want to display an element, not an element. // Start by escaping all the characters that are not allowed in a data-uri. svg = svg.replace(/"/g, `'`) // Single quotation marks don't need to be escaped. const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g const uri = svg.replace(symbols, encodeURIComponent) // Finally, return the . return html ` Concrete Column Interaction Diagram

` }