ohms = Number.parseInt("" + band1.value + band2.value + (band3 ? band3.value : "")) * 10 ** multiplierBand.value
error = ohms * toleranceBand.value
// Reduce the number to "engineering notation"
function reduceNumber(n) {
let unitIndex = 0;
let prefixes = ["", "k", "M", "G"];
while (n / 1000 >= 1) {
unitIndex++;
n /= 1000;
}
return { value: n, prefix: prefixes[unitIndex] };
}
reducedNumber = reduceNumber(ohms)
colors = [
{color: "Black", value: 0, hex: "#1E1E1E"},
{color: "Brown", value: 1, hex: "#A5765C"},
{color: "Red", value: 2, hex: "#FF7E76"},
{color: "Orange", value: 3, hex: "#FFB47E"},
{color: "Yellow", value: 4, hex: "#FFE694"},
{color: "Green", value: 5, hex: "#B3EB9F"},
{color: "Blue", value: 6, hex: "#7EC4F6"},
{color: "Purple", value: 7, hex: "#BB87FA"},
{color: "Gray", value: 8, hex: "#D8D8D8"},
{color: "White", value: 9, hex: "#fff"}
]
tolerances = [
{color: "Silver", value: 0.1, hex: "#EDEDED"},
{color: "Gold", value: 0.05, hex: "#FFDAA4"},
{color: "Brown", value: 0.01, hex: "#A5765C"},
{color: "Red", value: 0.02, hex: "#FF7E76"},
{color: "Green", value: 0.005, hex: "#B3EB9F"},
{color: "Blue", value: 0.0025, hex: "#7EC4F6"},
{color: "Purple", value: 0.001, hex: "#BB87FA"},
]
function generateBandGraphics() {
let xBase = 0;
let xSpacing = 12;
let xIncrement = bandWidth + xSpacing;
let xTotal = (band3 === null ? xIncrement * 4 : xIncrement * 5) - xSpacing;
return svg`<g transform="translate(${diagramWidth / 2 - xTotal / 2})">
${generateRect(band1, xBase + xIncrement * 0)}
${generateRect(band2, xBase + xIncrement * 1)}
${generateRect(band3, xBase + xIncrement * 2)}
${generateRect(
multiplierBand,
xBase + xIncrement * (band3 === null ? 2 : 3)
)}
${generateRect(
toleranceBand,
xBase + xIncrement * (band3 === null ? 3 : 4)
)}
</g>`;
}
function generateRect(b, x) {
if (b === null) {
return null;
}
return svg`<rect x=${x} width=${bandWidth} height=${bodyHeight} fill="${b.hex}"/>`;
}
import {Select, Range, Checkbox, Radio, Table} from "@observablehq/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
