Published
Edited
Jun 8, 2018
6 stars
Insert cell
Insert cell
{
const svg = d3.select(DOM.svg(dimensions[0], dimensions[1]));
svg.append('g').attr("transform", `translate(${bounds[1]},${bounds[3]}) scale(1 -1)`)
.selectAll('path')
.data([...Array(0x4000).keys()].slice(1))
.enter().append("path")
.attr("d", n => filled_segment(n))
.attr("fill", n=> (n%2) ? "black" : "#fc0")
return svg.node();
}
Insert cell
{
const svg = d3.select(DOM.svg(dimensions[0], dimensions[1]));
svg.append('g').attr("transform", `translate(${bounds[1]},${bounds[3]}) scale(1 -1)`)
.selectAll('path')
.data([...Array(0x1000).keys()].slice(1))
.enter().append("path")
.attr("d", n => bezpts_to_svgpath(bezeval(segment(n), [0, 1], bounds, 0.01)))
.attr("stroke", n=> (n%2) ? "black" : "#fc0")
.attr("stroke-width", 20.1).attr("fill", "none");

return svg.node();
}
Insert cell
segment = n => t => polar([
100 + 20 * Math.log2(n + t),
Math.PI/2 - (Math.log2(n + t) % 1) * Math.PI*2])
Insert cell
filled_segment = n => {
const inside = t => polar([
400*(1 - Math.pow((n+t)*1, -.4-.2*(1-Math.pow(n+t,-.3)))),
Math.PI/2 - (Math.log2(n + t) % 1) * Math.PI*2]);
const outside = t => polar([
400*(1 - Math.pow((n+1-t)*2.3, -.4-.2*(1-Math.pow(n+1-t,-.3)))),
Math.PI/2 - (Math.log2(n+1-t) % 1) * Math.PI*2]);

return bezpts_to_svgpath(bezeval(inside, [0, 1], bounds, 0.01)) +
bezpts_to_svgpath(bezeval(outside, [0, 1], bounds, 0.01)).replace(/M/, 'L') + 'Z';
}
Insert cell
bounds = [-500, 500, -400, 400]
Insert cell
dimensions = [bounds[1]-bounds[0], bounds[3]-bounds[2]]
Insert cell
polar = ([r, a]) => [r * Math.cos(a), r * Math.sin(a)]
Insert cell
Insert cell
Insert cell

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.
Learn more