The avatar for @martien
Martien van Steenbergen
Wise Fool. Visioneer.
Published
Showroom
Edited
May 3, 2021
1 fork
Importers
7 stars
Showroom
Lambdoma table of ratiosGeometric construction of square rootsDieter RamsAudio FiltersHarmony Map45 degree gridTexture—Generative SnacksE series of preferred numbersWavesRingsSol Lewitt – Wall Drawing 273Test CardRadar Screen GlowStrategy CanvasSun LogoCOVID-19 Netherlands Reproduction Number TutorialRun PlotCOVID-19-NL daily reported per MHSBlock QuoteTesla « Hoshin KanriSimultaanlimietSVG PatternsTartanBillboardFlowerElectronic color code
Donut
COVID-19 ReproductiegetalSTER & CultuurE series of preferred numbers and their colorsMoon PhasesX-MatrixMagic Balls Factory
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
gauge = gauges[quantity]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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,
},
]
})
}
Insert cell
scales(temp)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Gauge = ({
clock,
show,
major,
medior,
minor,
scales,
capitalize,
fill,
})
Insert cell
Insert cell
config = ({
value: value,
width: width / 2,
size,
slice,
align,
rotate,
linecap,
precision,
rim: { width: 2/100, color: "grey"},
axesRadius,
scaleGap,
alignValues,
showCenter,
showBands: showBands === "true",
showTickmarks,
fontSize,
rotate,
rotateClock,
precision,
bandRadius,
strokeWidth,
showBufferStop,
showCrosshairs,
showBackgroundColor,
linecap,
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
defs = (gauge) => `<defs>
<style>

.number, .value, .title {
font-size: 100%;
font-weight: 600;
font-family: AvenirNextCondensed-UltraLight, sans-serif;
text-anchor: middle;
alignment-baseline: central;
}

.value {
}

.title {
text-transform: uppercase;
}

.hair {
stroke-width: 1;
stroke: black;
}

</style>
</defs>`
Insert cell
Insert cell
clock = (gauge) => {
return `<g name="gauge" transform="rotate(${deg(gauge.rotateClock)}) scale(${gauge?.size ?? 1})">`
+ face(gauge)
+ meter(gauge)
// + title(gauge)
+ center(gauge)
// + shine()
+ `</g>`
+ crosshair(gauge.showCrosshairs)
}
Insert cell
Insert cell
meter = (gauge) =>
`<g name="meter" transform="rotate(${deg(gauge.rotate - slice * gauge.align)})"> `
+ bander(gauge)
+ axes(gauge)
+ hands(gauge)
+ dot(gauge)
+ `</g>`
Insert cell
show = (gauge) => {
const w = gauge.width ?? width
const d = `<svg width="${w}" height="${w}" viewBox="${[-w/2, -w/2, w, w]}">`
+ defs(gauge)
+ `<rect name="panel" x="-50%" y="-50%" width="100%" height="100%" `
+ `fill="${gauge.showBackgroundColor ? gauge.background : "none"}"/>`
+ clock(gauge)
+ `</svg>`
return svg`${d}`
}
Insert cell
Insert cell
Insert cell
bander = gauge =>
gauge.showBands && gauge.bands !== undefined
? `<g name="bands">${gauge.bands.config.reduce((accu, k, i) => accu + band(gauge, i), "")}</g>`
: ""
Insert cell
Insert cell
gauge.scales[0]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
center = gauge => gauge.showCenter
? gauge.scales.reduce(
(accu, scale, i) =>
accu
+ `<text dy="${-7 * (1 - 2 * (i % 2))}%" ` // positions text above or below center of face, depending on i
+ `class="value" `
+ `fill="${scale.color}">`
+ `${fix(scale.value, gauge.precision)} ${scale.unit.symbol}`
+ `</text>`,
"")
+ title(gauge)
: ""
Insert cell
dot = (gauge) => gauge.showCenter
? `<circle r="${p(gauge.dot?.radius ?? 15/100)}" fill="${gauge.dot?.color ?? 'none'}" />`
: ""
Insert cell
title = (gauge) => gauge.showCenter
? `<g name="labels"><text class="title">${gauge.quantity}</text></g>`
: ""
Insert cell
Insert cell
Insert cell
hands = (gauge) => {

const lala = (hand) => {
const {show, color, width, value, start, stop, linecap} = hand
return (show ?? true) ? `<line `
+ `stroke="${color}" `
+ `stroke-width="${p(width)}" `
+ `transform="rotate(${deg(value * gauge.slice)})" `
+ `x1="${p(start ?? 0)}" `
+ `x2="${p(stop ?? 0)}" `
+ `stroke-linecap="${linecap ?? "round"}" `
+ `/>`
: ""
}
return `<g name="hands">${gauge.hands.reduce((accu, hand) => accu + lala(hand), "")}</g>`
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
zoom
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more