31:[{"id":"4b2d00cef21e84318ae5684c1b861de815e355a7d57f7e901f0c60b4d13a82c9d58c61a50cc8938f78067be8a295fe453c1c8c3ea13ac33090e0ebf3f57755dd","href":"https://static.observableusercontent.com/files/4b2d00cef21e84318ae5684c1b861de815e355a7d57f7e901f0c60b4d13a82c9d58c61a50cc8938f78067be8a295fe453c1c8c3ea13ac33090e0ebf3f57755dd","name":"resistors.jpeg","type":"image/jpeg","lastModified":1617907985386.143,"size":441045}] 2f:{"title":"Resistor Decoder","cells":[{"id":298,"value":"md`# Resistor Decoder\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof band1 = Radio(colors, {\n label: \"Value Band 1\",\n value: colors[4],\n format: (x) =>\n html``\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof band2 = Radio(colors, {label: \"Value Band 2\", value: colors[7], format: x => html``})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof band3 = Radio(colors.concat([null]), {label: \"Value Band 3 (optional)\", value: null, format: x => html``})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof multiplierBand = Radio(colors, {label: \"Multiplier Band\", value: colors[2], format: x => html``})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof toleranceBand = Radio(tolerances, {\n label: \"Tolerance Band\",\n value: tolerances[0],\n format: (x) =>\n html``\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"tex`\\underline{${band1.value}} \\space \\underline{${band2.value}} \\space \\underline{${band3 ? band3.value : `\\\\space \\\\space`}} \\times 10^{${multiplierBand.value}} = ${ohms}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"finalValue = tex`R = ${reduceNumber(ohms).value} \\space \\text{${reduceNumber(ohms).prefix}}\\Omega \\space \\pm ${toleranceBand.value * 100}\\%`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"tex`R_{\\text{min}} = ${reduceNumber(ohms - error).value} \\space \\text{${reduceNumber(ohms - error).prefix}} \\Omega`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"tex`R_{\\text{max}} = ${reduceNumber(ohms + error).value} \\space \\text{${reduceNumber(ohms + error).prefix}} \\Omega`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`## How does it work?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`In electronics, resistors are an important and common component used to control the voltage or current flowing through a circuit. The resistance value is important to know, but can be tricky to identify because it's not written on the resistor! Instead, resistors use a system of color-coded bands to identify the value as a number in scientific notation, measured in Ohms (Ω), like this:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"tex`47 \\times 10^2 \\space \\Omega = 4700 \\space \\Omega`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`\nA resistor may have 4, 5, or even 6 bands of varying colors read from left to right:\n\n- 2 or 3 bands to represent digits in the **base** of the expression above (4, 7).\n- A band to represent the **exponent** of the expression above (2).\n- A band to represent a **tolerance** range to define how much the value of the resistor might be off by, like 5%\n- On rarer resistors with six bands, there will also be one band denoting a temperature coefficient (not covered here)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"FileAttachment(\"resistors.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`For the **base** and **exponent** digit bands, the colors map to the following numbers:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"Table(colors, {columns: [\"color\", \"value\"], width: 150})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`For **tolerance** bands, the colors correspond to these values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"Table(tolerances, {columns: [\"color\", \"value\"], width: 150, format: {value: d => d * 100 + \"%\"}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`How can you tell which end is left and which is right? *Most resistors* have a tolerance value of 5% or 10%, which corresponds to gold and silver respectively. The tolerance band will usually be the last one, so look for the metallic color, and that's the right-hand side! \n\nIf your resistor has something like a 1% tolerance (a brown band, instead of a gold or silver one), just try calculating it both ways and see which makes more sense:\n- Brown, Black, Black, Red, Brown = 10kΩ ± 1% *(a very common value)*\n- Brown, Red, Black, Black Brown = 120Ω ± 1% *(a less common value)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"---\n## Calculations","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"ohms = Number.parseInt(\"\" + band1.value + band2.value + (band3 ? band3.value : \"\")) * 10 ** multiplierBand.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"error = ohms * toleranceBand.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"// Reduce the number to \"engineering notation\"\nfunction reduceNumber(n) {\n let unitIndex = 0;\n let prefixes = [\"\", \"k\", \"M\", \"G\"];\n while (n / 1000 >= 1) {\n unitIndex++;\n n /= 1000;\n }\n return { value: n, prefix: prefixes[unitIndex] };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"reducedNumber = reduceNumber(ohms)","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"---\n## Reference values","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"colors = [\n {color: \"Black\", value: 0, hex: \"#1E1E1E\"},\n {color: \"Brown\", value: 1, hex: \"#A5765C\"},\n {color: \"Red\", value: 2, hex: \"#FF7E76\"},\n {color: \"Orange\", value: 3, hex: \"#FFB47E\"},\n {color: \"Yellow\", value: 4, hex: \"#FFE694\"},\n {color: \"Green\", value: 5, hex: \"#B3EB9F\"},\n {color: \"Blue\", value: 6, hex: \"#7EC4F6\"},\n {color: \"Purple\", value: 7, hex: \"#BB87FA\"},\n {color: \"Gray\", value: 8, hex: \"#D8D8D8\"},\n {color: \"White\", value: 9, hex: \"#fff\"}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"tolerances = [\n {color: \"Silver\", value: 0.1, hex: \"#EDEDED\"},\n {color: \"Gold\", value: 0.05, hex: \"#FFDAA4\"},\n {color: \"Brown\", value: 0.01, hex: \"#A5765C\"},\n {color: \"Red\", value: 0.02, hex: \"#FF7E76\"},\n {color: \"Green\", value: 0.005, hex: \"#B3EB9F\"},\n {color: \"Blue\", value: 0.0025, hex: \"#7EC4F6\"},\n {color: \"Purple\", value: 0.001, hex: \"#BB87FA\"},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"---\n## Generating the diagram","pinned":false,"hidden":false,"mode":"md"},{"id":452,"value":"diagramWidth = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"bodyHeight = 70","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"bandWidth = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"wireHeight = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"function generateBandGraphics() {\n let xBase = 0;\n let xSpacing = 12;\n let xIncrement = bandWidth + xSpacing;\n let xTotal = (band3 === null ? xIncrement * 4 : xIncrement * 5) - xSpacing;\n\n return svg`\n\n ${generateRect(band1, xBase + xIncrement * 0)}\n ${generateRect(band2, xBase + xIncrement * 1)}\n ${generateRect(band3, xBase + xIncrement * 2)}\n ${generateRect(\n multiplierBand,\n xBase + xIncrement * (band3 === null ? 2 : 3)\n )}\n ${generateRect(\n toleranceBand,\n xBase + xIncrement * (band3 === null ? 3 : 4)\n )}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"function generateRect(b, x) {\n if (b === null) {\n return null;\n }\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"import {Select, Range, Checkbox, Radio, Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}