2b:null 2c:["$","title",null,{"children":"Linear Gauge | Nicolas Vanhoren | Observable"}] 31:T167f,linearGauge = function(props) { const el = d3.create('svg').nodes()[0] for (const [key, val] of Object.entries(props.style || {})) { el.style[key] = val } const init = function(el, props) { const {direction, zones, neutralColor, startPosition, transitionTime, relativeArrowLength, relativeArrowTickness} = Object.assign({ direction:'left', zones: Object.freeze([]), neutralColor: 'black', startPosition: 0, transitionTime: 0, relativeArrowLength: 1, relativeArrowTickness: 1 }, props) const baseArrowLength = 55 const baseArrowTickness = 25 const arrowLength = baseArrowLength * relativeArrowLength const arrowTickness = baseArrowTickness * relativeArrowTickness const mainLineWidth = 20 const cheight = 300 const cwidth = arrowLength + (mainLineWidth / 2) const top = (-cheight / 2) + (arrowTickness / 2) const bottom = (cheight / 2) - (arrowTickness / 2) const mainLineHeight = bottom - top const zoneSpace = 6 const zoneWidth = 5 const zoneEndsLength = 16 const zoneEndsWidth = 5 const scale = d3.scaleLinear() .domain([0, 1]) .range([bottom, top]) .clamp(true) const svg = d3.select(el) .attr('viewBox', ['left', 'right'].includes(direction) ? [-arrowLength, -cheight / 2, cwidth, cheight] : [-cheight / 2, -arrowLength, cheight, cwidth]) const g = svg.append('g') switch (direction) { case 'up': { g.attr('transform', `rotate(90)`) break } case 'right': { g.attr('transform', `rotate(180, ${-arrowLength + cwidth / 2}, 0) scale(1, -1)`) break } case 'down': { g.attr('transform', `translate(0, ${-arrowLength + mainLineWidth / 2}) rotate(-90) scale(1, -1)`) break } } g.append('rect') .classed('main-line-background', true) .attr('x', - (mainLineWidth / 2)) .attr('y', top) .attr('width', mainLineWidth) .attr('height', cheight - arrowTickness) .style('fill-opacity', 0.5) .style('transition', `all ${transitionTime}s linear`) const maskId = _.uniqueId('mask') const mask = svg.append("mask") .attr("id", maskId) // display rect mask.append('rect') .attr('x', - (mainLineWidth / 2)) .attr('y', top) .attr('width', mainLineWidth) .attr('height', mainLineHeight) .attr('fill', 'white') // hide rects mask.append('rect') .attr('x', - (mainLineWidth / 2)) .attr('y', scale(startPosition) - mainLineHeight) .attr('width', mainLineWidth) .attr('height', mainLineHeight) .attr('fill', 'black') .classed('top-mask', true) .style('transition', `all ${transitionTime}s linear`) mask.append('rect') .attr('x', - (mainLineWidth / 2)) .attr('y', scale(startPosition)) .attr('width', mainLineWidth) .attr('height', mainLineHeight) .attr('fill', 'black') .classed('bottom-mask', true) .style('transition', `all ${transitionTime}s linear`) g.append('rect') .classed('main-line-foreground', true) .attr('x', - (mainLineWidth / 2)) .attr('y', top) .attr('width', mainLineWidth) .attr('height', cheight - arrowTickness) .attr("mask",`url(#${maskId})`) .style('transition', `all ${transitionTime}s linear`) const arrowPath = (() => { const p = d3.path() const right = 0 const left = - arrowLength p.moveTo(right, 0) p.lineTo(left, - arrowTickness / 2) p.lineTo(left, arrowTickness / 2) p.lineTo(right, 0) return p })() g.append("path") .classed('arrow', true) .attr("d", arrowPath) .style('transition', `all ${transitionTime}s linear`); for (const zone of zones) { const from = Math.min(zone[0], zone[1]) const to = Math.max(zone[0], zone[1]) g.append('rect') .attr('x', (- mainLineWidth / 2) - zoneSpace - zoneWidth) .attr('y', scale(to)) .attr('width', zoneWidth) .attr('height', scale(from) - scale(to)) .attr('fill', neutralColor) // zone top line g.append('rect') .attr('x', (- mainLineWidth / 2) - zoneSpace - zoneEndsLength) .attr('y', Math.max(scale(to) - (zoneEndsWidth / 2), scale(1))) .attr('width', zoneEndsLength) .attr('height', zoneEndsWidth) .attr('fill', neutralColor) // zone bottom line g.append('rect') .attr('x', (- mainLineWidth / 2) - zoneSpace - zoneEndsLength) .attr('y', Math.min(scale(from) - (zoneEndsWidth / 2), scale(0) - (zoneEndsWidth))) .attr('width', zoneEndsLength) .attr('height', zoneEndsWidth) .attr('fill', neutralColor) } el.update = update el.initParams = { startPosition, scale } el.update(props) }; const update = function (props) { const {value, color} = Object.assign({ value: 0.5, color: 'black' }, props) const {startPosition, scale} = this.initParams const svg = d3.select(this) svg.select('.main-line-background') .attr('fill', color) svg.select('.main-line-foreground') .attr('fill', color) svg.select('.top-mask') .attr('transform', `translate(0, ${Math.min(scale(value) - scale(startPosition), -1)})`) svg.select('.bottom-mask') .attr('transform', `translate(0, ${Math.max(scale(value) - scale(startPosition), 1)})`) svg.select('.arrow') .attr('fill', color) .attr('transform', `translate(0, ${scale(value)})`) }; init(el, props) return el }32:[] 2f:{"id":"1f25c355b2bead12","slug":"linear-gauge","title":"Linear Gauge","thumbnail":"ab05fffb2f33d394c08f1d485e75fc2269fe4b3141229ec6a0a7561669b6ccf1","access_level":"public","create_time":"$D2019-11-15T14:41:01.928Z","update_time":"$D2021-02-16T16:04:43.712Z","view_time":null,"first_public_time":"$D2019-12-06T09:14:46.939Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3585875e0f870f7a","login":"nicolas-van","name":"Nicolas Vanhoren","avatar_url":"https://avatars-next.observableusercontent.com/1a727836e66a952cdf4aa7c3184eff2734e02a3606c160b15cef6ed7ffdf4cbd","tier":"starter_2024"},"version":749,"publish_version":749,"role":null,"authored":false,"authors":[{"type":"individual","id":"7f21ef6876c34105","login":"nicolas-van","name":"Nicolas Vanhoren","avatar_url":"https://avatars-next.observableusercontent.com/1a727836e66a952cdf4aa7c3184eff2734e02a3606c160b15cef6ed7ffdf4cbd","tier":null}],"members":[{"type":"individual","id":"7f21ef6876c34105","login":"nicolas-van","name":"Nicolas Vanhoren","avatar_url":"https://avatars-next.observableusercontent.com/1a727836e66a952cdf4aa7c3184eff2734e02a3606c160b15cef6ed7ffdf4cbd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Linear Gauge","cells":[{"id":0,"value":"md`# Linear Gauge`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"md`Temperature:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"viewof rpm = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"md`Direction:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"viewof direction = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"md`Style:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"viewof style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"rpm","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"{\n const elem = document.createElement('div')\n elem.innerHTML = `\n

\n `.trim()\n\n const gauge = linearGauge({value, direction, color, zones, style: JSON.parse(style), startPosition: 0.5, relativeArrowLength: 1, relativeArrowTickness: 1, neutralColor: '#999'})\n elem.querySelector(\"div\").appendChild(gauge)\n \n return elem\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"scaler = d3.scaleLinear().domain([0,100]).range([0, 1]).clamp(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"value = scaler(rpm);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"color = d3.scaleThreshold().domain([30, 60]).range([\"green\", \"orange\", \"red\"])(rpm);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"zones = [[scaler(30), scaler(60)], [scaler(60), scaler(100)], [scaler(0), scaler(10)]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require('d3@5.16.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"_ = require('lodash@4.17.20')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"