3e:null 3f:["$","title",null,{"children":"Speedo | Bob Anson | Observable"}] 45: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_. `46:T57a,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: "white", // 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, }, ] }) }47: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}, }, }) }48: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}, }, }) }49: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}` }4a:[] 43:{"id":"0e0c148c48de36c7","slug":null,"title":"Speedo","thumbnail":"3e7239efd3659406b247d8034e08aae61b0bc80330a139ae4b82a94eaeb72e7d","access_level":"public","create_time":"$D2023-07-22T16:16:55.672Z","update_time":"$D2023-07-22T16:17:12.871Z","view_time":null,"first_public_time":"$D2023-07-22T16:16:55.672Z","has_unpublished_edits":null,"fork":{"id":"b408d7041a21e1e6","slug":"donut","title":"Donut","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"stars":2,"starred":false,"owner":{"type":"team","id":"a9510fb8bfbeb502","login":"54a60697c53675df","name":"Bob Anson","avatar_url":null,"tier":"starter_2024","bio":"","following":false},"version":4438,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a60697c53675df","login":"54a60697c53675df","name":"Bob Anson","avatar_url":null,"tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"54a60697c53675df","login":"54a60697c53675df","name":"Bob Anson","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Speedo","cells":[{"id":82,"value":"md`# Speedo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"Gauge.show(gauge)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof fill = color({\n value: \"#ffecd5\",\n title: \"Background Color\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3983,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4101,"value":"gauge = gauges[quantity]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"md`### Styles—light, dark, google, clock`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"gauges = ({\n pressure,\n speed,\n // acceleration,\n temperature,\n temperatureBlack,\n \"clock\": clocker,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"md`### Temperature`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4076,"value":"scales(temp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1817,"value":"md`### Pressure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"md`### Speed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1833,"value":"md`### Time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"md`### Styles—global`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"bands = ({\n config: runningTotal(colorbands),\n radius: bandRadius,\n width: strokeWidth,\n opacity: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"major = ({\n name: \"major\",\n width: 3/300,\n length: 5/100,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2156,"value":"medior = ({\n name: \"medior\",\n width: 2/300,\n length: 4/100,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"minor = ({\n name: \"minor\",\n width: 1/300,\n length: 3/100,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"fifths= [\"C\",\"G\",\"D\",\"A\",\"E\",\"B\",\"F♯\",\"D♭\",\"A♭\",\"E♭\",\"B♭\",\"F\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"twelve = ranger([0, 11], 1, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"md`### Zandbak`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`## Artists`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4209,"value":"defs = (gauge) => `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`### Clock, Gauge, and Meter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3065,"value":"shine = () => ``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`### Bands`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`### Axes and Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4428,"value":"gauge.scales[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"axes = (gauge) => `${gauge.scales.reduce((accu, scale) => accu + axis(gauge, scale), \"\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2112,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"place = ({orbit, radius, orientation, color, text, hide = false}) => \nhide\n? \"\"\n: ``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"arc = ({name, radius, start, length, stroke = \"black\", width, linecap = \"butt\", opacity = 1}) => \n``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`### Face, Values & Title`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"face = (style) => ``\n+ ``\n+ ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3028,"value":"dot = (gauge) => gauge.showCenter\n? ``\n: \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2636,"value":"title = (gauge) => gauge.showCenter\n? `${gauge.quantity}`\n: \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"animate = (from, to) => showAnimation ? `\n`\n: \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`### Hands & Buffer Stops`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"crosshair = (show) => \nshow\n? ``\n+ ``\n+ ``\n+ ``\n: \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Assistants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"p = n => `${(100 * n).toFixed(1)}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"fix = (x, p = 2) => x.toFixed(p)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"rad = r => 2 * Math.PI * r","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"deg = n => fix(360 * n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1711,"value":"log = (...args) => console.log(...args)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"w = u(width / u() | 0) * zoom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2271,"value":"zoom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"hw = w / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"hh = hw","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"u = (n = 1) => 36 * n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"import {scales} from \"@martien/nice\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2121,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {slider, radio, checkbox, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"