@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
80 lines (67 loc) • 2.26 kB
HTML
<html>
<style>
svg {
background-color: black
}
.grid .vline line, .grid .hline line {
stroke: #666;
}
.grid line.hairline {
stroke: #333;
}
.grid text {
font-size: 12;
font-family: Proxima Nova,sans-serif;
text-anchor: middle;
dominant-baseline: central;
fill: #999;
}
.grid rect {
stroke: none; fill: black; opacity: 0.5;
}
</style>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const width = 2048, height = 1536, xmajor=100, ymajor=100, xminor=10, yminor=10,
xs = d3.range(0, width, xmajor),
ys = d3.range(0, height, ymajor);
var grid = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('class', 'grid')
grid.selectAll(null)
.data(d3.range(0, width, xminor).filter(x => !xs.includes(x)))
.enter().append('line').attr('class', 'hairline')
.attr('transform', x => 'translate(' + x + ',0)')
.attr('y2', height);
grid.selectAll(null)
.data(d3.range(0, height, yminor).filter(y => !ys.includes(y)))
.enter().append('line').attr('class', 'hairline')
.attr('transform', y => 'translate(0, ' + y + ')')
.attr('x2', width);
var vlines = grid.selectAll('.vline')
.data(xs)
.enter().append('g').attr('class', 'vline')
.attr('transform', x => 'translate(' + x + ',0)');
var hlines = grid.selectAll('.hline')
.data(ys)
.enter().append('g').attr('class', 'hline')
.attr('transform', y => 'translate(0, ' + y + ')');
vlines.append('line').attr('y2', height);
hlines.append('line').attr('x2', width);
var vlabels = vlines.selectAll('.vlabel')
.data(ys.slice(0, -1))
.enter().append('g').attr('class', 'vlabel')
.attr('transform', y => 'translate(0,' + (y + ymajor/2) + ') rotate(-90) ');
var hlabels = hlines.selectAll('.hlabel')
.data(xs.slice(0, -1))
.enter().append('g').attr('class', 'vlabel')
.attr('transform', x => 'translate(' + (x + xmajor/2) + ', 0)');
var labels = d3.selectAll('.vlabel, .hlabel');
labels.append('rect').attr('x', -18).attr('width', 36).attr('y', -6).attr('height', 12).attr('rx', 6);
labels.append('text').text(function(){ return d3.select(this.parentNode.parentNode).datum()});
</script>
</body>
</html>