2b:null 2c:["$","title",null,{"children":"Radial Gauge | Nicolas Vanhoren | Observable"}] 31:T145e,radialGauge = (props) => { const el = d3.create('svg').nodes()[0] for (const [key, val] of Object.entries(props.style || {})) { el.style[key] = val } const init = (el, props) => { const {direction, zones, neutralColor, transitionTime, relativeArrowLength, relativeArrowTickness} = Object.assign({ direction: "down", zones: [], neutralColor: "black", transitionTime: 0, relativeArrowLength: 0.7, relativeArrowTickness: 1 }, props) const arrowPointTickness = 5; const baseArrowTickness = 20; const arrowTickness = baseArrowTickness * relativeArrowTickness const cwidth = 300; const cheight = (cwidth / 2) + (arrowTickness / 2); const start = - (Math.PI * 0.5); const end = Math.PI * 0.5; const outerRadius = cwidth / 2; const tickness = 15; const innerRadius = outerRadius - tickness; const baseArrowLength = innerRadius; const arrowLength = baseArrowLength * relativeArrowLength const scale = d3.scaleLinear() .domain([0, 1]) .range([(start * (180 / Math.PI))+2, (end * (180 / Math.PI)) - 2]) .clamp(true); const svg = d3.select(el) .attr('viewBox', _.includes(['up', 'down'], direction) ? [-cwidth / 2, -cwidth / 2, cwidth, cheight] : [-cwidth / 2, -cwidth / 2, cheight, cwidth]); const g = svg.append('g') switch (direction) { case 'left': { g.attr('transform', `translate(${(-cwidth / 2) + (arrowTickness / 2)}, 0) rotate(90) scale(-1, 1)`) break } case 'up': { g.attr('transform', `rotate(180, 0, ${(-cwidth / 4) + (arrowTickness / 4)}) scale(-1, 1)`) break } case 'right': { g.attr('transform', `rotate(-90)`) break } } const arc = d3.arc() .outerRadius(outerRadius) .innerRadius(innerRadius) .startAngle(start) .endAngle(end); g.append("path") .classed('background', true) .attr("d", arc) .style('fill-opacity', 0.5) .style('transition', `all ${transitionTime}s linear`) const clipPathId = _.uniqueId('circle-clip') svg.append("clipPath") .attr("id", clipPathId) .append("path") .attr('d', arc) .classed('circle-clip-path', true) .style('transition', `all ${transitionTime}s linear`) g.append("path") .classed('foreground', true) .attr("d", arc) .attr("clip-path",`url(#${clipPathId})`) .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]) const zoneGap = 5; const zoneSize = 5; const startAngle = (end - start) * from + start; const endAngle = (end - start) * to + start; const zoneArc = d3.arc() .outerRadius(innerRadius - zoneGap) .innerRadius(innerRadius - zoneGap - zoneSize) .startAngle(startAngle) .endAngle(endAngle); g.append("path") .attr("d", zoneArc) .style("fill", neutralColor); const handleSize = 15; const handleWidth = 0.02; const zoneStartArc = d3.arc() .outerRadius(innerRadius - zoneGap) .innerRadius(innerRadius - zoneGap - handleSize) .startAngle(Math.max(startAngle - handleWidth / 2, start)) .endAngle(Math.max(startAngle - handleWidth / 2, start) + handleWidth); g.append("path") .attr("d", zoneStartArc) .style("fill", neutralColor); const zoneEndArc = d3.arc() .outerRadius(innerRadius - zoneGap) .innerRadius(innerRadius - zoneGap - handleSize) .startAngle(Math.min(endAngle + handleWidth / 2, end) - handleWidth) .endAngle(Math.min(endAngle + handleWidth / 2, end)); g.append("path") .attr("d", zoneEndArc) .style("fill", neutralColor); } const arrowPath = (() => { const p = d3.path(); const upper = -innerRadius; const lower = -innerRadius + arrowLength; p.moveTo(0, lower); p.lineTo((-arrowTickness / 2), lower); p.lineTo(- (arrowPointTickness / 2), upper); p.lineTo((arrowPointTickness / 2), upper); p.lineTo((arrowTickness / 2), lower); p.lineTo(0, lower); return p; })(); g.append("path") .classed('arrow', true) .attr("d", arrowPath) .style('transition', `all ${transitionTime}s linear`) el.update = update el.initParams = { scale } el.update(props) }; const update = function(props) { const {value, color} = Object.assign({ value: 0.5, color: 'black' }, props) const {scale} = this.initParams const svg = d3.select(this) svg.select(".background") .style("fill", color) svg.select(".foreground") .style("fill", color) svg.select('.circle-clip-path') .attr('transform', `rotate(${scale(value) - 90},0,0)`) svg.select('.arrow') .attr("transform", `rotate(${scale(value)},0,0)`) .style("fill", color) }; init(el, props) return el }32:[] 2f:{"id":"266b745d383bb7fa","slug":"radial-gauge","title":"Radial Gauge","thumbnail":"713746e76a5e849866a9c11a6201161868fecf2bd71fce1466ff8fa889c85b89","access_level":"public","create_time":"$D2019-11-15T14:41:50.877Z","update_time":"$D2020-12-17T16:50:40.777Z","view_time":null,"first_public_time":"$D2020-12-17T16:50:49.552Z","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":444,"publish_version":444,"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":0,"collection":null,"type":"notebook","body":{"title":"Radial Gauge","cells":[{"id":0,"value":"md`# Radial Gauge`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"md`RPM:`","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":348,"value":"md`Direction:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"viewof direction = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"md`Size:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"viewof size = 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":13,"value":"radialGauge({value, color, direction, style:{width: \"\" + size + \"px\"}, zones})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"scaler = d3.scaleLinear().domain([1000,2000]).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([1, 1300, 1450, 1550, 1700]).range([\"black\", \"red\", \"orange\", \"green\", \"orange\", \"red\"])(rpm);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"zones = [[scaler(1000), scaler(1300)], [scaler(1300), scaler(1450)],\n [scaler(1550), scaler(1700)], [scaler(1700), scaler(2000)]]","pinned":false,"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"