2b:null 2c:["$","title",null,{"children":"Navigation Gauges | Nicolas Vanhoren | Observable"}] 31:T559,viewof values = { const elem = document.createElement('div') elem.innerHTML = `

` const attitude = range2d({size: 150, x: [-(40 / 180) * Math.PI , (40 / 180) * Math.PI], y:[-1/6 * Math.PI, 1/6 * Math.PI]}) elem.querySelector('.attitude').appendChild(attitude) const speed = range2d({size: 150, x: [-10, 10], y: [-10, 10]}) elem.querySelector('.speed').appendChild(speed) const alt = range2d({size: 150, x: [-10, 10], y: [0, 100]}) elem.querySelector('.alt').appendChild(alt) const compass = range2d({size: 150, x: [-Math.PI, Math.PI], y: [-Math.PI, Math.PI]}) elem.querySelector('.compass').appendChild(compass) const sync = () => { elem.value = [attitude.value, speed.value, alt.value, compass.value] elem.dispatchEvent(new CustomEvent('input')) } attitude.addEventListener('input', sync) speed.addEventListener('input', sync) alt.addEventListener('input', sync) compass.addEventListener('input', sync) sync() return elem }32:Tae2,{ function htmlFragment (str) { const div = document.createElement('div') div.innerHTML = str return Array.from(div.children) } const elem = htmlFragment(`

`)[0] const horizon_ = horizon({roll: attitude[0], pitch: attitude[1]}) elem.querySelector('.horizon').appendChild(horizon_) const forwardSpeed = linearGauge({ value: d3.scaleLinear([-10, 10], [0, 1])(speed[1]), direction: 'left', color: 'white', zones: [], style: {height: size}, startPosition: 0.5 }) elem.querySelector('.forward-speed').appendChild(forwardSpeed) const lateralSpeed = linearGauge({ value: d3.scaleLinear([-10, 10], [0, 1])(speed[0]), direction: 'down', color: 'white', zones: [], style: {width: size}, startPosition: 0.5 }) elem.querySelector('.lateral-speed').appendChild(lateralSpeed) const altitudeVarietometer = values[2] const altimeter_ = altimeter({ altitude: altitudeVarietometer[1], indicators: [{color: 'rgb(91, 192, 222)', textColor: 'white', text: 'H', altitude: 7.2}] }) elem.querySelector('.altimeter').appendChild(altimeter_) const vspeed = linearGauge({ value: d3.scaleLinear([-10, 10], [0, 1])(altitudeVarietometer[0]), direction: 'right', color: 'white', zones: [], style: {height: size * 0.75}, startPosition: 0.5 }) elem.querySelector('.vspeed').appendChild(vspeed) const compass_ = compass({ orientation: orientation, direction: direction, indicators: [ {text: 'H', color: '#3A3F44', textColor: 'white', direction: Math.PI / 3} ] }) elem.querySelector('.compass').appendChild(compass_) const root = document.createElement('div') root.appendChild(elem) return root }33:T1ade,horizon = function(props) { const el = d3.create('svg').node() el.style.height = size el.style.width = size const cheight = 300 const cwidth = 300 const smallLineLength = 25 const bigLineLength = smallLineLength * 2 const lineStroke = 3 const fontSize = 25 const degreeScale = d3.scaleLinear().domain([-40, 40]).range([cheight / 2, - cheight / 2]) const degreesToRadian = (d) => d * (Math.PI/180) const radialSpace = 20 const radialOuterRadius = (cwidth / 2) - radialSpace const radialTickness = 3 const radialInnerRadius = radialOuterRadius - radialTickness const radialStart = degreesToRadian(-40) const radialEnd = degreesToRadian(40) const radialLineWidth = degreesToRadian(1) const radialBigLineLength = radialSpace const radialSmallLineLength = radialBigLineLength / 2 const arrowLength = 30 const arrowTickness = 15 const arrowPointTickness = 4 const init = function (el, { skyColor = "#5bc0de", groundColor = "#3A3F44", transitionTime = 0, ... other }) { const svg = d3.select(el) .attr('viewBox', [-cwidth / 2, -cheight / 2, cwidth, cheight]) const clipPathId = _.uniqueId('clip-path') svg.append("clipPath") .attr("id", clipPathId) .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", cwidth / 2) const clipper = svg.append("g") .attr("clip-path", `url(#${clipPathId})`) const clipped = clipper.append("g") .classed('clipped', true) .style('transition', `all ${transitionTime}s linear`) const totalHeight = Math.abs(degreeScale(-180) - degreeScale(180)) clipped.append("rect") .attr("x", - cwidth / 2) .attr("y", - totalHeight / 2) .attr("fill", skyColor) .attr("height", totalHeight / 2) .attr("width", cwidth) clipped.append("rect") .attr("x", - cwidth / 2) .attr("y", 0) .attr("fill", groundColor) .attr("height", totalHeight / 2) .attr("width", cwidth) clipped.append('line') .attr('x1', -cwidth / 2) .attr('y1', 0) .attr('x2', cwidth / 2) .attr('y2', 0) .attr('stroke', 'white') .attr('stroke-width', lineStroke) .style('opacity', 0.7) const defs = svg.append('defs') const gradientId = _.uniqueId('gradient') const gradient = defs.append('radialGradient') .attr('id', gradientId) gradient.append('stop') .attr('offset', '0%') .attr('stop-color', 'white') gradient.append('stop') .attr('offset', '70%') .attr('stop-color', 'white') gradient.append('stop') .attr('offset', '90%') .attr('stop-color', 'black') gradient.append('stop') .attr('offset', '100%') .attr('stop-color', 'black') const maskId = _.uniqueId('mask') const mask = svg.append('mask') .attr('id', maskId) mask.append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', cwidth / 2) .attr('fill', `url(#${gradientId})`) .classed('mask', true) .style('transition', `all ${transitionTime}s linear`) const grid = clipped.append('g') .style('opacity', 0.7) .attr('mask', `url(#${maskId})`) for (let i = -180; i <= 180; i += 5) { if (i === 0) { continue } const line = grid.append("line") .attr("y1", degreeScale(i)) .attr("y2", degreeScale(i)) .attr("stroke-width", lineStroke) .attr("stroke", "white") if (i % 10 !== 0) { // short line line.attr("x1", - smallLineLength / 2) .attr("x2", smallLineLength / 2) } else { // big line line.attr("x1", - bigLineLength / 2) .attr("x2", bigLineLength / 2) grid.append("text") .attr("x", (bigLineLength / 2) + 27) .attr("y", degreeScale(i) + 7) .attr("fill", "white") .attr("font-family", "monospace") .attr("font-size", fontSize) .attr("font-weight", "bolder") .attr("text-anchor", "middle") .text(_.padStart(`${Math.abs(i)}`, 3).replace(/ /g, '\xa0')) grid.append("text") .attr("x", (- bigLineLength / 2) - 27) .attr("y", degreeScale(i) + 7) .attr("fill", "white") .attr("font-family", "monospace") .attr("font-size", fontSize) .attr("font-weight", "bolder") .attr("text-anchor", "middle") .text(_.padEnd(`${Math.abs(i)}`, 3).replace(/ /g, '\xa0')) } } // horizontal guide svg.append("line") .attr("x1", -150) .attr("y1", 0) .attr("x2", -25) .attr("y2", 0) .attr("stroke-width", lineStroke) .attr("stroke", "white") svg.append("line") .attr("x1", -25) .attr("y1", 0) .attr("x2", -25) .attr("y2", 15) .attr("stroke-width", lineStroke * 0.8) .attr("stroke", "white") svg.append("line") .attr("x1", 150) .attr("y1", 0) .attr("x2", 25) .attr("y2", 0) .attr("stroke-width", lineStroke) .attr("stroke", "white") svg.append("line") .attr("x1", 25) .attr("y1", 0) .attr("x2", 25) .attr("y2", 15) .attr("stroke-width", lineStroke * 0.8) .attr("stroke", "white") // radial guide let j = 0 for (let i = radialStart; i < radialEnd + degreesToRadian(10); i += degreesToRadian(10)) { svg.append("path") .attr("d", d3.arc() .innerRadius(radialInnerRadius) .outerRadius(radialOuterRadius + (j % 2 === 0 ? radialBigLineLength : radialSmallLineLength)) .startAngle(i - radialLineWidth / 2) .endAngle(i + radialLineWidth / 2)) .attr('fill', 'white') j += 1 } // arrow svg.append("path") .classed('arrow', true) .attr("d", (() => { const p = d3.path() const upper = -radialInnerRadius const lower = upper + arrowLength p.moveTo(-arrowPointTickness / 2, upper) p.lineTo(-arrowTickness / 2, lower) p.lineTo(arrowTickness / 2, lower) p.lineTo(arrowPointTickness / 2, upper) p.closePath() return p })()) .attr('fill', 'white') .style('transition', `all ${transitionTime}s linear`) el.update = update el.update({ ... other }) } const update = function ({roll, pitch}) { const svg = d3.select(this) svg.select('.clipped') .attr("transform", `rotate(${-roll * 180 / Math.PI}) translate(0, ${degreeScale(pitch * 180 / Math.PI)})`) svg.select('.mask') .attr("transform", `translate(0, ${-degreeScale(pitch * 180 / Math.PI)})`) svg.select('.arrow') .attr('transform', `rotate(${-roll * 180 / Math.PI})`) }; init(el, props) return el }34:T1a9d,altimeter = function(props) { const el = d3.create('svg').nodes()[0] el.style.height = size const vwidth = 75 const vheight = 300 const border = 3 const left = (- vwidth / 2) + border const right = (vwidth / 2) - border const top = (- vheight / 2) + border const bottom = (vheight / 2) - border const spacing = 5 const span = 30 const indicationScale = d3.scaleLinear([0, span / 2], [0, top]) const indicationLineLength = 8 const indicationLineWidth = 3 const indicationTextSize = 20 const init = function(el, { neutralColor = 'white', centralTextColor = 'rgb(39, 43, 48)', transitionTime = 0, ... other }) { const svg = d3.select(el) .attr('viewBox', [-vwidth / 2, -vheight / 2, vwidth, vheight]) // border svg.append('rect') .attr('x', left - (border / 2)) .attr('y', top - (border / 2)) .attr('width', vwidth - border) .attr('height', vheight - border) .attr('stroke', neutralColor) .attr('stroke-width', border) .attr('fill', 'transparent') // mask const defs = svg.append('defs') const gradientId = _.uniqueId('gradient') const gradient = defs.append('linearGradient') .attr('id', gradientId) .attr('x1', '0%') .attr('y1', '0%') .attr('x2', '0%') .attr('y2', '100%') gradient.append('stop') .attr('offset', '0%') .attr('stop-color', 'black') gradient.append('stop') .attr('offset', '4%') .attr('stop-color', 'white') gradient.append('stop') .attr('offset', '96%') .attr('stop-color', 'white') gradient.append('stop') .attr('offset', '100%') .attr('stop-color', 'black') const maskId = _.uniqueId('mask') const mask = svg.append("mask") .attr("id", maskId) mask.append('rect') .attr('x', left) .attr('y', top) .attr('width', right - left) .attr('height', bottom - top) .attr('fill', `url(#${gradientId})`) const masked = svg.append('g') .attr("mask",`url(#${maskId})`) const content = masked.append('g') .classed('content', true) .style('transition', `all ${transitionTime}s linear`) content.append('g') .classed('indications', true) content.append('g') .classed('indicators', true) const text = svg.append('g') .classed('altitude-text', true) text.append('path') .attr("d", (() => { const p = d3.path() const upper = - indicationTextSize + 5 const lower = - upper const pointSize = 5 const offset = 10 const lefter = left + offset const righter = right - offset p.moveTo(left, - pointSize / 2) p.lineTo(lefter, upper) p.lineTo(righter, upper) p.lineTo(right, - pointSize / 2) p.lineTo(right, pointSize / 2) p.lineTo(righter, lower) p.lineTo(lefter, lower) p.lineTo(left, pointSize / 2) p.closePath() return p })()) .attr('fill', neutralColor) text.append('text') .attr('x', 0) .attr('y', indicationTextSize / 10) .attr('font-family', 'monospace') .attr('font-size', indicationTextSize) .attr('fill', centralTextColor) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') el.update = update el.initParams = { neutralColor, centralTextColor } el.update({ ... other }) }; const update = function ({ altitude = 0, indicators = [] }) { const { neutralColor } = this.initParams const svg = d3.select(this) const firstDown = Math.floor(altitude / spacing) * spacing const firstUp = firstDown + spacing const lastDown = Math.floor((firstDown - span * 1.5) / spacing) * spacing const lastUp = Math.floor((firstUp + span * 1.5) / spacing) * spacing const indications = [] for (let i = lastDown; i <= lastUp; i += spacing) { indications.push(i) } // create indications const indicationsBind = svg.select('.indications') .selectAll('.indication') .data(indications, (d) => d) const indication = indicationsBind.enter() .append('g') .classed('indication', true) .attr('transform', (d) => `translate(0, ${indicationScale(d)})`) indication.append('text') .attr('x', 0) .attr('y', indicationTextSize / 10) .attr('font-family', 'monospace') .attr('font-size', indicationTextSize) .attr('fill', neutralColor) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .text((d) => '' + d) indication.append('line') .attr('x1', left) .attr('y1', 0) .attr('x2', left + indicationLineLength) .attr('y2', 0) .attr('stroke', neutralColor) .attr('stroke-width', indicationLineWidth) indication.append('line') .attr('x1', right) .attr('y1', 0) .attr('x2', right - indicationLineLength) .attr('y2', 0) .attr('stroke', neutralColor) .attr('stroke-width', indicationLineWidth) indicationsBind.exit() .remove() // create indicators const indicatorsBind = svg.select('.indicators') .selectAll('.indicator') .data(indicators, ({text, color, textColor}) => `${text}-${color}-${textColor}`) const indicator = indicatorsBind .enter() .append('g') indicator.append('path') .attr("d", (() => { const p = d3.path() const upper = - indicationTextSize + 5 const lower = - upper const pointSize = (lower - upper) * 1.5 const offset = 10 const lefter = left + offset const righter = right - offset p.moveTo(left, - pointSize / 2) p.lineTo(lefter, upper) p.lineTo(righter, upper) p.lineTo(right, - pointSize / 2) p.lineTo(right, pointSize / 2) p.lineTo(righter, lower) p.lineTo(lefter, lower) p.lineTo(left, pointSize / 2) p.closePath() return p })()) .attr('fill', ({color}) => color) indicator.append('text') .attr('x', 0) .attr('y', indicationTextSize / 10) .attr('font-family', 'monospace') .attr('font-size', indicationTextSize) .attr('fill', ({textColor}) => textColor) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .text(({text}) => text) indicator.merge(indicatorsBind) .attr('transform', ({altitude}) => `translate(0, ${indicationScale(altitude)})`) indicatorsBind.exit() .remove() svg.select('.content') .attr('transform', `translate(0, ${-indicationScale(altitude)})`) svg.select('.altitude-text text') .text(`${Math.round(altitude)}`) }; init(el, props) return el }35:T1413,compass = function(props) { const el = d3.create('svg').node() el.style.width = size const vwidth = 300 const vheight = 300 const rotation = 0 const offset = 0 const left = (-vwidth / 2) + offset const top = (-vwidth / 2) + offset const smallLineLength = 5 const mediumLineLength = 12 const bigLineLength = 22 const lineOffset = 45 const lineWidth = 1.5 const textSize = 35 const arrowRadius = 30 const arrowWidth = 3 const goldenRatio = (1 + Math.sqrt(5)) / 2 const arrowPath = ((radius) => { const top = -radius const bottomAngle = 30 * (Math.PI / 180) const bottom = Math.cos(bottomAngle) * radius const p = d3.path() p.moveTo(0, top) p.lineTo(Math.sin(bottomAngle) * radius, bottom) p.lineTo(0, radius / goldenRatio) p.lineTo(- Math.sin(bottomAngle) * radius, bottom) p.closePath() return p })(arrowRadius) const directionLineWidth = 2 const indicatorOffset = 27 const indicatorTextSize = textSize * 0.8 const indicatorCircleRadius = (indicatorTextSize / 2) + 5 const init = function (el, { neutralColor = "white", transitionTime = 0, ... other }) { const svg = d3.select(el) .attr('viewBox', [left, -vheight / 2, vwidth, vheight]) const scalable = svg.append('g') .classed('scalable', true) .style('transform', `rotate3d(1, 0, 0, ${rotation}deg)`) const orientable = scalable.append('g') .classed('orientable', true) // contour const contour = orientable.append('g') for (let i = 0; i < 360; i += 5) { const length = i % 30 === 0 ? bigLineLength : (i % 10 === 0 ? mediumLineLength : smallLineLength) const outer = ((vwidth / 2) - lineOffset) + (length / 2) const inner = outer - length contour.append("path") .attr("d", d3.arc() .outerRadius(outer) .innerRadius(inner) .startAngle((i - lineWidth / 2) * (Math.PI / 180)) .endAngle((i + lineWidth / 2) * (Math.PI / 180))) .attr('fill', neutralColor) } [ ['N', 0], ['E', 90], ['S', 180], ['W', 270] ].forEach(([letter, pos]) => { contour.append('text') .attr('x', 0) .attr('y', top + (textSize / 2) + 0) .attr('font-family', 'monospace') .attr('font-size', textSize) .attr('fill', neutralColor) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .text(letter) .attr('transform', `rotate(${pos})`) }) // arrow const arrow = orientable.append('g') .classed('arrow', true) .style('transition', `all ${transitionTime}s linear`) arrow.append('path') .attr('d', arrowPath) .attr('stroke', neutralColor) .attr('stroke-width', arrowWidth) .attr('fill', 'transparent') arrow.append('line') .attr('x1', 0) .attr('y1', top + lineOffset) .attr('x2', 0) .attr('y2', - arrowRadius) .attr('stroke', neutralColor) .attr('stroke-width', directionLineWidth) orientable.append('g') .classed('indicators', true) el.initParams = { neutralColor, transitionTime } el.update = update el.update({ ... other }) } const update = function ({ orientation=0, direction=null, indicators=[] }) { const svg = d3.select(this) const {transitionTime} = this.initParams const usedDirection = direction === null ? 0 : direction svg.select('.orientable') .attr('transform', `rotate(${-orientation * 180 / Math.PI })`) svg.select('.arrow') .attr('transform', `rotate(${usedDirection * 180 / Math.PI })`) .attr('display', direction === null ? 'none' : null) const indicatorsBind = svg.select('.indicators') .selectAll('.indicator') .data(indicators, ({text, color, textColor}) => `${text}-${color}-${textColor}`) const indicator = indicatorsBind .enter() .append('g') .classed('indicator', true) indicator.append('circle') .attr('cx', 0) .attr('cy', (vwidth / 2) - lineOffset - indicatorOffset) .attr('r', indicatorCircleRadius) .attr('fill', ({color}) => color) .style('transition', `all ${transitionTime}s linear`) const textY = (vwidth / 2) - lineOffset - indicatorOffset indicator.append('text') .classed('indicator-text', true) .attr('x', 0) .attr('y', textY) .attr('font-family', 'monospace') .attr('font-size', indicatorTextSize) .attr('font-weight', 'bold') .attr('fill', ({textColor}) => textColor) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .text(({text}) => text) indicator.merge(indicatorsBind) .attr('transform', ({direction}) => `rotate(${- direction * 180 / Math.PI})`) .select('.indicator-text') .attr('transform', ({direction}) => `rotate(${(orientation + direction) * 180 / Math.PI} ${0} ${textY}) translate(0 2)`) indicatorsBind.exit() .remove() }; init(el, props) return el }36:[] 2f:{"id":"bb5a056512bd96cf","slug":"navigation-gauges","title":"Navigation Gauges","thumbnail":"01c2ddcf91d0d1fcf9e321cde969a866c83f9f46409780088755331a3865b181","access_level":"public","create_time":"$D2019-12-05T13:56:09.484Z","update_time":"$D2020-12-17T16:47:25.816Z","view_time":null,"first_public_time":"$D2020-02-10T11:01:43.091Z","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":1131,"publish_version":1131,"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":"Navigation Gauges","cells":[{"id":0,"value":"md`# Navigation Gauges`","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":342,"value":"md`Attitude / Speed / Altitude + Varietometer / Compass + Yaw`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"attitude = values[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"speed = values[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":941,"value":"orientation = values[3][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"direction = values[3][1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":910,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"import {linearGauge} from '@nicolas-van/linear-gauge'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"import {range2d} from \"@nicolas-van/useful-components\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"dpu = require('dom-parser-utils@0.1.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require('d3@5.16.0')","pinned":false,"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":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"