30:Tf5a,md` Creating a versatile gauge requires some careful tweaking of its configuration parameters. Feel free to play around with some of the controls to get a feel for different layouts and behaviors. A gauge’s _slice_ is the fraction of the circle it uses. For example, an odometer’s or pressure meter’s slice often is 60% (_slice_ = 3/5) or 75% (_slice_ = 3/4), and a 12-hour clock’s slice is full circle (_slice_ = 1), First, let’s define the different types of gauges: * **gauge**: a baseline with tickmarks and labels; * **wheel**: a gauge with its labels boxed, extending half a box beyond both sides of the slice; * **strict**: a wheel shrunk into the given slice; avoids overlap between begin and end at full circle; and * **clock**: the full circle version of any of the above. Let’s take a deep dive. ### Definitions Given: * **n**: the number of labels to position on the gauge; and * **slice**: fraction of a full circle used for the gauge; for example, _slice_ = ½ implies a semicircle. Based on these givens, a number of other parameters can be derived: * **step angle**, angle between two subsequent labels; angle of a single part. * **start angle** of gauge. * **label start**: start angle of first label. * **wedge**: total length of gauge (baseline/topline). * **ticks**: number of ticks. | kind | step angle | start angle | label start | ticks | wedge | |--------|-----------------|-----------------|-----------------|-------|--------------------| | gauge | slice ÷ (n - 1) | 0 | 0 | n | slice | | wheel | slice ÷ (n - 1) | –½ × step angle | 0 | n + 1 | slice + step angle | | strict | slice ÷ n | 0 | ½ × step angle | n + 1 | slice | ### Leading Labels The labels are leading. Everything is rendered using the labels as basis, as reference. So if you want to position 13 labels ([0, 12], _n_ = 13) and your slice is a semicircle (_slice_ = π), you have to partition your slice in 13 – 1 = 12 parts. Each part then has an angle of π ÷ 12. ### Gauge To create a gauge, add tickmarks at each label position, and shift it inwards or outwards until it is pleasantly separated from the label. Optionally, add a baseline. ### Wheel Putting each label in its own cell or box turns a gauge into a wheel. Boxing the labels can be done by partitioning two consecutive labels with a line in between. It is similar to placing tickmarks, starting at ½ a _step angle_ before the first label position, as well as an extra one for the nth box to close it. So you need _n_ + 1 lines. Adding an inner and outer ring, touching the tickmarks at either end, completes the boxing. Note that the first and last box extend ½ a _step angle_ beyond _slice_, so the total ring length or _wedge_ is _slice_ + _step angle_. ### Clock A clock is a closed gauge, going full circle (360°). This implies that the first and last value (and its boxes when its type is a wheel) overlap. This means two things: 1. The labels must include both its first and next wrap-around value (see [modular arithmetic](https://en.wikipedia.org/wiki/Modular_arithmetic)). For example, a 12-hour clock needs 13 labels: [0, 12]. The 0 and 12 are quivalent (12 mod 12 == 0, or 0 ≡ 12 (mod 12)). Make sure to include the first modulus in the clock’s value range. 1. When closed, either the first or last value (and its optional box) is suppressed. For example, a 12-hour clock displays 12 rather than 0 at the wrap around position, so suppresses its 0. ### Strict Boxing the labels like described above extends the _slice_ with ½ a _step angle_ on either side of the slice. To scrictly squeeze all boxes into _slice_, divide it in _n_ rather than _n_ – 1 parts. Therefore, _step angle_ = _slice_ ÷ _n_. The first tickmark starts at 0, while the first label starts at ½ _step angle_. `31:T561,temperature = { const t = scales(temp) const source = t.source const fahrenheit = t.units.fahrenheit return ({ quantity: capitalize(t.quantity), face: "none", ring: "grey", text: "black", dot: { color: "lightgrey", radius: 15/100 }, background: fill, ...config, bands, scales: [ { ...source, side: +1, value: source.amount(value), color: "black", baseline: 2/200, alignTickmarks, ticks: [ { ...major }, { ...medior, divisions: 2 }, { ...minor, divisions: 10 }, ], }, { ...fahrenheit, side: -1, value: fahrenheit.amount(value), color: "red", baseline: 2/200, alignTickmarks, ticks: [ { ...major }, { ...medior, divisions: 2 }, { ...minor, divisions: 10 }, ], } ], hands: [ { value, color: "green", start: 12/100, stop: 38/100, width: 2/200, }, { value: 0, color: "green", show: showBufferStop, start: axesRadius - + 5/100, stop: axesRadius + 5/100, width: 2/100, }, { value: slice, color: "red", show: showBufferStop, start: axesRadius - + 5/100, stop: axesRadius + 5/100, width: 2/100, }, ] }) }32:T487,pressure = { const p = scales(press) const psi = p.units.psi const source = p.source return ({ quantity: capitalize(p.quantity), face: "none", ring: "DeepSkyBlue", text: "black", dot: "grey", background: fill, ...config, scale: [ { ...source, value: source.amount(value), color: "black", scale: 1, alignValues: 41/100, baseline: 2/200, alignTickmarks, ticks: [ { ...major }, { ...minor, divisions: 10 }, ], }, { ...psi, side: -1, value: psi.amount(value), color: "red", alignValues: 60/100, baseline: 2/200, alignTickmarks, ticks: [ { ...major }, { ...medior, divisions: 2 }, { ...minor, divisions: 10 }, ], } ], hands: { main: {color: "black", width: 4/200, start: 2/10, stop: 400/1000}, min: {color: "black", width: 2/100, start: 4/10, stop: 5/10}, max: {color: "blue", width: 2/100, start: 4/10, stop: 5/10}, }, }) }33:T568,speed = { const s = scales(vroom) const source = s.source const mph = s.units.mph const r = 35/100 return ({ quantity: capitalize(s.quantity), face: "dimgray", text: "lightyellow", dot: { color:"steelblue", radius: .15 }, background: "dimgray", bands, ...config, scale: [ { ...source, value: source.amount(value), color: "lightyellow", baseline: 2/200, side: +1, ticks: [ { ...major, align: alignTickmarks, steps: source.labels.length }, { ...medior, align: alignTickmarks, steps: source.labels.length, divisions: 2 }, { ...minor, align: alignTickmarks, steps: source.labels.length, divisions: 10 }, ], }, { ...mph, value: mph.amount(value), color: "gold", baseline: 2/200, side: -1, ticks: [ { ...major, align: 0, steps: mph.labels.length }, // { ...medior, steps: fahrenheit.labels.length, divisions: 2 }, { ...minor, align: 0, steps: mph.labels.length, divisions: 10 }, ], } ], hands: { main: {color: "yellow", width: 3/100, start: 20/100, stop: 45/100}, min: {color: "lightblue", width: 2/100, start: 45/100, stop: 55/100}, max: {color: "lightgreen", width: 2/100, start: 45/100, stop: 55/100}, }, }) }34:T400,tickers = (gauge, scale, ticker, t) => { // steps defaults to the number of labels of the scale, yet can be specified on ticker level const steps = ((ticker.steps ?? scale.labels.length) - 1) * (ticker.divisions ?? 1) const side = (scale.side ?? +1) // side can be +1 or -1 and defaults to +1 const s = (1 - side) / 2 // side === +1 => s = 0, side === -1 => s = 1 const offset = side * (gauge.scaleGap + (scale.alignTickmarks ?? 1) * ticker.length) + s * ticker.length const begin = gauge.axesRadius + offset const close = begin - ticker.length const stepSize = scale.normal.extent / steps const beginAngle = scale.normal.domain[0] let ticks = `` for (let i = 0; i <= steps; i++) ticks += `` return `${ticks}` }35:[] 2e:{"title":"Donut","cells":[{"id":82,"value":"md`# Donut`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"Gauge.show(gauge)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof quantity = radio({\n title: 'Style',\n options: [\n { label: 'Temperature', value: 'temperature' },\n { label: 'Temperature (black)', value: 'temperatureBlack' },\n { label: 'Pressure', value: 'pressure' },\n { label: 'Speed', value: 'speed' },\n // { label: 'Acceleration', value: 'acceleration' },\n { label: 'Clock', value: 'clock' },\n ],\n value: 'temperature'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"viewof value = \nslider({\n min: 0, \n max: 1,\n step: .001,\n precision: 3,\n value: 500/1100,\n format: v => `${1000 * v}‰`,\n title: `Value`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"viewof slice = slider({\n min: 0, \n max: 1,\n step: .01,\n value: 9/12,\n format: v => `${100 * v | 0}%`,\n title: `Slice`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof align = slider({\n min: 0, \n max: 1,\n step: .01,\n value: 6/12,\n format: v => `${100 * v | 0}%`,\n title: `Align Axes`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3308,"value":"viewof axesRadius = slider({\n title: \"Axes Radius\",\n min: 0, \n max: 1/2,\n precision: 3,\n value: 32/100,\n // format: v => `${100 * v | 0}%`,\n format: v => `${1000 * v}‰`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3247,"value":"viewof scaleGap = slider({\n title: \"Scale Gap\",\n description: \"Gap between axis 1 and 2 (if any).\",\n min: -.1, \n max: .1,\n precision: 3,\n value: .01,\n format: v => `${1000 * v}‰`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2849,"value":"viewof alignTickmarks = slider({\n title: \"Align Tickmarks\",\n description: \"Shift tickmarks up or down.\",\n min: 0, \n max: 1,\n precision: 3,\n value: 1000/1000,\n format: v => `${1000 * v}‰`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2838,"value":"viewof alignValues = slider({\n title: \"Align Values\",\n description: \"Shift values up or down.\",\n min: -.2, \n max: +.2,\n precision: 3,\n value: .1,\n // format: v => `${(100 * v).toPrecision(3)}%`,\n format: v => `${1000 * v}‰`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof showBands = checkbox({\n options: [\n { value: \"true\", label: \"Show bands if present\" },\n ],\n value: \"true\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3200,"value":"viewof showCenter = checkbox({\n options: [\n { value: \"true\", label: \"Show center\" },\n ],\n value: \"true\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2826,"value":"viewof showTickmarks = checkbox({\n options: [\n { value: \"true\", label: \"Show tickmarks\" },\n ],\n value: \"true\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3611,"value":"viewof fontSize = slider({\n title: \"Font Size\",\n min: 0.1, \n max: 2,\n precision: 3,\n value: 1,\n format: v => `${1000 * v}‰`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof rotate = slider({\n min: 0, \n max: 1,\n step:.01,\n value: 3/4,\n title: `Rotation of scale, tickmarks, and needle`,\n description: `Rotations start at 3 o’clock.`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"viewof precision = slider({\n title: `Precision of values`,\n // description: \"Size of dial (100% fits reference scale snugly in canvas)\",\n min: 0, \n max: 3,\n step: 1,\n value: 0,\n // format: v => `${100 * v | 0}%`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof size = slider({\n title: `Dial Size`,\n description: \"Size of dial (100% fits reference scale snugly in canvas)\",\n min: 0, \n max: 1,\n step: .01,\n value: 1,\n format: v => `${100 * v | 0}%`,\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2268,"value":"viewof zoom = slider({\n title: `Canvas Width`,\n // description: \"Zoom width of canvas\",\n min: .1, \n max: 2,\n step: .01,\n value: .5,\n format: v => `${100 * v | 0}%`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3582,"value":"viewof bandRadius = slider({\n title: \"Band Radius\",\n min: 0, \n max: 1/2,\n precision: 3,\n value: 166/1000,\n // format: v => `${100 * v | 0}%`,\n format: v => `${1000 * v}‰`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof strokeWidth = slider({\n min: 0, \n max: 1,\n step: .01,\n value: .02,\n format: v => 100 * v | 0 + \"%\",\n title: `Band width`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof showBufferStop = checkbox({\n options: [\n { value: \"true\", label: \"Show stops if present\" },\n ],\n value: \"none\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"viewof rotateClock = slider({\n min: 0, \n max: 1,\n step:.05,\n value: 0,\n title: `Rotation of whole clock`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof showBackgroundColor = checkbox({\n // title: \"Show background color\",\n options: [\n { value: \"true\", label: \"Show background color\" },\n ],\n value: \"none\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof fill = color({\n value: \"#ffecd5\",\n title: \"Background Color\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof showCrosshairs = checkbox({\n options: [\n { value: \"true\", label: \"Show crosshairs\" },\n ],\n value: \"none\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3278,"value":"viewof showAnimation = checkbox({\n options: [\n { value: \"true\", label: \"Show Animation\" },\n ],\n value: \"false\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof linecap = radio({\n title: 'Linecap',\n options: [\n { label: 'Butt', value: 'butt' },\n { label: 'Round', value: 'round' },\n { label: 'Square', value: 'square' },\n ],\n value: 'butt'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3983,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4101,"value":"gauge = gauges[quantity]","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`### Styles—light, dark, google, clock`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"gauges = ({\n pressure,\n speed,\n // acceleration,\n temperature,\n temperatureBlack,\n \"clock\": clocker,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"md`### Temperature`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"temp = {\n\n const units = ({\n\n celcius: {\n unit: {\n name: \"Celcius\",\n symbol: \"°C\"\n },\n domain: [0, 100],\n },\n\n fahrenheit: {\n unit: {\n name: \"Fahrenheit\",\n symbol: \"°F\"\n },\n recast: {\n from: c => 9/5 * c + 32,\n into: f => 5/9 * (f - 32),\n }\n },\n\n })\n\n return ({\n quantity: \"temperature\",\n source: units.celcius,\n units,\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":4076,"value":"scales(temp)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2736,"value":"tempBlack = {\n\n const units = ({\n\n celcius: {\n unit: {\n name: \"Celcius\",\n symbol: \"°C\"\n },\n domain: [0, 120],\n },\n\n })\n\n return ({\n quantity: \"temperature\",\n source: units.celcius,\n units,\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2738,"value":"temperatureBlack = {\n\n const t = scales(tempBlack)\n const source = t.source\n\n return ({\n quantity: capitalize(t.quantity),\n face: \"black\",\n ring: \"grey\",\n text: \"white\",\n dot: { radius: 20/100, color: \"silver\"},\n background: fill,\n ...config,\n rotate: 0 + rotate,\n align: 0,\n slice: 3/4,\n axesRadius: 480/1000,\n bands,\n scale: [\n {\n ...source,\n side: -1,\n value: source.amount(value),\n color: \"white\",\n baseline: 1/200,\n ticks: [\n { ...major, length: 5/100, width: 1/100 },\n { ...medior, divisions: 2 },\n { ...minor, divisions: 10 },\n ],\n },\n ],\n hands: {\n main: {color: \"red\", width: 5/200, start: 0/10, stop: 45/100},\n },\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"md`### Pressure`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"press = {\n \n const units = ({\n \n kpa: {\n unit: {\n name: \"kilpoascal\",\n symbol: \"kPa\",\n },\n domain: [0, 1100],\n },\n \n psi: {\n unit: {\n name: \"pounds per square inch\",\n symbol: \"psi\"\n },\n recast: {\n from: n => n / 6.89475728,\n into: n => n * 6.89475728,\n }\n },\n\n })\n\n return ({\n quantity: \"pressure\",\n source: units.kpa,\n units,\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"md`### Speed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2361,"value":"vroom = {\n \n const units = ({\n \n kmph: {\n unit: {\n name: \"kilometer per second\",\n symbol: \"kmph\",\n },\n domain: [0, 200],\n },\n \n mph: {\n unit: {\n name: \"miles per hour\",\n symbol: \"mph\"\n },\n recast: {\n from: n => n / 1.60934,\n into: n => n * 1.60934,\n }\n },\n\n })\n\n return ({\n quantity: \"speed\",\n source: units.kmph,\n units,\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"md`### Time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2377,"value":"ticktock = {\n\n const units = ({\n\n seconds: {\n unit: {\n name: \"seconds\",\n symbol: \"s\"\n },\n domain: [0, 60],\n },\n\n // hours: {\n // unit: {\n // name: \"hours\",\n // symbol: \"h\"\n // },\n // recast: {\n // from: _ => _ / 3600,\n // into: _ => _ * 3600,\n // }\n // },\n\n })\n\n return ({\n quantity: \"time\",\n source: units.seconds,\n units,\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"clocker = {\n\n const t = scales(ticktock)\n // const hours = t.units.hours\n const source = t.source\n const r = .35\n\n return ({\n quantity: capitalize(t.quantity),\n face: \"none\",\n ring: \"black\",\n text: \"black\",\n dot: \"red\",\n ...config,\n scale: [\n {\n ...source,\n value: source.amount(value),\n color: \"black\",\n // baseline: 1/500,\n ticks: [\n { ...major, width: 4/200, length: 5/100,},\n { ...minor, width: 1/200, length: 5/100, divisions: 5 },\n ],\n },\n ],\n hands: {\n main: {color: \"red\", width: 1/100, start: -1/10, stop: 8/20},\n },\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4092,"value":"Gauge = ({\n clock,\n show,\n major,\n medior,\n minor,\n scales,\n capitalize,\n fill,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"md`### Styles—global`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"config = ({\n value: value,\n width: width / 2,\n size,\n slice,\n align,\n rotate,\n linecap,\n precision,\n rim: { width: 2/100, color: \"grey\"},\n axesRadius,\n scaleGap,\n alignValues,\n showCenter,\n showBands: showBands === \"true\",\n showTickmarks,\n fontSize,\n rotate,\n rotateClock,\n precision,\n bandRadius,\n strokeWidth,\n showBufferStop,\n showCrosshairs,\n showBackgroundColor,\n linecap,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"bands = ({\n config: runningTotal(colorbands),\n radius: bandRadius,\n width: strokeWidth,\n opacity: 1,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"colorbands = [\n { length: 75/100, stroke: \"green\" },\n { length: 15/100, stroke: \"orange\" },\n { length: 10/100, stroke: \"red\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"major = ({\n name: \"major\",\n width: 3/300,\n length: 5/100,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2156,"value":"medior = ({\n name: \"medior\",\n width: 2/300,\n length: 4/100,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"minor = ({\n name: \"minor\",\n width: 1/300,\n length: 3/100,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"fifths= [\"C\",\"G\",\"D\",\"A\",\"E\",\"B\",\"F♯\",\"D♭\",\"A♭\",\"E♭\",\"B♭\",\"F\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"twelve = ranger([0, 11], 1, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"md`### Zandbak`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## Artists`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4209,"value":"defs = (gauge) => `\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`### Clock, Gauge, and Meter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"clock = (gauge) => {\n return ``\n + face(gauge)\n + meter(gauge)\n // + title(gauge)\n + center(gauge)\n // + shine()\n + ``\n + crosshair(gauge.showCrosshairs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3065,"value":"shine = () => ``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"meter = (gauge) =>\n` `\n+ bander(gauge)\n+ axes(gauge)\n+ hands(gauge)\n+ dot(gauge)\n+ ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":4096,"value":"show = (gauge) => {\n const w = gauge.width ?? width\n const d = ``\n return svg`${d}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`### Bands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"band = (gauge, index) => {\n\n if (gauge.bands === undefined) return \"\"\n\n const b = ({...gauge.bands, ...gauge.bands.config[index]})\n\n return arc({\n name: `band-${index}`,\n ...b,\n start: gauge.slice * b.start,\n length: gauge.slice * b.length,\n linecap: gauge.linecap,\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"bander = gauge => \ngauge.showBands && gauge.bands !== undefined\n? `${gauge.bands.config.reduce((accu, k, i) => accu + band(gauge, i), \"\")}`\n: \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`### Axes and Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4428,"value":"gauge.scales[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"axes = (gauge) => `${gauge.scales.reduce((accu, scale) => accu + axis(gauge, scale), \"\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3544,"value":"axis = (gauge, scale) =>\n``\n+ baseline(gauge, scale)\n+ tickmarks(gauge, scale)\n+ values(gauge, scale)\n+ \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3534,"value":"tickmarks = (gauge, scale) =>\nshowTickmarks === \"true\"\n? scale.ticks.reduce((accu, t, i) => accu + tickers(gauge, scale, t, i), \"\") \n: \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"baseline = (gauge, scale) => {\n const length = gauge.slice * scale.scale\n const l2 = gauge.slice * scale.normal.extent\n\n return scale.baseline === undefined\n ? \"\"\n : arc({\n name: \"baseline\",\n radius: gauge.axesRadius + (scale.side ?? 1) * gauge.scaleGap,\n start: gauge.slice * scale.normal.domain[0],\n length: +l2,\n stroke: scale.color,\n width: scale.baseline,\n linecap: \"square\"\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2112,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"values = (style, scale) => ``\n+ labels(\n {\n style,\n scale,\n angle: style.slice * scale.normal.domain[0],\n stepSize: style.slice * scale.normal.extent / (scale.labels.length - 1),\n orientation: style.slice * style.align - style.rotate, \n radius: style.axesRadius - 1/2 + (scale.side ?? 1) * (style.alignValues + style.scaleGap),\n }\n)\n+ ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"labels = ({style, scale, angle, stepSize, radius, orientation}) => \nscale.labels.reduce(\n (accu, text, i) => accu + place({\n orbit: angle + i * stepSize,\n radius,\n orientation,\n color: scale.color,\n text,\n hide: style.slice === 1 && i === 0 // when clock: slice === 1 => hide first value\n }),\n \"\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"place = ({orbit, radius, orientation, color, text, hide = false}) => \nhide\n? \"\"\n: ``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"arc = ({name, radius, start, length, stroke = \"black\", width, linecap = \"butt\", opacity = 1}) => \n``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`### Face, Values & Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"face = (style) => ``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3035,"value":"center = gauge => gauge.showCenter\n? gauge.scales.reduce(\n (accu, scale, i) =>\n accu\n + ``\n + `${fix(scale.value, gauge.precision)} ${scale.unit.symbol}`\n + ``,\n \"\")\n+ title(gauge)\n: \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3028,"value":"dot = (gauge) => gauge.showCenter\n? ``\n: \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2636,"value":"title = (gauge) => gauge.showCenter\n? `${gauge.quantity}`\n: \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"animate = (from, to) => showAnimation ? `\n`\n: \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`### Hands & Buffer Stops`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"hands = (gauge) => {\n\n const lala = (hand) => {\n const {show, color, width, value, start, stop, linecap} = hand\n return (show ?? true) ? ``\n : \"\"\n }\n \n return `${gauge.hands.reduce((accu, hand) => accu + lala(hand), \"\")}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"crosshair = (show) => \nshow\n? ``\n+ ``\n+ ``\n+ ``\n: \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`## Assistants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"ranger = ([min, max], step, clockMode) => {\n const list = Array.from({length: (max - min) / step + 1}, (_, i) => min + i * step)\n if (clockMode && list.length > 0) list[0] = max + 1\n return list\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"runningTotal = a => {\n let start = 0\n return a === undefined\n ? a\n : a.map(\n k => {\n const e = ({start, ...k})\n start += k.length\n return e\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"p = n => `${(100 * n).toFixed(1)}%`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"fix = (x, p = 2) => x.toFixed(p)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"rad = r => 2 * Math.PI * r","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"deg = n => fix(360 * n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1711,"value":"log = (...args) => console.log(...args)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`### Sources\n* [Scratch-made SVG Donut & Pie Charts in HTML5 « Mark Caron](https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72)\n* [Building a Donut Chart with Vue and SVG « Salomone Baquis](https://css-tricks.com/building-a-donut-chart-with-vue-and-svg/)\n* [Pure CSS/SVG Donut Chart Animated With Percentage « Jan Verstraete](https://codepen.io/janverstr/pen/PvPoaV)\n* [SVG Donut Chart with Dynamic Values « Manas Gupta](https://codepen.io/hue94/pen/NgMGWO)\n* [Percentage Based SVG Stroke-DashArray « Victor Johnson](https://whiff.dev/2019/01/07/creating-an-svg-spinner/)\n* [Let's Talk About Dials « Joanne Cheng](https://thoughtbot.com/blog/lets-talk-about-dials)\n* [Anatomy of a Gauge Chart « amCharts](https://www.amcharts.com/docs/v4/chart-types/gauge-chart/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"w = u(width / u() | 0) * zoom","pinned":false,"hidden":false,"mode":"ojs"},{"id":2271,"value":"zoom","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"hw = w / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"hh = hw","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"u = (n = 1) => 36 * n","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"import {scales} from \"@martien/nice\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2121,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {slider, radio, checkbox, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}