2b:null 2c:["$","title",null,{"children":"SI graph | Allen Q | Observable"}] 31:T285c,siData = ({ nodes: [ // ========================================================= // SI BASE UNITS // ========================================================= { id: "length", rank: 0, order: 0, kind: "base", quantity: "Length", short: "Length", quantitySymbol: "l, x, r", unit: "metre", symbol: "m", dimension: "L", expression: "m", description: "Measures distance and spatial extent." }, { id: "mass", rank: 0, order: 1, kind: "base", quantity: "Mass", short: "Mass", quantitySymbol: "m", unit: "kilogram", symbol: "kg", dimension: "M", expression: "kg", description: "Measures the amount of matter and is related to inertia." }, { id: "time", rank: 0, order: 2, kind: "base", quantity: "Time", short: "Time", quantitySymbol: "t", unit: "second", symbol: "s", dimension: "T", expression: "s", description: "Measures duration and the separation of events in time." }, { id: "current", rank: 0, order: 3, kind: "base", quantity: "Electric current", short: "Electric current", quantitySymbol: "I", unit: "ampere", symbol: "A", dimension: "I", expression: "A", description: "Measures electric current." }, { id: "temperature", rank: 0, order: 4, kind: "base", quantity: "Thermodynamic temperature", short: "Temperature", quantitySymbol: "T", unit: "kelvin", symbol: "K", dimension: "Θ", expression: "K", description: "Measures thermodynamic temperature." }, { id: "amount", rank: 0, order: 5, kind: "base", quantity: "Amount of substance", short: "Amount of substance", quantitySymbol: "n", unit: "mole", symbol: "mol", dimension: "N", expression: "mol", description: "Measures amount of substance." }, { id: "luminous", rank: 0, order: 6, kind: "base", quantity: "Luminous intensity", short: "Luminous intensity", quantitySymbol: "Iᵥ", unit: "candela", symbol: "cd", dimension: "J", expression: "cd", description: "Measures luminous intensity in a specified direction." }, // ========================================================= // GEOMETRY AND MOTION // ========================================================= { id: "area", rank: 1, kind: "derived", family: "Geometry", quantity: "Area", short: "Area", quantitySymbol: "A", unit: "square metre", symbol: "m²", dimension: "L²", expression: "m²", relation: "length × length", description: "Area is obtained by multiplying two lengths." }, { id: "volume", rank: 1, kind: "derived", family: "Geometry", quantity: "Volume", short: "Volume", quantitySymbol: "V", unit: "cubic metre", symbol: "m³", dimension: "L³", expression: "m³", relation: "length × length × length", description: "Volume is obtained by multiplying three lengths." }, { id: "speed", rank: 1, kind: "derived", family: "Motion", quantity: "Speed or velocity", short: "Speed", quantitySymbol: "v", unit: "metre per second", symbol: "m/s", dimension: "L T⁻¹", expression: "m s⁻¹", relation: "distance / time", description: "Speed measures the rate at which position changes with time." }, { id: "acceleration", rank: 1, kind: "derived", family: "Motion", quantity: "Acceleration", short: "Acceleration", quantitySymbol: "a", unit: "metre per second squared", symbol: "m/s²", dimension: "L T⁻²", expression: "m s⁻²", relation: "change in velocity / time", description: "Acceleration measures the rate at which velocity changes." }, { id: "frequency", rank: 1, kind: "named", family: "Motion", quantity: "Frequency", short: "Frequency", quantitySymbol: "f", unit: "hertz", symbol: "Hz", dimension: "T⁻¹", expression: "s⁻¹", relation: "1 Hz = 1 s⁻¹", description: "Frequency counts repeating events per unit time." }, { id: "density", rank: 1, kind: "derived", family: "Mechanics", quantity: "Mass density", short: "Density", quantitySymbol: "ρ", unit: "kilogram per cubic metre", symbol: "kg/m³", dimension: "M L⁻³", expression: "kg m⁻³", relation: "mass / volume", description: "Density is mass divided by volume." }, { id: "momentum", rank: 1, kind: "derived", family: "Mechanics", quantity: "Linear momentum", short: "Momentum", quantitySymbol: "p", unit: "kilogram metre per second", symbol: "kg·m/s", dimension: "M L T⁻¹", expression: "kg m s⁻¹", relation: "p = mv", description: "Momentum combines mass and velocity." }, { id: "force", rank: 1, kind: "named", family: "Mechanics", quantity: "Force", short: "Force", quantitySymbol: "F", unit: "newton", symbol: "N", dimension: "M L T⁻²", expression: "kg m s⁻²", relation: "1 N = 1 kg·m/s²", description: "Force combines mass and acceleration." }, { id: "pressure", rank: 1, kind: "named", family: "Mechanics", quantity: "Pressure", short: "Pressure", quantitySymbol: "p", unit: "pascal", symbol: "Pa", dimension: "M L⁻¹ T⁻²", expression: "kg m⁻¹ s⁻²", relation: "1 Pa = 1 N/m²", description: "Pressure is force distributed over an area." }, { id: "energy", rank: 1, kind: "named", family: "Mechanics", quantity: "Work or energy", short: "Energy", quantitySymbol: "E, W", unit: "joule", symbol: "J", dimension: "M L² T⁻²", expression: "kg m² s⁻²", relation: "1 J = 1 N·m", description: "The joule can be obtained from force multiplied by distance." }, { id: "power", rank: 1, kind: "named", family: "Mechanics", quantity: "Power", short: "Power", quantitySymbol: "P", unit: "watt", symbol: "W", dimension: "M L² T⁻³", expression: "kg m² s⁻³", relation: "1 W = 1 J/s", description: "Power measures the rate at which energy is transferred." }, // ========================================================= // ELECTRICITY // ========================================================= { id: "charge", rank: 2, kind: "named", family: "Electricity", quantity: "Electric charge", short: "Charge", quantitySymbol: "q", unit: "coulomb", symbol: "C", dimension: "I T", expression: "A s", relation: "1 C = 1 A·s", description: "Electric charge combines current and time." }, { id: "voltage", rank: 2, kind: "named", family: "Electricity", quantity: "Electric potential difference", short: "Voltage", quantitySymbol: "V", unit: "volt", symbol: "V", dimension: "M L² T⁻³ I⁻¹", expression: "kg m² s⁻³ A⁻¹", relation: "1 V = 1 J/C", description: "Potential difference is energy transferred per unit charge." }, { id: "resistance", rank: 2, kind: "named", family: "Electricity", quantity: "Electrical resistance", short: "Resistance", quantitySymbol: "R", unit: "ohm", symbol: "Ω", dimension: "M L² T⁻³ I⁻²", expression: "kg m² s⁻³ A⁻²", relation: "1 Ω = 1 V/A", description: "Electrical resistance relates voltage and electric current." } ], links: [ // Geometry {source: "length", target: "area", power: 2}, {source: "length", target: "volume", power: 3}, // Motion {source: "length", target: "speed", power: 1}, {source: "time", target: "speed", power: -1}, {source: "length", target: "acceleration", power: 1}, {source: "time", target: "acceleration", power: -2}, {source: "time", target: "frequency", power: -1}, // Density {source: "mass", target: "density", power: 1}, {source: "length", target: "density", power: -3}, // Momentum {source: "mass", target: "momentum", power: 1}, {source: "length", target: "momentum", power: 1}, {source: "time", target: "momentum", power: -1}, // Force {source: "mass", target: "force", power: 1}, {source: "length", target: "force", power: 1}, {source: "time", target: "force", power: -2}, // Pressure {source: "mass", target: "pressure", power: 1}, {source: "length", target: "pressure", power: -1}, {source: "time", target: "pressure", power: -2}, // Energy {source: "mass", target: "energy", power: 1}, {source: "length", target: "energy", power: 2}, {source: "time", target: "energy", power: -2}, // Power {source: "mass", target: "power", power: 1}, {source: "length", target: "power", power: 2}, {source: "time", target: "power", power: -3}, // Electric charge {source: "current", target: "charge", power: 1}, {source: "time", target: "charge", power: 1}, // Voltage {source: "mass", target: "voltage", power: 1}, {source: "length", target: "voltage", power: 2}, {source: "time", target: "voltage", power: -3}, {source: "current", target: "voltage", power: -1}, // Resistance {source: "mass", target: "resistance", power: 1}, {source: "length", target: "resistance", power: 2}, {source: "time", target: "resistance", power: -3}, {source: "current", target: "resistance", power: -2} ] })32:T4be4,siNetwork = { // ============================================================ // SETUP // ============================================================ const W = 1050; const H = 650; const levelRank = { "1. SI base units": 0, "2. Motion and mechanics": 1, "3. Extended SI": 2 }; const maxRank = levelRank[siLevel]; const nodes = siData.nodes .filter(d => d.rank <= maxRank) .map(d => ({...d})); const visibleIds = new Set(nodes.map(d => d.id)); const links = siData.links .filter(d => visibleIds.has(d.source) && visibleIds.has(d.target) ) .map(d => ({...d})); // ============================================================ // MAIN CONTAINER // ============================================================ const container = document.createElement("div"); container.style.fontFamily = "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; container.style.width = "100%"; container.style.maxWidth = "1200px"; container.style.margin = "0 auto"; // ============================================================ // INTRODUCTION // ============================================================ const intro = document.createElement("div"); intro.style.marginBottom = "14px"; const title = document.createElement("div"); title.textContent = "Building the International System of Units"; title.style.fontSize = "23px"; title.style.fontWeight = "700"; title.style.marginBottom = "4px"; const subtitle = document.createElement("div"); subtitle.style.fontSize = "14px"; subtitle.style.color = "#555"; subtitle.style.lineHeight = "1.45"; if (maxRank === 0) { subtitle.textContent = "The SI uses seven base quantities and seven corresponding base units. Select a unit to explore it."; } if (maxRank === 1) { subtitle.textContent = "In mechanics, metre, kilogram, and second combine mathematically to produce many derived units. Select any quantity to reveal its dimensional structure."; } if (maxRank === 2) { subtitle.textContent = "The same seven SI base units can be combined to describe quantities throughout physics, including mechanics and electricity."; } intro.append(title, subtitle); container.append(intro); // ============================================================ // LAYOUT // ============================================================ const layout = document.createElement("div"); layout.style.display = "grid"; layout.style.gridTemplateColumns = width > 850 ? "minmax(0, 1fr) 280px" : "1fr"; layout.style.gap = "16px"; container.append(layout); // ============================================================ // GRAPH PANEL // ============================================================ const graphPanel = document.createElement("div"); graphPanel.style.border = "1px solid #ddd"; graphPanel.style.borderRadius = "14px"; graphPanel.style.background = "white"; graphPanel.style.overflow = "hidden"; graphPanel.style.position = "relative"; layout.append(graphPanel); // ============================================================ // RESET BUTTON // ============================================================ const resetButton = document.createElement("button"); resetButton.textContent = "Show all"; Object.assign(resetButton.style, { position: "absolute", top: "12px", right: "12px", zIndex: 10, padding: "7px 12px", border: "1px solid #ccc", borderRadius: "8px", background: "white", cursor: "pointer", fontSize: "12px" }); graphPanel.append(resetButton); // ============================================================ // SVG // ============================================================ const svg = d3.select(graphPanel) .append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .style("width", "100%") .style("display", "block") .style("background", "#fbfbfc"); // ============================================================ // COLORS // ============================================================ function nodeColor(d) { if (d.kind === "base") { return "#2563eb"; } if (d.kind === "named") { return "#d97706"; } return "#0f766e"; } // ============================================================ // LINK LAYER // ============================================================ const linkLayer = svg.append("g"); const link = linkLayer .selectAll("line") .data(links) .join("line") .attr("stroke", "#b7bec8") .attr("stroke-width", 2) .attr("stroke-opacity", 0.65); // ============================================================ // EXPONENT LABELS // ============================================================ const exponentLabels = svg .append("g") .selectAll("text") .data(links) .join("text") .text(d => d.power) .attr("font-size", 12) .attr("font-weight", 700) .attr("fill", "#374151") .attr("text-anchor", "middle") .attr("opacity", 0) .style("pointer-events", "none"); // ============================================================ // NODE LAYER // ============================================================ const node = svg .append("g") .selectAll("g") .data(nodes) .join("g") .style("cursor", "pointer"); node .append("circle") .attr("r", d => d.kind === "base" ? 34 : 29) .attr("fill", d => nodeColor(d)) .attr("stroke", "white") .attr("stroke-width", 3); // Unit symbol inside node node .append("text") .text(d => d.symbol) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("fill", "white") .attr("font-size", d => d.symbol.length > 5 ? 12 : 16) .attr("font-weight", 750) .style("pointer-events", "none"); // Physical quantity underneath node .append("text") .text(d => d.short) .attr("text-anchor", "middle") .attr("y", d => d.kind === "base" ? 50 : 44) .attr("font-size", 11) .attr("font-weight", 600) .attr("fill", "#30343b") .style("pointer-events", "none"); // ============================================================ // TOOLTIP // ============================================================ const tooltip = document.createElement("div"); Object.assign(tooltip.style, { position: "absolute", display: "none", pointerEvents: "none", background: "rgba(25,25,25,0.94)", color: "white", borderRadius: "8px", padding: "8px 10px", fontSize: "12px", lineHeight: "1.4", maxWidth: "230px", zIndex: 20 }); graphPanel.append(tooltip); // ============================================================ // INFORMATION PANEL // ============================================================ const info = document.createElement("div"); Object.assign(info.style, { border: "1px solid #ddd", borderRadius: "14px", padding: "18px", background: "#fff", minHeight: "300px" }); layout.append(info); function defaultInfo() { info.innerHTML = `

Explore

Select a quantity

Click a node to see how its physical quantity, SI unit, unit symbol, and dimensions are related.

Blue = SI base unit
Green = derived unit
Orange = derived unit with a special SI name

`; } defaultInfo(); // ============================================================ // NODE INFORMATION // ============================================================ function showInfo(d) { const typeText = d.kind === "base" ? "SI BASE UNIT" : d.kind === "named" ? "NAMED SI DERIVED UNIT" : "SI DERIVED UNIT"; info.innerHTML = `

${typeText}

${d.quantity}

${d.description}

Quantity symbol

${d.quantitySymbol}

SI unit

${d.unit}

Unit symbol

${d.symbol}

Dimensions

${d.dimension}

${ d.kind !== "base" ? `

Expression in SI base units

${d.expression}

` : "" } ${ d.relation ? `

${d.relation}

` : "" }

${ d.kind === "base" ? ` Think: Which derived quantities in this diagram depend on ${d.quantity.toLowerCase()}? ` : ` Think: Can you reconstruct this dimensional expression using only the highlighted base quantities? ` }

`; } // ============================================================ // HELPERS // ============================================================ function getId(x) { return typeof x === "object" ? x.id : x; } function clearSelection() { node .transition() .duration(200) .style("opacity", 1); link .transition() .duration(200) .attr("stroke", "#b7bec8") .attr("stroke-width", 2) .attr("stroke-opacity", 0.65); exponentLabels .transition() .duration(150) .attr("opacity", 0); defaultInfo(); } // ============================================================ // SELECT NODE // ============================================================ function selectNode(selected) { const related = new Set([selected.id]); links.forEach(l => { const source = getId(l.source); const target = getId(l.target); if (source === selected.id) { related.add(target); } if (target === selected.id) { related.add(source); } }); node .transition() .duration(200) .style( "opacity", d => related.has(d.id) ? 1 : 0.12 ); link .transition() .duration(200) .attr( "stroke", l => { const source = getId(l.source); const target = getId(l.target); return ( source === selected.id || target === selected.id ) ? "#111827" : "#cbd0d8"; } ) .attr( "stroke-width", l => { const source = getId(l.source); const target = getId(l.target); return ( source === selected.id || target === selected.id ) ? 3.5 : 1.5; } ) .attr( "stroke-opacity", l => { const source = getId(l.source); const target = getId(l.target); return ( source === selected.id || target === selected.id ) ? 1 : 0.08; } ); exponentLabels .transition() .duration(150) .attr( "opacity", l => { const source = getId(l.source); const target = getId(l.target); return ( source === selected.id || target === selected.id ) ? 1 : 0; } ); showInfo(selected); } // ============================================================ // EVENTS // ============================================================ node .on("click", function(event, d) { event.stopPropagation(); selectNode(d); }) .on("mouseenter", function(event, d) { tooltip.style.display = "block"; tooltip.innerHTML = ` ${d.quantity}
${d.unit} (${d.symbol}) `; }) .on("mousemove", function(event) { const bounds = graphPanel.getBoundingClientRect(); tooltip.style.left = `${event.clientX - bounds.left + 12}px`; tooltip.style.top = `${event.clientY - bounds.top + 12}px`; }) .on("mouseleave", function() { tooltip.style.display = "none"; }); resetButton.addEventListener( "click", clearSelection ); svg.on("click", clearSelection); // ============================================================ // INITIAL POSITIONS // ============================================================ if (maxRank === 0) { nodes.forEach((d, i) => { const angle = -Math.PI / 2 + i * 2 * Math.PI / nodes.length; d.x = W / 2 + Math.cos(angle) * 220; d.y = H / 2 + Math.sin(angle) * 220; }); } else { nodes.forEach(d => { if (d.kind === "base") { d.x = 150; d.y = 70 + d.order * ((H - 140) / 6); } else { d.x = 620 + Math.random() * 180; d.y = 80 + Math.random() * (H - 160); } }); } // ============================================================ // FORCE SIMULATION // ============================================================ let simulation; if (maxRank === 0) { simulation = d3 .forceSimulation(nodes) .force( "radial", d3 .forceRadial( 220, W / 2, H / 2 ) .strength(0.9) ) .force( "charge", d3 .forceManyBody() .strength(-180) ) .force( "collision", d3 .forceCollide() .radius(62) ); } else { const baseY = d3 .scalePoint() .domain( nodes .filter(d => d.kind === "base") .sort((a, b) => a.order - b.order) .map(d => d.id) ) .range([80, H - 80]); const familyY = { Geometry: H * 0.16, Motion: H * 0.34, Mechanics: H * 0.60, Electricity: H * 0.83 }; simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id(d => d.id) .distance(150) .strength(0.45) ) .force( "charge", d3 .forceManyBody() .strength(-430) ) .force( "collision", d3 .forceCollide() .radius(d => d.kind === "base" ? 65 : 57 ) .strength(0.9) ) .force( "x", d3 .forceX(d => d.kind === "base" ? 145 : 700 ) .strength(d => d.kind === "base" ? 0.9 : 0.16 ) ) .force( "y", d3 .forceY(d => { if (d.kind === "base") { return baseY(d.id); } return familyY[d.family] ?? H / 2; }) .strength(d => d.kind === "base" ? 0.85 : 0.14 ) ); } // ============================================================ // UPDATE POSITIONS // ============================================================ simulation.on("tick", () => { nodes.forEach(d => { d.x = Math.max( 50, Math.min(W - 50, d.x) ); d.y = Math.max( 50, Math.min(H - 55, d.y) ); }); link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); exponentLabels .attr( "x", d => (d.source.x + d.target.x) / 2 ) .attr( "y", d => (d.source.y + d.target.y) / 2 - 5 ); node.attr( "transform", d => `translate(${d.x},${d.y})` ); }); // ============================================================ // DRAG // ============================================================ node.call( d3 .drag() .on("start", function(event, d) { if (!event.active) { simulation .alphaTarget(0.25) .restart(); } d.fx = d.x; d.fy = d.y; }) .on("drag", function(event, d) { d.fx = event.x; d.fy = event.y; }) .on("end", function(event, d) { if (!event.active) { simulation.alphaTarget(0); } d.fx = null; d.fy = null; }) ); // Stop the simulation if Observable destroys this cell invalidation.then(() => simulation.stop()); return container; }33:T17c0,siChordData = { // ============================================================ // ADDITIONAL EXAMPLES FOR THE FULL-SI VIEW // ============================================================ const extraNodes = [ { id: "heatCapacity", rank: 3, kind: "derived", family: "Thermal", quantity: "Heat capacity", short: "Heat capacity", quantitySymbol: "C", unit: "joule per kelvin", symbol: "J/K", dimension: "M L² T⁻² Θ⁻¹", expression: "kg m² s⁻² K⁻¹", relation: "energy / temperature", description: "Heat capacity relates a change in energy to a change in temperature." }, { id: "amountConcentration", rank: 3, kind: "derived", family: "Chemistry", quantity: "Amount concentration", short: "Concentration", quantitySymbol: "c", unit: "mole per cubic metre", symbol: "mol/m³", dimension: "N L⁻³", expression: "mol m⁻³", relation: "amount of substance / volume", description: "Amount concentration is amount of substance divided by volume." }, { id: "illuminance", rank: 3, kind: "named", family: "Light", quantity: "Illuminance", short: "Illuminance", quantitySymbol: "Eᵥ", unit: "lux", symbol: "lx", dimension: "J L⁻²", expression: "cd sr m⁻²", relation: "1 lx = 1 lm/m²", description: "Illuminance describes luminous flux received per unit area." } ]; const extraLinks = [ // Heat capacity: kg m² s⁻² K⁻¹ { source: "mass", target: "heatCapacity", power: 1 }, { source: "length", target: "heatCapacity", power: 2 }, { source: "time", target: "heatCapacity", power: -2 }, { source: "temperature", target: "heatCapacity", power: -1 }, // Amount concentration: mol m⁻³ { source: "amount", target: "amountConcentration", power: 1 }, { source: "length", target: "amountConcentration", power: -3 }, // Illuminance: cd m⁻² // steradian is dimensionless in SI dimensional analysis { source: "luminous", target: "illuminance", power: 1 }, { source: "length", target: "illuminance", power: -2 } ]; // ============================================================ // DETERMINE WHICH DERIVED UNITS TO SHOW // ============================================================ let maxRank; if (chordScope === "Mechanics: m, kg, s") { maxRank = 1; } else if ( chordScope === "Mechanics + Electricity" ) { maxRank = 2; } else { maxRank = 3; } // ============================================================ // COMBINE ORIGINAL + ADDITIONAL DATA // ============================================================ const allNodes = [ ...siData.nodes, ...(maxRank === 3 ? extraNodes : []) ]; const allLinks = [ ...siData.links, ...(maxRank === 3 ? extraLinks : []) ]; // ============================================================ // DERIVED NODES // ============================================================ const derivedNodes = allNodes.filter( d => d.kind !== "base" && d.rank <= maxRank ); const derivedIds = new Set( derivedNodes.map(d => d.id) ); // ============================================================ // LINKS USED BY THESE DERIVED QUANTITIES // ============================================================ const relationships = allLinks.filter( d => derivedIds.has(d.target) ); // ============================================================ // DETERMINE ACTIVE BASE UNITS // ============================================================ const activeBaseIds = new Set( relationships.map(d => d.source) ); const baseNodes = allNodes .filter( d => d.kind === "base" && activeBaseIds.has(d.id) ) .sort( (a, b) => a.order - b.order ); // ============================================================ // ORDER: // BASE UNITS FIRST, DERIVED UNITS SECOND // // This creates two visually recognizable regions // around the circle. // ============================================================ const groups = [ ...baseNodes, ...derivedNodes ]; // ============================================================ // LOOKUP INDEX // ============================================================ const index = new Map( groups.map( (d, i) => [d.id, i] ) ); // ============================================================ // CREATE SQUARE MATRIX // // We use |power| as the ribbon weight. // // Example: // // Force: // kg¹ m¹ s⁻² // // kg → Force = 1 // m → Force = 1 // s → Force = 2 // // ============================================================ const matrix = Array.from( {length: groups.length}, () => Array(groups.length).fill(0) ); for (const d of relationships) { const i = index.get(d.source); const j = index.get(d.target); if ( i === undefined || j === undefined ) continue; const weight = Math.abs(d.power); // Symmetric matrix so both groups // obtain an outer arc. matrix[i][j] = weight; matrix[j][i] = weight; } // ============================================================ // RELATIONSHIP LOOKUP // // Keeps the actual signed exponent. // ============================================================ const relationMap = new Map(); for (const d of relationships) { relationMap.set( `${d.source}|${d.target}`, d ); relationMap.set( `${d.target}|${d.source}`, d ); } return { groups, baseNodes, derivedNodes, relationships, matrix, relationMap }; }34:T6284,siChord = { // ============================================================ // DATA // ============================================================ const { groups, baseNodes, derivedNodes, matrix, relationMap } = siChordData; // ============================================================ // DIMENSIONS // ============================================================ const W = 1050; const H = 760; const outerRadius = 285; const innerRadius = 265; // ============================================================ // CONTAINER // ============================================================ const container = document.createElement("div"); Object.assign( container.style, { fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", width: "100%", maxWidth: "1200px", margin: "0 auto" } ); // ============================================================ // TITLE // ============================================================ const header = document.createElement("div"); header.style.marginBottom = "14px"; const title = document.createElement("div"); title.textContent = "How SI Derived Units Are Built"; Object.assign( title.style, { fontSize: "23px", fontWeight: "750", marginBottom: "5px" } ); const subtitle = document.createElement("div"); subtitle.textContent = "Each ribbon connects a derived unit to the SI base units required to construct it. Ribbon width represents the magnitude of the exponent."; Object.assign( subtitle.style, { fontSize: "14px", color: "#555", lineHeight: "1.5" } ); header.append( title, subtitle ); container.append(header); // ============================================================ // LEGEND // ============================================================ const legend = document.createElement("div"); Object.assign( legend.style, { display: "flex", flexWrap: "wrap", gap: "15px", marginBottom: "14px", fontSize: "12px", color: "#555" } ); legend.innerHTML = `

SI base unit

Derived unit

Named derived unit

Ribbon: solid blue = positive exponent

Ribbon: purple = negative exponent

`; container.append(legend); // ============================================================ // TWO-COLUMN LAYOUT // ============================================================ const layout = document.createElement("div"); Object.assign( layout.style, { display: "grid", gridTemplateColumns: width > 900 ? "minmax(0, 1fr) 290px" : "1fr", gap: "18px" } ); container.append(layout); // ============================================================ // CHART PANEL // ============================================================ const chartPanel = document.createElement("div"); Object.assign( chartPanel.style, { position: "relative", border: "1px solid #ddd", borderRadius: "14px", background: "#fbfbfc", overflow: "hidden" } ); layout.append(chartPanel); // ============================================================ // SVG // ============================================================ const svg = d3 .select(chartPanel) .append("svg") .attr( "viewBox", `0 0 ${W} ${H}` ) .style("width", "100%") .style("display", "block"); const root = svg .append("g") .attr( "transform", `translate(${W / 2},${H / 2})` ); // ============================================================ // CHORD CALCULATION // ============================================================ const chord = d3 .chord() .padAngle(0.035) .sortSubgroups( d3.descending ); const chords = chord(matrix); // ============================================================ // GENERATORS // ============================================================ const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const ribbon = d3 .ribbon() .radius(innerRadius); // ============================================================ // COLORS // ============================================================ function groupColor(d) { const item = groups[d.index]; if (item.kind === "base") { return "#2563eb"; } if (item.kind === "named") { return "#d97706"; } return "#0f766e"; } function relationshipForChord(d) { const source = groups[d.source.index]; const target = groups[d.target.index]; return ( relationMap.get( `${source.id}|${target.id}` ) || relationMap.get( `${target.id}|${source.id}` ) ); } function ribbonColor(d) { const relation = relationshipForChord(d); if (!relation) { return "#94a3b8"; } return relation.power < 0 ? "#7c3aed" : "#3b82f6"; } // ============================================================ // RIBBONS // ============================================================ const ribbonLayer = root.append("g"); const ribbons = ribbonLayer .selectAll("path") .data(chords) .join("path") .attr("d", ribbon) .attr( "fill", d => ribbonColor(d) ) .attr( "fill-opacity", 0.55 ) .attr( "stroke", d => d3.color( ribbonColor(d) ).darker(0.5) ) .attr( "stroke-width", 0.7 ) .style( "cursor", "pointer" ); // ============================================================ // OUTER GROUPS // ============================================================ const group = root .append("g") .selectAll("g") .data(chords.groups) .join("g") .style( "cursor", "pointer" ); group .append("path") .attr("d", arc) .attr( "fill", d => groupColor(d) ) .attr( "stroke", "white" ) .attr( "stroke-width", 2 ); // ============================================================ // LABELS // ============================================================ const labels = group .append("g") .attr( "transform", d => { const angle = (d.startAngle + d.endAngle) / 2; const rotate = angle * 180 / Math.PI - 90; const flip = angle > Math.PI ? 180 : 0; return ` rotate(${rotate}) translate(${outerRadius + 12}) rotate(${flip}) `; } ); labels .append("text") .attr( "text-anchor", d => { const angle = (d.startAngle + d.endAngle) / 2; return angle > Math.PI ? "end" : "start"; } ) .attr( "dominant-baseline", "central" ) .attr( "font-size", 14 ) .attr( "font-weight", 750 ) .attr( "fill", "#222" ) .text( d => groups[d.index].symbol ); labels .append("text") .attr( "text-anchor", d => { const angle = (d.startAngle + d.endAngle) / 2; return angle > Math.PI ? "end" : "start"; } ) .attr( "y", 14 ) .attr( "font-size", 9.5 ) .attr( "fill", "#666" ) .text( d => groups[d.index].short ); // ============================================================ // CENTER MESSAGE // ============================================================ const center = root .append("g") .style( "pointer-events", "none" ); center .append("text") .attr( "text-anchor", "middle" ) .attr( "y", -8 ) .attr( "font-size", 15 ) .attr( "font-weight", 700 ) .attr( "fill", "#333" ) .text( "SI dimensional structure" ); center .append("text") .attr( "text-anchor", "middle" ) .attr( "y", 14 ) .attr( "font-size", 11 ) .attr( "fill", "#777" ) .text( "Select an arc or ribbon" ); // ============================================================ // SIDE INFORMATION PANEL // ============================================================ const info = document.createElement("div"); Object.assign( info.style, { border: "1px solid #ddd", borderRadius: "14px", background: "white", padding: "18px", minHeight: "330px" } ); layout.append(info); // ============================================================ // DEFAULT INFO // ============================================================ function defaultInfo() { info.innerHTML = `

READ THE DIAGRAM

Follow the ribbons

Select a derived unit to reveal the base units from which it is constructed.

Ribbon width represents the magnitude of the exponent.

For example,
s⁻³ produces a ribbon three times as wide as s⁻¹.

Blue ribbon → positive exponent
Purple ribbon → negative exponent

`; } defaultInfo(); // ============================================================ // RESET HIGHLIGHT // ============================================================ function resetHighlight() { ribbons .transition() .duration(220) .attr( "fill-opacity", 0.55 ); group .transition() .duration(220) .style( "opacity", 1 ); defaultInfo(); } // ============================================================ // SELECT AN OUTER ARC // ============================================================ function selectGroup( selectedIndex ) { const selected = groups[selectedIndex]; const related = new Set([ selectedIndex ]); chords.forEach(d => { if ( d.source.index === selectedIndex ) { related.add( d.target.index ); } if ( d.target.index === selectedIndex ) { related.add( d.source.index ); } }); ribbons .transition() .duration(200) .attr( "fill-opacity", d => d.source.index === selectedIndex || d.target.index === selectedIndex ? 0.9 : 0.035 ); group .transition() .duration(200) .style( "opacity", d => related.has(d.index) ? 1 : 0.12 ); // ========================================================== // BASE UNIT SELECTED // ========================================================== if ( selected.kind === "base" ) { const connected = []; chords.forEach(d => { let otherIndex = null; if ( d.source.index === selectedIndex ) { otherIndex = d.target.index; } else if ( d.target.index === selectedIndex ) { otherIndex = d.source.index; } if ( otherIndex !== null ) { const other = groups[otherIndex]; const relation = relationMap.get( `${selected.id}|${other.id}` ); if (relation) { connected.push({ other, power: relation.power }); } } }); connected.sort( (a, b) => a.other.short.localeCompare( b.other.short ) ); info.innerHTML = `

SI BASE UNIT

${selected.symbol}

${selected.quantity}

${selected.unit}

Used in these derived units

${ connected.map( x => `

${x.other.short} ${ selected.symbol }^{${
x.power
}}

` ).join("") }

Question: Why does this base quantity appear in so many different physical quantities?

`; } // ========================================================== // DERIVED UNIT SELECTED // ========================================================== else { const ingredients = []; chords.forEach(d => { let otherIndex = null; if ( d.source.index === selectedIndex ) { otherIndex = d.target.index; } else if ( d.target.index === selectedIndex ) { otherIndex = d.source.index; } if ( otherIndex !== null ) { const other = groups[otherIndex]; if ( other.kind === "base" ) { const relation = relationMap.get( `${other.id}|${selected.id}` ); if (relation) { ingredients.push({ base: other, power: relation.power }); } } } }); info.innerHTML = `

${ selected.kind === "named" ? "NAMED SI DERIVED UNIT" : "SI DERIVED UNIT" }

${selected.symbol}

${selected.quantity}

SI base-unit expression

${selected.expression}

Dimensions

${selected.dimension}

Base-unit ingredients

${ ingredients.map( x => `

${x.base.quantity} ${x.base.symbol}^{${
x.power
}}

` ).join("") }

Dimensional-analysis challenge: Reconstruct ${selected.dimension} using only the highlighted base quantities.

`; } } // ============================================================ // GROUP CLICK // ============================================================ group.on( "click", function( event, d ) { event.stopPropagation(); selectGroup( d.index ); } ); // ============================================================ // RIBBON CLICK // ============================================================ ribbons.on( "click", function( event, d ) { event.stopPropagation(); const a = groups[ d.source.index ]; const b = groups[ d.target.index ]; const base = a.kind === "base" ? a : b; const derived = a.kind === "base" ? b : a; const relation = relationMap.get( `${base.id}|${derived.id}` ); ribbons .transition() .duration(180) .attr( "fill-opacity", x => x === d ? 0.95 : 0.035 ); group .transition() .duration(180) .style( "opacity", x => x.index === d.source.index || x.index === d.target.index ? 1 : 0.12 ); const signText = relation.power > 0 ? "numerator" : "denominator"; info.innerHTML = `

DIMENSIONAL CONNECTION

${base.quantity} → ${derived.quantity}

${base.symbol}

base unit

→

${derived.symbol}

derived unit

Exponent

${ relation.power }

${ base.symbol } appears in the ${signText} with exponent ${ relation.power }.

Complete expression:
${derived.expression}

`; } ); // ============================================================ // HOVER EFFECT // ============================================================ ribbons .on( "mouseenter", function() { d3.select(this) .transition() .duration(100) .attr( "fill-opacity", 0.95 ); } ) .on( "mouseleave", function() { d3.select(this) .transition() .duration(100) .attr( "fill-opacity", 0.55 ); } ); // ============================================================ // CLICK EMPTY AREA TO RESET // ============================================================ svg.on( "click", resetHighlight ); return container; }35:T5ce,siArcData = { const allowed = { "Motion": new Set([ "length", "mass", "time", "area", "volume", "speed", "acceleration", "frequency" ]), "Mechanics": new Set([ "length", "mass", "time", "area", "volume", "speed", "acceleration", "frequency", "density", "momentum", "force", "pressure", "energy", "power" ]), "Mechanics + Electricity": new Set([ "length", "mass", "time", "current", "area", "volume", "speed", "acceleration", "frequency", "density", "momentum", "force", "pressure", "energy", "power", "charge", "voltage", "resistance" ]) }; const visible = allowed[arcScope]; const nodes = siData.nodes .filter(d => visible.has(d.id)) .map(d => ({...d})); const ids = new Set(nodes.map(d => d.id)); const links = siData.links .filter(d => ids.has(d.source) && ids.has(d.target) ) .map(d => ({...d})); // Base units first. // Derived units second. nodes.sort((a, b) => { if (a.kind === "base" && b.kind !== "base") return -1; if (a.kind !== "base" && b.kind === "base") return 1; if (a.kind === "base" && b.kind === "base") { return a.order - b.order; } return a.short.localeCompare(b.short); }); return { nodes, links }; }36:T5a94,siArcDiagram = { const {nodes, links} = siArcData; // ============================================================ // DIMENSIONS // ============================================================ const W = 1150; const H = 650; const baselineY = 470; const margin = { left: 65, right: 65 }; // ============================================================ // CONTAINER // ============================================================ const container = document.createElement("div"); Object.assign(container.style, { width: "100%", maxWidth: "1250px", margin: "0 auto", fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" }); // ============================================================ // TITLE // ============================================================ const header = document.createElement("div"); header.innerHTML = `

From SI Base Units to Derived Units

Follow each arc to see how SI base units combine mathematically to produce derived physical units.

`; container.append(header); // ============================================================ // LEGEND // ============================================================ const legend = document.createElement("div"); Object.assign(legend.style, { display: "flex", flexWrap: "wrap", gap: "18px", alignItems: "center", marginBottom: "12px", fontSize: "12px", color: "#555" }); legend.innerHTML = `

SI base unit

Derived unit

Named derived unit

Positive exponent

Negative exponent

`; container.append(legend); // ============================================================ // MAIN LAYOUT // ============================================================ const layout = document.createElement("div"); Object.assign(layout.style, { display: "grid", gridTemplateColumns: width > 900 ? "minmax(0, 1fr) 290px" : "1fr", gap: "16px" }); container.append(layout); // ============================================================ // GRAPH PANEL // ============================================================ const graphPanel = document.createElement("div"); Object.assign(graphPanel.style, { position: "relative", border: "1px solid #ddd", borderRadius: "14px", background: "#fbfbfc", overflow: "hidden" }); layout.append(graphPanel); // ============================================================ // SVG // ============================================================ const svg = d3.select(graphPanel) .append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .style("display", "block") .style("width", "100%"); // ============================================================ // POSITION SCALE // ============================================================ const x = d3.scalePoint() .domain(nodes.map(d => d.id)) .range([ margin.left, W - margin.right ]) .padding(0.55); // ============================================================ // NODE LOOKUP // ============================================================ const nodeById = new Map( nodes.map(d => [ d.id, { ...d, x: x(d.id), y: baselineY } ]) ); // ============================================================ // ARC GENERATOR // // Height automatically depends on the horizontal distance // between connected nodes. // ============================================================ function arcPath(d) { const source = nodeById.get(d.source); const target = nodeById.get(d.target); const x1 = source.x; const x2 = target.x; const left = Math.min(x1, x2); const right = Math.max(x1, x2); const distance = right - left; // Circular arc. // Larger horizontal distance produces a taller arc. const radius = distance / 2; return ` M ${left},${baselineY} A ${radius},${radius} 0 0 1 ${right},${baselineY} `; } // ============================================================ // BACKGROUND BASELINE // ============================================================ svg.append("line") .attr("x1", margin.left - 20) .attr("x2", W - margin.right + 20) .attr("y1", baselineY) .attr("y2", baselineY) .attr("stroke", "#cbd0d8") .attr("stroke-width", 1.5); // ============================================================ // CATEGORY LABELS // ============================================================ const baseNodes = nodes.filter( d => d.kind === "base" ); const derivedNodes = nodes.filter( d => d.kind !== "base" ); if (baseNodes.length) { const baseMin = d3.min( baseNodes, d => x(d.id) ); const baseMax = d3.max( baseNodes, d => x(d.id) ); svg.append("text") .attr( "x", (baseMin + baseMax) / 2 ) .attr("y", 525) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 750) .attr("fill", "#2563eb") .text("SI BASE UNITS"); } if (derivedNodes.length) { const derivedMin = d3.min( derivedNodes, d => x(d.id) ); const derivedMax = d3.max( derivedNodes, d => x(d.id) ); svg.append("text") .attr( "x", (derivedMin + derivedMax) / 2 ) .attr("y", 525) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 750) .attr("fill", "#0f766e") .text("SI DERIVED UNITS"); } // ============================================================ // ARC LAYER // ============================================================ const arcLayer = svg.append("g"); const arcs = arcLayer .selectAll("path") .data(links) .join("path") .attr("d", arcPath) .attr("fill", "none") .attr( "stroke", d => d.power < 0 ? "#7c3aed" : "#3b82f6" ) .attr( "stroke-width", d => 1.7 + Math.abs(d.power) * 0.9 ) .attr( "stroke-dasharray", d => d.power < 0 ? "6 5" : null ) .attr("stroke-opacity", 0.46) .style("cursor", "pointer"); // ============================================================ // EXPONENT LABELS // ============================================================ const exponentLayer = svg .append("g"); const exponentLabels = exponentLayer .selectAll("text") .data(links) .join("text") .attr( "x", d => { const a = nodeById.get(d.source); const b = nodeById.get(d.target); return ( a.x + b.x ) / 2; } ) .attr( "y", d => { const a = nodeById.get(d.source); const b = nodeById.get(d.target); const distance = Math.abs( a.x - b.x ); return ( baselineY - distance / 2 - 5 ); } ) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("font-weight", 750) .attr( "fill", d => d.power < 0 ? "#6d28d9" : "#1d4ed8" ) .attr("opacity", 0) .text( d => d.power === 1 ? "" : d.power ) .style( "pointer-events", "none" ); // ============================================================ // NODE COLORS // ============================================================ function nodeColor(d) { if (d.kind === "base") { return "#2563eb"; } if (d.kind === "named") { return "#d97706"; } return "#0f766e"; } // ============================================================ // NODES // ============================================================ const nodeLayer = svg.append("g"); const node = nodeLayer .selectAll("g") .data(nodes) .join("g") .attr( "transform", d => `translate(${x(d.id)},${baselineY})` ) .style("cursor", "pointer"); node.append("circle") .attr( "r", d => d.kind === "base" ? 12 : 10 ) .attr( "fill", d => nodeColor(d) ) .attr("stroke", "white") .attr("stroke-width", 2.5); // ============================================================ // UNIT SYMBOL // ============================================================ node.append("text") .attr("x", 0) .attr("y", 29) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 800) .attr("fill", "#222") .text(d => d.symbol); // ============================================================ // QUANTITY LABEL // ============================================================ node.append("text") .attr("x", 0) .attr("y", 44) .attr("text-anchor", "middle") .attr("font-size", 9) .attr("fill", "#666") .text(d => d.short); // ============================================================ // TOOLTIP // ============================================================ const tooltip = document.createElement("div"); Object.assign( tooltip.style, { display: "none", position: "absolute", pointerEvents: "none", zIndex: 10, background: "rgba(20,20,20,.94)", color: "white", padding: "8px 10px", borderRadius: "7px", fontSize: "12px", lineHeight: "1.45", maxWidth: "230px" } ); graphPanel.append(tooltip); // ============================================================ // INFORMATION PANEL // ============================================================ const info = document.createElement("div"); Object.assign( info.style, { border: "1px solid #ddd", borderRadius: "14px", background: "white", padding: "18px", minHeight: "330px" } ); layout.append(info); // ============================================================ // DEFAULT INFORMATION // ============================================================ function defaultInfo() { info.innerHTML = `

ARC DIAGRAM

Explore the connections

Each arc connects an SI base unit to a derived unit that depends on it.

Arc thickness represents the magnitude of the exponent.

Solid blue: positive exponent.
Dashed purple: negative exponent.

`; } defaultInfo(); // ============================================================ // HELPERS // ============================================================ function isConnected( link, id ) { return ( link.source === id || link.target === id ); } // ============================================================ // HIGHLIGHT NODE // ============================================================ function highlightNode( selected ) { const related = new Set([ selected.id ]); links.forEach(d => { if ( d.source === selected.id ) { related.add( d.target ); } if ( d.target === selected.id ) { related.add( d.source ); } }); node .transition() .duration(160) .style( "opacity", d => related.has(d.id) ? 1 : 0.12 ); arcs .transition() .duration(160) .attr( "stroke-opacity", d => isConnected( d, selected.id ) ? 0.95 : 0.025 ); exponentLabels .transition() .duration(160) .attr( "opacity", d => isConnected( d, selected.id ) ? 1 : 0 ); showNodeInfo( selected ); } // ============================================================ // NODE INFO // ============================================================ function showNodeInfo(d) { // ---------------------------------------------------------- // BASE UNIT // ---------------------------------------------------------- if ( d.kind === "base" ) { const connected = links .filter( l => l.source === d.id ) .map(l => { const target = nodes.find( n => n.id === l.target ); return { target, power: l.power }; }); info.innerHTML = `

SI BASE UNIT

${d.symbol}

${d.quantity}

${d.unit}

CONNECTED DERIVED UNITS

${ connected.map(x => `

${x.target.short} ${d.symbol}^${x.power}

`).join("") }

Think: What do these different quantities have in common?

`; return; } // ---------------------------------------------------------- // DERIVED UNIT // ---------------------------------------------------------- const ingredients = links .filter( l => l.target === d.id ) .map(l => { const source = nodes.find( n => n.id === l.source ); return { source, power: l.power }; }); info.innerHTML = `

${ d.kind === "named" ? "NAMED SI DERIVED UNIT" : "SI DERIVED UNIT" }

${d.symbol}

${d.quantity}

${d.unit}

EXPRESSION IN SI BASE UNITS

${d.expression}

DIMENSIONS

${d.dimension}

BASE-UNIT COMPONENTS

${ ingredients.map(x => `

${x.source.quantity} ${x.source.symbol}^${x.power}

`).join("") }

Challenge: Can you reconstruct ${d.expression} just by reading the arcs?

`; } // ============================================================ // RESET // ============================================================ function reset() { node .transition() .duration(150) .style( "opacity", 1 ); arcs .transition() .duration(150) .attr( "stroke-opacity", 0.46 ); exponentLabels .transition() .duration(150) .attr( "opacity", 0 ); defaultInfo(); } // ============================================================ // NODE EVENTS // ============================================================ node .on( "mouseenter", function( event, d ) { highlightNode(d); tooltip.style.display = "block"; tooltip.innerHTML = ` ${d.quantity}
${d.unit} (${d.symbol}) ${ d.kind !== "base" ? `
${d.expression}` : "" } `; } ) .on( "mousemove", function(event) { const box = graphPanel .getBoundingClientRect(); tooltip.style.left = `${ event.clientX - box.left + 12 }px`; tooltip.style.top = `${ event.clientY - box.top + 12 }px`; } ) .on( "mouseleave", function() { tooltip.style.display = "none"; } ) .on( "click", function( event, d ) { event.stopPropagation(); highlightNode(d); } ); // ============================================================ // ARC EVENTS // ============================================================ arcs .on( "mouseenter", function( event, d ) { const source = nodeById.get( d.source ); const target = nodeById.get( d.target ); arcs .attr( "stroke-opacity", x => x === d ? 1 : 0.05 ); node .style( "opacity", n => n.id === source.id || n.id === target.id ? 1 : 0.12 ); exponentLabels .attr( "opacity", x => x === d ? 1 : 0 ); tooltip.style.display = "block"; tooltip.innerHTML = ` ${source.symbol} → ${target.symbol}
Exponent: ${d.power}
${target.expression} `; } ) .on( "mousemove", function(event) { const box = graphPanel .getBoundingClientRect(); tooltip.style.left = `${ event.clientX - box.left + 12 }px`; tooltip.style.top = `${ event.clientY - box.top + 12 }px`; } ) .on( "mouseleave", function() { tooltip.style.display = "none"; } ); // ============================================================ // CLICK EMPTY AREA // ============================================================ svg.on( "click", reset ); return container; }37:T18f9,worldMeasurementProfiles = { const profiles = new Map([ // ========================================================= // UNITED STATES // ========================================================= [ "840", { name: "United States of America", category: "mixed", systemTitle: "U.S. customary units + SI", summary: "The United States uses a mixture of U.S. customary units and SI units.", detail: "U.S. customary units remain very common in everyday life. SI units are also legal and are widely used in science, medicine, engineering, manufacturing, the military, and international trade.", examples: [ "Distance: inch, foot, yard, mile", "Mass / weight: ounce, pound", "Volume: fluid ounce, cup, pint, quart, gallon", "Temperature: degrees Fahrenheit is common in everyday life", "Science: SI units such as metre, kilogram, second, kelvin, and newton" ], classroom: "The United States is a useful example of a country where two measurement traditions coexist." } ], // ========================================================= // UNITED KINGDOM // ========================================================= [ "826", { name: "United Kingdom", category: "exceptions", systemTitle: "SI with traditional imperial exceptions", summary: "The United Kingdom primarily uses the metric system, but several imperial units remain common or legally permitted in particular contexts.", detail: "Metric units are the normal system for most commercial measurements. Imperial units remain visible in areas such as road distances, vehicle speeds, draught beer, and some everyday measurements.", examples: [ "Most commercial measurements: metric", "Road distance: miles", "Road speed: miles per hour", "Draught beer and cider: pint", "Personal height and body weight may still be expressed informally in feet, inches, stones, and pounds" ], classroom: "The UK demonstrates that adoption of SI does not necessarily eliminate older measurement traditions." } ], // ========================================================= // LIBERIA // ========================================================= [ "430", { name: "Liberia", category: "mixed", systemTitle: "SI with mixed measurement practices", summary: "Liberia recognizes and uses metric measurements, although traditional and U.S.-influenced units may also appear in everyday practice.", detail: "Older classroom maps often list Liberia as a country that does not use the metric system. That description is too simple. SI measurements are used, but measurement practices have historically been mixed.", examples: [ "Metric units are used in government, science, and international commerce", "Traditional or U.S.-influenced measurements may also appear", "Measurement practice can vary by context" ], classroom: "Use Liberia to discuss the difference between formal SI adoption and everyday measurement practice." } ], // ========================================================= // MYANMAR // ========================================================= [ "104", { name: "Myanmar", category: "mixed", systemTitle: "SI with traditional measurement practices", summary: "Myanmar uses SI measurements while some traditional units continue to appear in everyday or local contexts.", detail: "Myanmar has often been shown on older maps as a non-metric country. Modern measurement practice is more complicated. SI is recognized and increasingly used alongside traditional units.", examples: [ "SI units are used in science and international contexts", "Metric mass and distance measurements are widely encountered", "Traditional Burmese units can remain in some local contexts" ], classroom: "Myanmar illustrates how a country can move toward international standards while retaining traditional units." } ] ]); // =========================================================== // CATEGORY FUNCTIONS // =========================================================== function categoryFor(country) { const profile = profiles.get(country.id); return profile ? profile.category : "si"; } function colorFor(category) { return { si: "#43a047", mixed: "#ef6c00", exceptions: "#1976d2" }[category]; } function categoryLabel(category) { return { si: "SI predominant", mixed: "Mixed measurement systems", exceptions: "SI with notable traditional-unit exceptions" }[category]; } // =========================================================== // DEFAULT INFORMATION FOR MOST COUNTRIES // =========================================================== function defaultProfile(country) { return { name: country.name, category: "si", systemTitle: "International System of Units (SI)", summary: "The International System of Units is the predominant measurement system.", detail: "Metric units are used as the standard framework for scientific measurement and generally for official, industrial, educational, and commercial purposes.", examples: [ "Length: metre (m)", "Mass: kilogram (kg)", "Time: second (s)", "Temperature: degrees Celsius in everyday use and kelvin (K) in scientific contexts", "Volume: litre (L) and cubic metre (m³)" ], classroom: "Local traditional expressions may still exist, even when SI is the standard measurement system." }; } function infoFor(country) { return ( profiles.get(country.id) || defaultProfile(country) ); } return { profiles, categoryFor, colorFor, categoryLabel, infoFor }; }38:T3817,worldMeasurementMap = { const { countries, borders } = worldMapData; const W = 1150; const H = 650; // ============================================================ // CONTAINER // ============================================================ const container = document.createElement("div"); Object.assign( container.style, { width: "100%", maxWidth: "1300px", margin: "0 auto", fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" } ); // ============================================================ // HEADER // ============================================================ const header = document.createElement("div"); header.innerHTML = `

Measurement Systems Around the World

The International System of Units (SI) is recognized worldwide, but traditional measurement systems remain important in several countries. Select a country to explore its measurement practices.

`; container.append(header); // ============================================================ // LEGEND // ============================================================ const legend = document.createElement("div"); Object.assign( legend.style, { display: "flex", flexWrap: "wrap", gap: "18px", alignItems: "center", marginBottom: "14px", fontSize: "12px", color: "#555" } ); legend.innerHTML = `

SI predominant

Mixed measurement systems

SI with notable traditional-unit exceptions

WORLD MEASUREMENT SYSTEMS

Select a country

Click any country on the map to explore the units commonly used there.

Important distinction

SI is recognized internationally. What differs from country to country is the degree to which traditional or customary units remain in everyday use.

INTERESTING COUNTRIES TO EXPLORE

🇺🇸 United States
🇬🇧 United Kingdom
🇱🇷 Liberia
🇲🇲 Myanmar

`; } defaultPanel(); // ============================================================ // COUNTRY INFORMATION // ============================================================ function showCountry( country ) { const info = worldMeasurementProfiles .infoFor(country); const category = worldMeasurementProfiles .categoryFor(country); const categoryColor = worldMeasurementProfiles .colorFor(category); const categoryLabel = worldMeasurementProfiles .categoryLabel(category); side.innerHTML = `

COUNTRY PROFILE

${info.name}

${categoryLabel}

MEASUREMENT SYSTEM

${info.systemTitle}

${info.summary}

${info.detail}

EXAMPLES

${ info.examples.map( example => `

${example}

` ).join("") }

Class discussion: ${info.classroom}

`; } // ============================================================ // SELECTION // ============================================================ let selectedId = null; function updateStyles() { countryPaths .attr( "stroke", d => d.id === selectedId ? "#111827" : "white" ) .attr( "stroke-width", d => d.id === selectedId ? 2 : 0.65 ) .attr( "opacity", d => { if ( !selectedId ) { return 1; } return d.id === selectedId ? 1 : 0.78; } ); } // ============================================================ // EVENTS // ============================================================ countryPaths .on( "mouseenter", function( event, d ) { if ( d.id !== selectedId ) { d3World .select(this) .attr( "stroke", "#374151" ) .attr( "stroke-width", 1.3 ); } const info = worldMeasurementProfiles .infoFor(d); tooltip.style.display = "block"; tooltip.innerHTML = ` ${d.name}
${info.systemTitle} `; } ) .on( "mousemove", function(event) { const box = mapPanel .getBoundingClientRect(); tooltip.style.left = `${ event.clientX - box.left + 12 }px`; tooltip.style.top = `${ event.clientY - box.top + 12 }px`; } ) .on( "mouseleave", function() { tooltip.style.display = "none"; updateStyles(); } ) .on( "click", function( event, d ) { event.stopPropagation(); selectedId = d.id; updateStyles(); showCountry(d); } ); // ============================================================ // CLICK OUTSIDE COUNTRY // ============================================================ svg.on( "click", function() { selectedId = null; updateStyles(); defaultPanel(); } ); return container; }39:[] 2f:{"id":"f322b0193d615ecd","slug":null,"title":"SI graph","thumbnail":"679351148cd73a8547738282f92ba0d2cf2594183cb8989cfcecf1d16bf2396a","access_level":"public","create_time":"$D2026-08-26T16:46:41.912Z","update_time":"$D2026-08-26T17:45:33.740Z","view_time":null,"first_public_time":"$D2026-08-26T17:01:05.739Z","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":95,"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":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null,"role":"editor"},{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SI graph","cells":[{"id":0,"value":"# SI graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof siLevel = Inputs.radio(\n [\n \"1. SI base units\",\n \"2. Motion and mechanics\",\n \"3. Extended SI\"\n ],\n {\n label: \"Explore the International System of Units\",\n value: \"2. Motion and mechanics\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof chordScope = Inputs.radio(\n [\n \"Mechanics: m, kg, s\",\n \"Mechanics + Electricity\",\n \"All 7 SI base units\"\n ],\n {\n label: \"Chord diagram scope\",\n value: \"Mechanics: m, kg, s\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof arcScope = Inputs.radio(\n [\n \"Motion\",\n \"Mechanics\",\n \"Mechanics + Electricity\"\n ],\n {\n label: \"Explore SI derived units\",\n value: \"Mechanics\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"d3World = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"topoWorld = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"worldMapData = {\n const topology = await d3World.json(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n );\n\n const countries = topoWorld\n .feature(topology, topology.objects.countries)\n .features\n .map(d => ({\n ...d,\n\n // ISO numeric country code\n id: String(d.id).padStart(3, \"0\"),\n\n // Country name is already included in world-atlas v2\n name: d.properties?.name || \"Unknown\"\n }));\n\n const borders = topoWorld.mesh(\n topology,\n topology.objects.countries,\n (a, b) => a !== b\n );\n\n return {\n topology,\n countries,\n borders\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof worldMeasurementView = Inputs.radio(\n [\n \"All countries\",\n \"Highlight mixed systems\"\n ],\n {\n label: \"Explore measurement systems\",\n value: \"All countries\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 30:"$2f:body"