Wise Fool.
Visioneer.
Published
Edited
Jul 11, 2022
3 stars
// takes a direction (Boolean: true → horizontal), false → vertical
// returns a function that takes a pad and appends grid lines conform configuration (aspect, size)
lines = (horizontal) => (pad) => {
pad
.append("path")
.attr("d", path(aspect, size, horizontal))
.attr("vector-effect", view.vectorEffect)
;
}
aspect = [16, 4]
size = [width, width * aspect[1] / aspect[0]]
viewBox = [
-size[0] / 2,
-size[1] / 2,
size[0],
size[1],
].map(k => k / view.zoom)
// takes aspect, size, and horizontal (Boolean)
// returns path string for corresponding set of grid lines (horizontal or vertical)
path = (aspect, size, horizontal = true) => {
// +Boolean results in 0 or 1 (for false or true), so it can be used as an array index
// Likewise, +!Boolean results in 1 or 0
horizontal = +horizontal; // force Boolean into Number
const n = aspect[horizontal];
const step = size[horizontal] / n;
const direction = ["v","h"][horizontal];
const l = size[+!horizontal];
const x = (k, horizontal) => Math.round(k * step * horizontal)
return d3
.range(n + 1)
.map(i => `M${x(i, !horizontal)} ${x(i, horizontal)}${direction}${l}`)
}
// takes a pad
// SIDE EFFECT: appends a line and the bull’s eye to it
eye = (pad) => {
pad.append("circle")
.attr("r", M())
// .attr("cx", M(2))
// .attr("cy", M(2))
.attr("stroke", "black")
.attr("fill", "gold")
.attr("stroke-width", 5)
;
pad.append("circle")
.attr("vector-effect", view.vectorEffect)
.attr("r", M(1/4))
// .attr("cx", M(2))
// .attr("cy", M(2))
.attr("stroke", "black")
.attr("fill", "red")
.attr("stroke-width", 1)
;
pad
.append("line")
.attr("x1", -M(.5))
.attr("y1", -M(.5))
.attr("x2", +M(1.5))
.attr("y2", -M(.5))
.attr("stroke", "MediumSlateBlue ")
.attr("stroke-width", 3)
;
pad
.append("line")
.attr("vector-effect", view.vectorEffect)
.attr("x1", -M(.15))
.attr("y1", -M(.4))
.attr("x2", +M(1.25))
.attr("y2", -M(.4))
.attr("stroke", "MediumSlateBlue ")
.attr("stroke-width", 3)
;
}
M = (n = 1) => width / aspect[0] * n;
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
