@patricksurry/g3
Version:
A flexible Javascript framework for building steam gauge instrument panels that display live external metrics from flight (or other) simulators like XPlane or MS FS2020
106 lines (86 loc) • 2.83 kB
HTML
<html>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width=1200 height=600> </svg>
<script>
var svg = d3.select('svg'),
defs = svg.append('defs'),
g = svg.append('g')
.attr('transform', 'translate(300,300) scale(1, 0.1)');
g.append('circle')
.attr('r', 200)
.attr('style', 'fill: none; stroke: grey');
g.selectAll(null)
.data(d3.range(0,360,30))
.enter().append('g')
.attr('transform', d => 'rotate(' + (d+90) + ') translate(0, -200)')
.append('text')
.attr('transform', d => 'rotate(' + (-d-90) + ') scale(1, 10)')
.text(d => d);
defs.append('pattern')
.attr('id', 'dangerPattern')
.attr('width', 10)
.attr('height', 10)
.attr('patternTransform', 'rotate(45)')
.attr('patternUnits', 'userSpaceOnUse')
.append('rect')
.attr('width', 10)
.attr('height', 5)
.attr('style', 'fill: green');
/* https://www.tapper-ware.net/blog/perspective-texture-with-6-lines-of-svg/ */
var f = defs.append('filter')
.attr('id', 'cyldplmap')
.attr('color-interpolation-filters', 'sRGB') // otherwise grey is not a neutral displacement!
.attr('filterUnits', 'objectBoundingBox')
// .attr('primitiveUnits', 'objectBoundingBox')
.attr('x', 0).attr('y', 0)
.attr('width', '100%').attr('height', '100%')
f.append('feImage')
.attr('href', 'cyldplmap.png')
.attr('result', 'displacement');
f.append('feDisplacementMap')
.attr('in2', 'displacement')
.attr('in', 'SourceGraphic')
.attr('scale', 90)
.attr('xChannelSelector', 'R')
.attr('yChannelSelector', 'G');
g = svg.append('g')
.attr('transform', 'translate(700,300)')
// .attr('style', 'filter: url(#cyldplmap)');
g.append('rect')
.attr('width', 180)
.attr('height', 180)
.attr('x', -90)
.attr('y', -90)
g.selectAll(null)
.data(d3.range(10))
.enter().append('circle')
.attr('r', d => 5 + d *10)
.attr('style', d => 'fill: none; stroke-width: 5; stroke: ' + d3.schemeSet1[d])
g = svg.append('g')
.attr('transform', 'translate(1000,300) scale(0.66, 1)')
.attr('style', 'filter: url(#cyldplmap)');
g.append('rect')
.attr('width', 180)
.attr('height', 180)
.attr('x', -90)
.attr('y', -90)
.attr('style', 'fill: black; fill-opacity: 0.5; ')
// .attr('style', 'fill: url(#dangerPattern)')
g.selectAll(null)
.data(d3.range(10))
.enter().append('circle')
.attr('r', d => 5 + d *10)
.attr('style', d => 'fill: none; stroke-opacity: 0.5; stroke-width: 5; stroke: ' + d3.schemeSet1[d])
g = svg.append('g')
.attr('transform', 'translate(1000,300)')
g.append('rect')
.attr('width', 180)
.attr('height', 180)
.attr('x', -90)
.attr('y', -90)
.attr('style', 'fill: none; stroke: red; stroke-width: 2')
</script>
</body>
</html>