Data Scientist at Warwick Investment Group. Passionate about science, predictive modeling, and data visualizations.
random = d3.randomNormal() // Try randomUniform?
GuassianBeeSwarm = {
replay;
const dodge = dodger(radius * 2 + 1);
const margin = ({top: 0, right: 10, bottom: 20, left: 10});
const values = Float64Array.from({length: n}, random);
const x = d3.scaleLinear(d3.extent(values), [margin.left, width - margin.right]).nice();
const svg = d3.select(DOM.svg(width, height)).style("overflow", "visible");
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
for (let i = 0; i < n; ++i) {
if (i % 5 === 0) yield svg.node();
const cx = x(values[i]);
const cy = height - margin.bottom - dodge(cx) - radius - 1;
svg.append("circle")
.attr("cx", cx)
.attr("cy", -400)
.attr("r", radius)
.attr('fill', d => fillScale(cx))
// .attr("fill","#9e0dd7") //purple
.transition()
.duration(650)
.ease(d3.easeBounce)
.attr("cy", cy);
}
yield svg.node();
}
fillScale = d3.scaleSequentialLog(chroma.interpolateSinebow)
// d3.scaleDiverging
dodger
dodger = radius => {
const radius2 = radius ** 2;
const bisect = d3.bisector(d => d.x);
const circles = [];
return x => {
const l = bisect.left(circles, x - radius);
const r = bisect.right(circles, x + radius, l);
let y = 0;
for (let i = l; i < r; ++i) {
const {x: xi, y: yi} = circles[i];
const x2 = (xi - x) ** 2;
const y2 = (yi - y) ** 2;
if (radius2 > x2 + y2) {
y = yi + Math.sqrt(radius2 - x2) + 1e-6;
i = l - 1;
continue;
}
}
circles.splice(bisect.left(circles, x, l, r), 0, {x, y});
return y;
};
}
radius = 2
n = 2000 // Change me?
height = 400
// color_scale = scales.interpolateViridis
d3 = require("d3@5")
chroma = require('d3-scale-chromatic')
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.
