seriesA = (regen,
getRandomWalk(
n,
randWalkStart,
d3.randomNormal(randWalkMean, randWalkStDev)
))
seriesB = (regen,
getRandomWalk(
n,
randWalkStart + 0.1,
d3.randomNormal(randWalkMean, randWalkStDev)
))
xAccessor = d => d[0]
yAccessor = d => d[1]
series = [seriesA, seriesB].map(serie => serie.map(normalize))
productSeries = d3.zip(...series).map(([a, b]) => [a[0], a[1] * b[1]])
partialProduct = i =>
productSeries.slice(0, i + 1).concat(series[0].slice(i + 1))
data = d3.zip(...series).map(([a, b]) => ({
x: a[0],
a: a[1],
b: b[1],
A: [0, y(a[1]) - y(0)],
B: [0, y(b[1]) - y(0)]
}))
normalize = (d, i) => [xAccessor(d, i), yAccessor(d, i)]
xExtent = d3.extent(series.flatMap(s => s.map(d => d[0])))
yExtent = d3.extent([
0,
1,
...series.flatMap(s => s.map(d => d[1])),
...productSeries.map(d => d[1])
])
x = d3.scaleLinear(xExtent, [margin.left, width - margin.right])
y = d3.scaleLinear(yExtent, [height - margin.bottom, margin.top])
margin = ({ top: 10, right: 90, bottom: 20, left: 25 })
height = width / 2
xAxis = g => g.attr("transform", `translate(0, ${y(0)})`).call(d3.axisBottom(x))
yAxis = g =>
g.attr("transform", `translate(${x.range()[0]})`).call(d3.axisLeft(y))
dataLine = d3
.line()
.x((d, i) => x(d[0]))
.y((d, i) => y(d[1]))
line = d3
.line()
.x(d => d[0])
.y(d => d[1])
l = p => path => path.attr("d", line([o, p]))
pt = ([px, py]) => circle => circle.attr("cx", px).attr("cy", py)
o = [0, 0]
unity = [0, y(1) - y(0)]
renderPoint = function(d, i) {
const sel = d3.select(this);
d.l1 = sel
.append("path")
.attr("stroke", girderColor)
.call(l(unity));
d.pt1 = sel
.append("circle")
.attr("fill", girderColor)
.attr("r", ptR)
.call(pt(unity));
d.l1A = sel
.append("path")
.attr("stroke", girderColor)
.attr("d", line([d.A, unity]));
d.lAB = sel
.append("path")
.attr("stroke", girderColor)
.call(l(d.A));
d.ptAB = sel
.append("circle")
.attr("fill", girderColor)
.attr("r", ptR)
.call(pt(d.A));
d.lA = sel
.append("path")
.attr("stroke", color(null, 0))
.call(l(d.A));
d.lB = sel
.append("path")
.attr("stroke", color(null, 1))
.call(l(d.B));
d.ptA = sel
.append("circle")
.attr("fill", color(null, 0))
.attr("r", ptR)
.call(pt(d.A));
d.ptB = sel
.append("circle")
.attr("fill", color(null, 1))
.attr("r", ptR)
.call(pt(d.B));
}
color = (d, i) => (i ? "steelblue" : "orange")
girderColor = "#ccc"
duration = speed
delay = speed
// https://stackoverflow.com/a/2259502/120290
rotate = ([px, py], angle, [cx, cy] = [0, 0]) => {
const s = Math.sin(angle);
const c = Math.cos(angle);
// translate point back to origin
px -= cx;
py -= cy;
// rotate point
const xnew = px * c - py * s;
const ynew = px * s + py * c;
// translate point back
px = xnew + cx;
py = ynew + cy;
return [px, py];
}
multiply = ([px, py], coef) => [coef * px, coef * py]
d3 = require("d3")
import { getRandomWalk } from "@tophtucker/scrapbook"
import { slider } from "@jashkenas/inputs"
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.
