2b:null 2c:["$","title",null,{"children":"Untitled | Allen Q | Observable"}] 31:T2c62,const sfSankeyData = { nodes: [ // ========================================================== // STAGE 0 // ========================================================== { id: "start", label: "Determine\nSignificant Figures", stage: "start", type: "root", title: "Determine Significant Figures", description: "Start by deciding whether the quantity is measured data or an exact number.", detail: "Significant figures communicate the precision of measured data. Certain digits plus one estimated digit may be reported." }, // ========================================================== // STAGE 1 // ========================================================== { id: "measured", label: "Measured data", stage: "data", type: "decision", title: "Measured data", description: "Significant-figure rules apply.", detail: "The reported digits communicate the precision of the measurement. The rightmost significant figure is the estimated digit." }, { id: "exact", label: "Exact number", stage: "data", type: "exact", title: "Exact number", description: "SF restrictions do not apply.", detail: "Counted quantities, pure numbers, and exactly defined conversion factors are treated as exact." }, // ========================================================== // STAGE 2 // ========================================================== { id: "nonzero", label: "Nonzero\ndigit", stage: "digit", type: "rule", rule: "Rule 2", title: "Rule 2 · Nonzero digits", description: "All nonzero digits are significant.", detail: "Digits 1 through 9 always count as significant figures in measured data." }, { id: "zero", label: "Zero", stage: "digit", type: "decision", title: "The digit is zero", description: "Its significance depends on its position.", detail: "Zeros may be significant or may only serve as placeholders. Their location in the number determines which case applies." }, // ========================================================== // STAGE 3 // ZERO CASES // ========================================================== { id: "leading", label: "Leading zero", stage: "zeroCase", type: "placeholder", title: "Leading zeros", description: "Not significant.", detail: "Leading zeros are placeholders used to locate the decimal point." }, { id: "between", label: "Between\nsignificant digits", stage: "zeroCase", type: "rule", rule: "Rule 3", title: "Rule 3 · Zeros between significant figures", description: "These zeros are significant.", detail: "A zero located between significant digits is part of the reported measurement." }, { id: "trailingDecimal", label: "Ending zero\nright of decimal", stage: "zeroCase", type: "rule", rule: "Rule 4", title: "Rule 4 · Ending decimal zeros", description: "These zeros are significant.", detail: "Ending zeros to the right of the decimal point communicate measured precision." }, { id: "trailingWhole", label: "Ending zero\nwithout decimal", stage: "zeroCase", type: "warning", title: "Ambiguous trailing zero", description: "The intended precision may be unclear.", detail: "For a value such as 1500 m, the notation alone does not reveal whether the estimated digit is in the hundreds, tens, or ones place." }, // ========================================================== // STAGE 4 // RESULTS // ========================================================== { id: "significant", label: "SIGNIFICANT", stage: "result", type: "significant", title: "Significant digit", description: "Count this digit as a significant figure.", detail: "If it is the rightmost significant digit, it represents the estimated digit of the measured value." }, { id: "placeholder", label: "PLACEHOLDER", stage: "result", type: "placeholder", title: "Placeholder", description: "Do not count this zero as a significant figure.", detail: "Its purpose is to establish the position of the decimal point." }, { id: "ambiguous", label: "AMBIGUOUS", stage: "result", type: "warning", title: "Ambiguous precision", description: "Use scientific notation.", detail: "Scientific notation makes the intended number of significant figures explicit." }, { id: "notApplicable", label: "SF NOT\nAPPLICABLE", stage: "result", type: "exact", title: "Significant figures not applicable", description: "The value is exact.", detail: "Exact quantities do not limit the precision of calculations in the same way measured data do." }, // ========================================================== // STAGE 5 // EXAMPLES // ========================================================== { id: "example3244", label: "324.4 m\n4 SF", stage: "example", type: "example", title: "324.4 m", description: "4 significant figures.", detail: "Every digit is nonzero, so all four digits are significant." }, { id: "example0040", label: "0.040 m\n2 SF", stage: "example", type: "example", title: "0.040 m", description: "2 significant figures.", detail: "The zeros before 4 are placeholders. The final zero is significant." }, { id: "example1003", label: "100.3 mm\n4 SF", stage: "example", type: "example", title: "100.3 mm", description: "4 significant figures.", detail: "Both zeros are between significant digits." }, { id: "example6500", label: "6.500 L\n4 SF", stage: "example", type: "example", title: "6.500 L", description: "4 significant figures.", detail: "The two ending zeros occur to the right of the decimal point and are significant." }, { id: "example1500", label: "1500 m\n?", stage: "example", type: "exampleWarning", title: "1500 m", description: "Ambiguous number of significant figures.", detail: "The notation does not identify the place value of the estimated digit." }, { id: "example15", label: "1.5 × 10³\n2 SF", stage: "example", type: "example", title: "1.5 × 10³ m", description: "2 significant figures.", detail: "Scientific notation explicitly shows two significant digits." }, { id: "example150", label: "1.50 × 10³\n3 SF", stage: "example", type: "example", title: "1.50 × 10³ m", description: "3 significant figures.", detail: "The ending zero in the coefficient communicates additional precision." }, { id: "example1500s", label: "1.500 × 10³\n4 SF", stage: "example", type: "example", title: "1.500 × 10³ m", description: "4 significant figures.", detail: "Both ending zeros in the coefficient are significant." }, { id: "exactExamples", label: "2 people\n1 dozen\n60 s / 1 min", stage: "example", type: "exampleExact", title: "Exact quantities", description: "SF restrictions do not apply.", detail: "Counted quantities, pure numbers, and exactly defined ratios are exact." } ], // ============================================================ // LINKS // // Values are structural weights only. // They do NOT represent frequency or probability. // ============================================================ links: [ // Data type { source: "start", target: "measured", value: 8, branch: "measured" }, { source: "start", target: "exact", value: 1.7, branch: "exact" }, // Exact { source: "exact", target: "notApplicable", value: 1.7, branch: "exact" }, { source: "notApplicable", target: "exactExamples", value: 1.7, branch: "exact" }, // Measured { source: "measured", target: "nonzero", value: 2.0, branch: "nonzero" }, { source: "measured", target: "zero", value: 6.0, branch: "zero" }, // Nonzero { source: "nonzero", target: "significant", value: 2.0, branch: "nonzero" }, // Zero cases { source: "zero", target: "leading", value: 1.3, branch: "leading" }, { source: "zero", target: "between", value: 1.5, branch: "between" }, { source: "zero", target: "trailingDecimal", value: 1.7, branch: "trailingDecimal" }, { source: "zero", target: "trailingWhole", value: 1.5, branch: "ambiguous" }, // Zero results { source: "leading", target: "placeholder", value: 1.3, branch: "leading" }, { source: "between", target: "significant", value: 1.5, branch: "between" }, { source: "trailingDecimal", target: "significant", value: 1.7, branch: "trailingDecimal" }, { source: "trailingWhole", target: "ambiguous", value: 1.5, branch: "ambiguous" }, // Examples from significant { source: "significant", target: "example3244", value: 1.0, branch: "nonzero" }, { source: "significant", target: "example1003", value: 1.0, branch: "between" }, { source: "significant", target: "example6500", value: 1.0, branch: "trailingDecimal" }, // Placeholder example { source: "placeholder", target: "example0040", value: 1.3, branch: "leading" }, // Ambiguous { source: "ambiguous", target: "example1500", value: 0.5, branch: "ambiguous" }, { source: "ambiguous", target: "example15", value: 0.33, branch: "ambiguous" }, { source: "ambiguous", target: "example150", value: 0.33, branch: "ambiguous" }, { source: "ambiguous", target: "example1500s", value: 0.34, branch: "ambiguous" } ] };32:T28a7,const sfModel = (() => { // ============================================================ // INPUT // ============================================================ const rawInput = String(sfValue ?? "") .trim(); const isExact = sfDataType === "Exact number"; // ============================================================ // NORMALIZATION // ============================================================ const normalized = rawInput .replace(/,/g, "") .replace(/\s+/g, ""); // ============================================================ // SCIENTIFIC NOTATION // // 1.50e3 // 1.500E3 // ============================================================ const scientificMatch = normalized.match( /^([+-]?(?:\d+(?:\.\d*)?|\.\d+))[eE]([+-]?\d+)$/ ); let mantissa = normalized; let exponent = 0; let scientific = false; if (scientificMatch) { scientific = true; mantissa = scientificMatch[1]; exponent = Number( scientificMatch[2] ); } // ============================================================ // VALIDATION // ============================================================ const valid = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/ .test(mantissa); if (!valid) { return { valid: false, message: "Enter a number such as 324.4, 0.0040500, 1500, or 1.500e3." }; } // ============================================================ // SIGN // ============================================================ let sign = ""; if ( mantissa.startsWith("+") || mantissa.startsWith("-") ) { sign = mantissa[0]; mantissa = mantissa.slice(1); } const hasDecimal = mantissa.includes("."); const parts = mantissa.split("."); const integerPart = parts[0] || "0"; // ============================================================ // CHARACTER RECORDS // ============================================================ const chars = []; let afterDecimal = false; let digitIndex = 0; for (const char of mantissa) { if (char === ".") { chars.push({ char: ".", kind: "decimal" }); afterDecimal = true; continue; } chars.push({ char, kind: "unclassified", significant: false, estimated: false, side: afterDecimal ? "decimal" : "integer", digitIndex, reason: "" }); digitIndex++; } const digits = chars.filter( d => d.kind !== "decimal" ); // ============================================================ // EXACT NUMBER // ============================================================ if (isExact) { for (const d of digits) { d.kind = "exact"; d.reason = "This is an exact number. Significant-figure restrictions do not apply."; } return { valid: true, exact: true, rawInput, mantissa, exponent, scientific, chars, ambiguous: false, sfCount: null, estimatedDigit: null, estimatedPlace: null }; } // ============================================================ // FIRST NONZERO DIGIT // ============================================================ const firstNonzero = digits.findIndex( d => d.char !== "0" ); // ============================================================ // SPECIAL CASE: ZERO // ============================================================ if (firstNonzero === -1) { if (!hasDecimal) { for (const d of digits) { d.kind = "ambiguous"; d.reason = "The precision of this zero-only measurement is not clear from this notation."; } return { valid: true, exact: false, rawInput, mantissa, exponent, scientific, chars, ambiguous: true, sfCount: null, estimatedDigit: null, estimatedPlace: null }; } // Example: 0.00 // // Initial zero before decimal = placeholder. // Zeros after decimal represent reported precision. for (const d of digits) { if (d.side === "integer") { d.kind = "placeholder"; d.reason = "This zero locates the decimal point and is not significant."; } else { d.kind = "significant"; d.significant = true; d.reason = "This zero is part of the reported decimal precision."; } } } // ============================================================ // GENERAL CLASSIFICATION // ============================================================ else { for ( let i = 0; i < digits.length; i++ ) { const d = digits[i]; // -------------------------------------------------------- // LEADING ZEROS // -------------------------------------------------------- if (i < firstNonzero) { d.kind = "placeholder"; d.reason = "Leading zeros only locate the decimal point. They are not significant."; continue; } // -------------------------------------------------------- // RULE 2 // NONZERO DIGITS // -------------------------------------------------------- if (d.char !== "0") { d.kind = "significant"; d.significant = true; d.reason = "All nonzero digits are significant. Rule 2."; continue; } // -------------------------------------------------------- // IS THERE A NONZERO DIGIT AFTER THIS ZERO? // -------------------------------------------------------- const laterNonzero = digits .slice(i + 1) .some( next => next.char !== "0" ); // -------------------------------------------------------- // RULE 3 // CAPTIVE ZEROS // -------------------------------------------------------- if (laterNonzero) { d.kind = "significant"; d.significant = true; d.reason = "This zero lies between significant figures, so it is significant. Rule 3."; continue; } // -------------------------------------------------------- // RULE 4 // TRAILING ZEROS WHEN A DECIMAL POINT IS SHOWN // -------------------------------------------------------- if (hasDecimal) { d.kind = "significant"; d.significant = true; d.reason = "This ending zero is reported with a decimal point, so it is significant. Rule 4."; continue; } // -------------------------------------------------------- // TRAILING ZEROS WITHOUT DECIMAL // // 1500 // -------------------------------------------------------- d.kind = "ambiguous"; d.reason = "This trailing zero is ambiguous. The notation does not tell us whether it represents measured precision. Use scientific notation to remove the ambiguity."; } } // ============================================================ // AMBIGUITY // ============================================================ const ambiguous = digits.some( d => d.kind === "ambiguous" ); // ============================================================ // DEFINITE SIGNIFICANT DIGITS // ============================================================ const significantDigits = digits.filter( d => d.significant ); // If notation is ambiguous, do not state a definitive SF count. const sfCount = ambiguous ? null : significantDigits.length; const minimumSF = significantDigits.length; // ============================================================ // ESTIMATED DIGIT // // The estimated digit can only be identified if // the reported precision is unambiguous. // ============================================================ let estimatedDigit = null; if ( !ambiguous && significantDigits.length ) { estimatedDigit = significantDigits[ significantDigits.length - 1 ]; estimatedDigit.estimated = true; } // ============================================================ // ESTIMATED PLACE VALUE // // Includes scientific notation exponent. // // 1.500e3 // // last digit in coefficient = 10^-3 // multiplied by 10^3 // actual estimated place = 10^0 = ones // ============================================================ let estimatedPlace = null; let estimatedPower = null; if (estimatedDigit) { const index = digits.indexOf( estimatedDigit ); const integerDigitCount = integerPart.length; estimatedPower = integerDigitCount - 1 - index + exponent; const placeNames = { 6: "millions", 5: "hundred-thousands", 4: "ten-thousands", 3: "thousands", 2: "hundreds", 1: "tens", 0: "ones", "-1": "tenths", "-2": "hundredths", "-3": "thousandths", "-4": "ten-thousandths", "-5": "hundred-thousandths", "-6": "millionths" }; estimatedPlace = placeNames[estimatedPower] ?? `10^${estimatedPower} place`; } // ============================================================ // RESULT // ============================================================ return { valid: true, exact: false, rawInput, sign, mantissa, exponent, scientific, hasDecimal, chars, digits, significantDigits, sfCount, minimumSF, ambiguous, estimatedDigit, estimatedPower, estimatedPlace }; })();33:T380e,const significantFigureScanner = (() => { const model = sfModel; // ============================================================ // INVALID INPUT // ============================================================ if (!model.valid) { const warning = html`

${model.message}

`; return warning; } // ============================================================ // COLORS // ============================================================ const colors = { significant: "#087a98", estimated: "#e58a14", placeholder: "#9ca3af", ambiguous: "#b45309", exact: "#3d8f73", decimal: "#475569" }; // ============================================================ // SELECTED DIGIT // ============================================================ let selected = model.exact ? model.chars.find( d => d.kind === "exact" ) : model.estimatedDigit ?? model.chars.find( d => d.kind !== "decimal" ); // ============================================================ // CONTAINER // ============================================================ const container = html`

Significant Figure Scanner

Click a digit to discover why it is significant, a placeholder, estimated, or ambiguous.

`; const numberHost = container.querySelector( ".number" ); const scientificHost = container.querySelector( ".scientific" ); const summaryHost = container.querySelector( ".summary" ); const detailsHost = container.querySelector( ".details" ); const legendHost = container.querySelector( ".legend" ); // ============================================================ // SIGN // ============================================================ if (model.sign) { const signEl = document.createElement( "span" ); signEl.textContent = model.sign; signEl.style.fontSize = "36px"; signEl.style.fontWeight = "700"; signEl.style.paddingBottom = "17px"; numberHost.append( signEl ); } // ============================================================ // DIGITS // ============================================================ const digitElements = []; for ( const item of model.chars ) { // ---------------------------------------------------------- // DECIMAL // ---------------------------------------------------------- if ( item.kind === "decimal" ) { const point = document.createElement( "span" ); point.textContent = "."; point.style.fontSize = "36px"; point.style.fontWeight = "700"; point.style.color = colors.decimal; point.style.padding = "0 1px 17px"; numberHost.append( point ); continue; } // ---------------------------------------------------------- // DIGIT BUTTON // ---------------------------------------------------------- const button = document.createElement( "button" ); button.type = "button"; button.style.width = "58px"; button.style.height = "70px"; button.style.position = "relative"; button.style.display = "flex"; button.style.alignItems = "center"; button.style.justifyContent = "center"; button.style.border = "2px solid transparent"; button.style.borderRadius = "10px"; button.style.background = "#ffffff"; button.style.fontSize = "34px"; button.style.fontWeight = "700"; button.style.cursor = "pointer"; button.style.transition = "120ms ease"; button.textContent = item.char; const color = item.estimated ? colors.estimated : colors[item.kind] ?? "#334155"; button.style.color = color; // ---------------------------------------------------------- // ESTIMATED-DIGIT UNDERLINE // ---------------------------------------------------------- if (item.estimated) { const underline = document.createElement( "span" ); underline.style.position = "absolute"; underline.style.left = "13px"; underline.style.right = "13px"; underline.style.bottom = "8px"; underline.style.height = "3px"; underline.style.borderRadius = "4px"; underline.style.background = colors.estimated; button.append( underline ); } button.addEventListener( "click", () => { selected = item; updateSelection(); updateDetails(); } ); numberHost.append( button ); digitElements.push({ item, button }); } // ============================================================ // SCIENTIFIC NOTATION // ============================================================ if (model.scientific) { scientificHost.innerHTML = ` Coefficient: ${model.sign}${model.mantissa} × 10^{${model.exponent}}
Significant figures are counted in the coefficient. The exponent changes place value, not the number of SF. `; } // ============================================================ // SUMMARY CARD HELPER // ============================================================ function summaryCard( title, value, color ) { return `

${title}

${value}

`; } // ============================================================ // SUMMARY // ============================================================ if (model.exact) { summaryHost.innerHTML = summaryCard( "DATA TYPE", "EXACT", colors.exact ) + summaryCard( "SIGNIFICANT FIGURES", "Not applicable", colors.exact ); } else if (model.ambiguous) { summaryHost.innerHTML = summaryCard( "SIGNIFICANT FIGURES", "Ambiguous", colors.ambiguous ) + summaryCard( "MINIMUM CLEAR SF", model.minimumSF, "#087a98" ) + summaryCard( "ESTIMATED DIGIT", "Cannot be determined", colors.ambiguous ); } else { summaryHost.innerHTML = summaryCard( "SIGNIFICANT FIGURES", model.sfCount, "#087a98" ) + summaryCard( "ESTIMATED PLACE", model.estimatedPlace, colors.estimated ) + summaryCard( "NOTATION", "Unambiguous", colors.exact ); } // ============================================================ // SELECTION // ============================================================ function updateSelection() { for ( const entry of digitElements ) { const active = entry.item === selected; const color = entry.item.estimated ? colors.estimated : colors[ entry.item.kind ] ?? "#64748b"; entry.button.style.borderColor = active ? color : "transparent"; entry.button.style.transform = active ? "translateY(-4px)" : "translateY(0)"; entry.button.style.boxShadow = active ? "0 5px 14px rgba(15,23,42,.12)" : "none"; } } // ============================================================ // DETAILS // ============================================================ function updateDetails() { if (!selected) { detailsHost.textContent = "Select a digit."; return; } if (model.exact) { detailsHost.innerHTML = ` Exact number

This value is not measured data. Significant-figure restrictions do not apply. `; return; } let title = "Digit"; if (selected.estimated) { title = "Estimated digit"; } else if ( selected.kind === "significant" ) { title = "Significant digit"; } else if ( selected.kind === "placeholder" ) { title = "Placeholder zero"; } else if ( selected.kind === "ambiguous" ) { title = "Ambiguous trailing zero"; } const color = selected.estimated ? colors.estimated : colors[selected.kind] ?? "#334155"; detailsHost.innerHTML = `

${selected.char} ${title}

${selected.reason} ${ selected.estimated ? `

This is the rightmost significant figure . In measured data, it represents the estimated digit.

` : "" } ${ selected.kind === "ambiguous" ? `

Example: 1.5 × 10³ has 2 SF, 1.50 × 10³ has 3 SF, and 1.500 × 10³ has 4 SF.

` : "" } `; } // ============================================================ // LEGEND // ============================================================ function legendItem( color, text ) { return ` ${text} `; } legendHost.innerHTML = legendItem( colors.significant, "Significant" ) + legendItem( colors.estimated, "Estimated" ) + legendItem( colors.placeholder, "Placeholder" ) + legendItem( colors.ambiguous, "Ambiguous" ) + legendItem( colors.exact, "Exact" ); // ============================================================ // INITIAL STATE // ============================================================ updateSelection(); updateDetails(); return container; })(); display(significantFigureScanner);34:T4f64,const sfRulesSankey = (() => { // ============================================================ // COPY DATA // ============================================================ const nodes = sfSankeyData.nodes.map( d => ({ ...d }) ); const links = sfSankeyData.links.map( d => ({ ...d }) ); // ============================================================ // DIMENSIONS // ============================================================ const W = Math.max( 1100, width ); const H = 720; const margin = { top: 55, right: 24, bottom: 30, left: 24 }; // ============================================================ // COLORS // ============================================================ const colors = { root: "#075985", decision: "#0e7490", rule: "#287f99", significant: "#318c72", placeholder: "#94a3b8", warning: "#e19032", exact: "#5977b7", example: "#eaf5f8", exampleWarning: "#fff1df", exampleExact: "#eef2ff", text: "#173342" }; const branchColors = { measured: "#0e7490", exact: "#5977b7", nonzero: "#318c72", zero: "#287f99", leading: "#94a3b8", between: "#8a68ad", trailingDecimal: "#d28132", ambiguous: "#d95f3f" }; // ============================================================ // SANKEY GENERATOR // ============================================================ const sankey = d3Sankey .sankey() .nodeId( d => d.id ) .nodeWidth( 18 ) .nodePadding( 18 ) .nodeAlign( d3Sankey.sankeyJustify ) .extent([ [ margin.left, margin.top ], [ W - margin.right, H - margin.bottom ] ]); const graph = sankey({ nodes, links }); // ============================================================ // CONTAINER // ============================================================ const container = html`

How to Determine Significant Figures

Follow the flow from left to right. Hover over a path to isolate it. Click a node or flow to keep it highlighted.

`; const chartHost = container.querySelector( ".sankey-chart" ); const details = container.querySelector( ".sankey-details" ); const legend = container.querySelector( ".sankey-legend" ); const tooltip = container.querySelector( ".sankey-tooltip" ); // ============================================================ // SVG // ============================================================ const svg = d3 .create("svg") .attr( "viewBox", [0, 0, W, H] ) .style( "display", "block" ) .style( "width", "100%" ) .style( "height", "auto" ); // ============================================================ // COLUMN HEADERS // ============================================================ const headers = [ { x: 0.03, text: "START" }, { x: 0.20, text: "DATA TYPE" }, { x: 0.37, text: "DIGIT" }, { x: 0.55, text: "POSITION / RULE" }, { x: 0.72, text: "RESULT" }, { x: 0.89, text: "EXAMPLE" } ]; svg .append("g") .selectAll("text") .data( headers ) .join("text") .attr( "x", d => W * d.x ) .attr( "y", 27 ) .attr( "font-size", 10 ) .attr( "font-weight", 700 ) .attr( "letter-spacing", ".08em" ) .attr( "fill", "#78909c" ) .text( d => d.text ); // ============================================================ // LINK GRADIENTS // ============================================================ const defs = svg.append("defs"); graph.links.forEach( (d, i) => { const gradient = defs .append("linearGradient") .attr( "id", `sf-sankey-gradient-${i}` ) .attr( "gradientUnits", "userSpaceOnUse" ) .attr( "x1", d.source.x1 ) .attr( "x2", d.target.x0 ); const branchColor = branchColors[d.branch] ?? "#94a3b8"; gradient .append("stop") .attr( "offset", "0%" ) .attr( "stop-color", branchColor ) .attr( "stop-opacity", 0.78 ); gradient .append("stop") .attr( "offset", "100%" ) .attr( "stop-color", branchColor ) .attr( "stop-opacity", 0.36 ); } ); // ============================================================ // LINKS // ============================================================ const link = svg .append("g") .attr( "fill", "none" ) .selectAll("path") .data( graph.links ) .join("path") .attr( "d", d3Sankey .sankeyLinkHorizontal() ) .attr( "stroke", (d, i) => `url(#sf-sankey-gradient-${i})` ) .attr( "stroke-width", d => Math.max( 1, d.width ) ) .attr( "stroke-opacity", 0.78 ) .style( "cursor", "pointer" ); // ============================================================ // NODES // ============================================================ const node = svg .append("g") .selectAll("g") .data( graph.nodes ) .join("g") .style( "cursor", "pointer" ); node .append("rect") .attr( "x", d => d.x0 ) .attr( "y", d => d.y0 ) .attr( "width", d => d.x1 - d.x0 ) .attr( "height", d => Math.max( 3, d.y1 - d.y0 ) ) .attr( "rx", 4 ) .attr( "fill", d => colors[d.type] ?? "#64748b" ) .attr( "stroke", "#ffffff" ) .attr( "stroke-width", 1.5 ); // ============================================================ // LABELS // ============================================================ const labels = svg .append("g") .selectAll("g") .data( graph.nodes ) .join("g"); labels.each( function(d) { const group = d3.select(this); const rightSide = d.x0 > W * 0.78; const x = rightSide ? d.x0 - 7 : d.x1 + 7; const anchor = rightSide ? "end" : "start"; const lines = d.label.split("\n"); const centerY = ( d.y0 + d.y1 ) / 2; const lineHeight = 12; const startY = centerY - ( lines.length - 1 ) * lineHeight / 2; lines.forEach( (lineText, i) => { group .append("text") .attr( "x", x ) .attr( "y", startY + i * lineHeight ) .attr( "text-anchor", anchor ) .attr( "dominant-baseline", "middle" ) .attr( "font-size", d.type.startsWith("example") ? 9.5 : 10.5 ) .attr( "font-weight", d.type === "root" || d.type === "significant" || d.type === "warning" ? 700 : 600 ) .attr( "fill", "#334155" ) .style( "pointer-events", "none" ) .text( lineText ); } ); } ); // ============================================================ // INTERACTION STATE // ============================================================ let locked = false; let selected = graph.nodes.find( d => d.id === "start" ); // ============================================================ // RELATED LINKS / NODES // ============================================================ function connectedNodes( target ) { const ids = new Set([ target.id ]); for ( const l of graph.links ) { if ( l.source.id === target.id ) { ids.add( l.target.id ); } if ( l.target.id === target.id ) { ids.add( l.source.id ); } } return ids; } function highlightNode( d ) { const active = connectedNodes(d); node .transition() .duration(140) .style( "opacity", n => active.has(n.id) ? 1 : 0.14 ); labels .transition() .duration(140) .style( "opacity", n => active.has(n.id) ? 1 : 0.14 ); link .transition() .duration(140) .attr( "stroke-opacity", l => ( l.source.id === d.id || l.target.id === d.id ) ? 0.95 : 0.07 ); } function highlightLink( d ) { const active = new Set([ d.source.id, d.target.id ]); node .transition() .duration(140) .style( "opacity", n => active.has(n.id) ? 1 : 0.12 ); labels .transition() .duration(140) .style( "opacity", n => active.has(n.id) ? 1 : 0.12 ); link .transition() .duration(140) .attr( "stroke-opacity", l => l === d ? 1 : 0.05 ); } function resetHighlight() { node .transition() .duration(140) .style( "opacity", 1 ); labels .transition() .duration(140) .style( "opacity", 1 ); link .transition() .duration(140) .attr( "stroke-opacity", 0.78 ); } // ============================================================ // DETAILS // ============================================================ function updateDetails( d ) { let color = colors[d.type] ?? "#075985"; if ( d.type.startsWith( "example" ) ) { color = "#287f99"; } details.innerHTML = ` ${ d.rule ? `

${d.rule}

` : "" }

${d.title}

${d.description}

${d.detail}

`; } // ============================================================ // TOOLTIP // ============================================================ function showTooltip( event, title, description ) { tooltip.innerHTML = ` ${title}
${description} `; const [ px, py ] = d3.pointer( event, container ); tooltip.style.left = `${px + 16}px`; tooltip.style.top = `${py + 10}px`; tooltip.style.opacity = 1; } // ============================================================ // NODE EVENTS // ============================================================ node .on( "mouseenter", function( event, d ) { showTooltip( event, d.title, d.description ); if ( !locked ) { selected = d; highlightNode( d ); updateDetails( d ); } } ) .on( "mousemove", function( event, d ) { showTooltip( event, d.title, d.description ); } ) .on( "mouseleave", function() { tooltip.style.opacity = 0; if ( !locked ) { selected = graph.nodes.find( d => d.id === "start" ); resetHighlight(); updateDetails( selected ); } } ) .on( "click", function( event, d ) { event.stopPropagation(); locked = true; selected = d; highlightNode( d ); updateDetails( d ); } ); // ============================================================ // LINK EVENTS // ============================================================ link .on( "mouseenter", function( event, d ) { const title = `${d.source.title} → ${d.target.title}`; const description = `Follow this path from ${d.source.label.replaceAll("\n"," ")} to ${d.target.label.replaceAll("\n"," ")}.`; showTooltip( event, title, description ); if ( !locked ) { highlightLink( d ); } } ) .on( "mousemove", function( event, d ) { showTooltip( event, `${d.source.title} → ${d.target.title}`, d.target.description ); } ) .on( "mouseleave", function() { tooltip.style.opacity = 0; if ( !locked ) { resetHighlight(); } } ) .on( "click", function( event, d ) { event.stopPropagation(); locked = true; highlightLink( d ); updateDetails( d.target ); } ); // ============================================================ // CLICK BACKGROUND TO UNLOCK // ============================================================ svg.on( "click", () => { locked = false; selected = graph.nodes.find( d => d.id === "start" ); resetHighlight(); updateDetails( selected ); } ); // ============================================================ // LEGEND // ============================================================ legend.innerHTML = `

How to read the flow

Follow each ribbon from left to right.

Green: significant.

Gray: placeholder.

Orange: ambiguity that requires clearer notation.

Blue: exact quantities or decision steps.

Ribbon width is used only to organize the decision paths. It does not represent probability or frequency.

`; // ============================================================ // INITIAL // ============================================================ updateDetails( selected ); chartHost.append( svg.node() ); return container; })(); display(sfRulesSankey);35:[] 2f:{"id":"0ee54d26c9f3f905","slug":null,"title":"Untitled","thumbnail":"8b18f94356268990dc85ca44d9a8f0be8a0487f778acd57ee20be0c6eac6ac62","access_level":"public","create_time":"$D2026-09-02T13:55:41.114Z","update_time":"$D2026-09-02T17:01:53.279Z","view_time":null,"first_public_time":"$D2026-09-02T13:55:41.114Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024"},"version":79,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null}],"members":[{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024","role":"editor"},{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Untitled","cells":[{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Integrity in Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"const sfValue = view(\n Inputs.text({\n label: \"Number\",\n value: \"0.0040500\",\n placeholder: \"Examples: 324.4, 0.0040500, 1500, 1.500e3\"\n })\n);\n\nconst sfDataType = view(\n Inputs.select(\n [\n \"Measured data\",\n \"Exact number\"\n ],\n {\n label: \"Data type\",\n value: \"Measured data\"\n }\n )\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"# Rules for Determining Significant Figures in Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"const d3Sankey = await import(\n \"https://esm.sh/d3-sankey@0.12.3\"\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$34","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"