Wise Fool.
Visioneer.
length = 16
geometry = {
const height = width * 6 / 16;
const wide = 5;
const tall = 1;
const w = µ(27);
const h = w * tall / wide;
const aspect = ({wide, tall, ratio: wide / tall});
return ({
wide,
tall,
aspect,
width,
height,
w,
h,
});
}
µ = (n = 1) => 36 * n
X = d3.scaleLinear().domain([0, geometry.wide]).range([0, geometry.w])
Y = d3.scaleLinear().domain([0, geometry.tall]).range([geometry.h, 0])
wedges =
(pad) =>
(data) =>
{
const wedge =
(
(g) =>
({
d,
fill = "none",
opacity,
strokeColor = "black",
strokeWidth = 1,
}) =>
g
.join("path")
.attr("d", d)
.attr("fill", fill)
.attr("opacity", opacity)
.attr("stroke", strokeColor)
.attr("stroke-width", strokeWidth)
)
(
pad
.append("g")
.attr("name", "wedges")
.selectAll("path")
.data(data)
);
[
{name: "cones", d: cones, fill: color, opacity: .1},
{name: "rays" , d: rays, strokeColor: color, opacity: .3},
{name: "arcs" , d: arcs, strokeColor: color},
]
.forEach(wedge);
}
rays = ({x0, y0, x1, y1, x2, y2, r, sweep}) => `M${x0} ${y0}L${x1} ${y1}`
arcs = ({x0, y0, x1, y1, x2, y2, r, sweep}) => `M${x1} ${y1}A${r} ${r} 0 0 ${sweep} ${x2} ${y2}`
cones = ({x0, y0, x1, y1, x2, y2, r, sweep}) => `M${x0} ${y0}L${x1} ${y1}A${r} ${r} 0 0 ${sweep} ${x2} ${y2}`
dots =
(pad) =>
(data) =>
pad
.selectAll("circle")
.data(data)
.join("circle")
.attr("r", 3)
.attr("fill", "red")
.attr("cx", d => d.x1)
.attr("cy", d => d.y1)
;
labels =
(pad) =>
(data) =>
pad.selectAll('text')
.data(data)
.join("text")
.attr("x", d => d.x1)
.attr("y", d => (d.y1))
.attr("dy", d => (1 - 2 * d.Y1) * 15) // y1 is either 0 or 1
.attr("alignment-baseline", "central")
.attr("text-anchor", "middle")
.text(d => `√${(d.i + 1).toFixed(0)}`)
;
origin =
(pad) =>
(data) =>
{
pad
.append("text")
.text("x = 0")
.attr("y", Y(0))
.attr("dy", 18)
.attr("alignment-baseline", "central")
.attr("text-anchor", "middle")
;
pad
.append("text")
.text("y = 1")
.attr("y", Y(1))
.attr("dx", -27)
.attr("alignment-baseline", "central")
.attr("text-anchor", "middle")
;
}
rulers =
(pad) =>
(data) =>
pad
.append("g")
.append("path")
.attr("d", ruleX([0, 1, 2, 3, 4]) + ruleY([0, 1]))
.attr("stroke", "grey")
.attr("stroke-width", .5)
.attr("fill", "none")
;
ruleX =
(list) =>
list.map(
x =>
d3.line()
.x(([x, y]) => X(x))
.y(([x, y]) => Y(y))
([[x, -0.05], [x, +1.05]])
)
.join()
ruleY =
(list) =>
list.map(
y =>
d3.line()
.x(([x, y]) => X(x))
.y(([x, y]) => Y(y))
([[-.05, y], [4.05, y]])
)
.join()
color = "#331FDA"
tableFormatSmall = ({ width: tableWidth, format: { x1: f3, x2: f3, r: f3, } })
tableFormatLarge = ({ width: tableWidth, format: { x0: f0, x1: f0, x2: f0, y0: f0, y1: f0, y2: f0, r: f0, } })
tableWidth = 36 * 20
f0 = x => x.toFixed(0)
f3 = x => x.toFixed(3)
fork = "M4.5 1.75C3.80964 1.75 3.25 2.30964 3.25 3C3.25 3.69036 3.80964 4.25 4.5 4.25C5.19036 4.25 5.75 3.69036 5.75 3C5.75 2.30964 5.19036 1.75 4.5 1.75ZM1.75 3C1.75 1.48122 2.98122 0.25 4.5 0.25C6.01878 0.25 7.25 1.48122 7.25 3C7.25 4.16599 6.52434 5.1625 5.5 5.56253V7H8.5C9.4199 7 10.1947 6.37895 10.4281 5.53327C9.44188 5.11546 8.75 4.13853 8.75 3C8.75 1.48122 9.98122 0.25 11.5 0.25C13.0188 0.25 14.25 1.48122 14.25 3C14.25 4.18168 13.5047 5.18928 12.4585 5.57835C12.1782 7.51343 10.5127 9 8.5 9H5.5V10.4375C6.52434 10.8375 7.25 11.834 7.25 13C7.25 14.5188 6.01878 15.75 4.5 15.75C2.98122 15.75 1.75 14.5188 1.75 13C1.75 11.834 2.47566 10.8375 3.5 10.4375L3.5 9V7V5.56253C2.47566 5.1625 1.75 4.16599 1.75 3ZM4.5 11.75C3.80964 11.75 3.25 12.3096 3.25 13C3.25 13.6904 3.80964 14.25 4.5 14.25C5.19036 14.25 5.75 13.6904 5.75 13C5.75 12.3096 5.19036 11.75 4.5 11.75ZM10.25 3C10.25 2.30964 10.8096 1.75 11.5 1.75C12.1904 1.75 12.75 2.30964 12.75 3C12.75 3.69036 12.1904 4.25 11.5 4.25C10.8096 4.25 10.25 3.69036 10.25 3Z"
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.
