viewof selection = {
const svg = d3.select(DOM.svg(width, height))
const data2 = [...Array(1000).keys()].map((d) => ({"i":d}))
const dot = svg.append("g")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.selectAll("g")
.data(data2)
.enter().append("circle")
.attr("cy",d => (300 + 8 * Math.floor(Math.log2(d.i + 1)) ) )
.attr("cx",d => (((d.i - 2 ** Math.floor(Math.log2(d.i + 1)) ) - 0.5 * 2 ** Math.floor(Math.log2(d.i + 1))) )*8 + 500)
.attr("r",4).attr("fill", d => ("rgba(255,0,255,"+ d.i / data2.length +")") )
return svg.node();
}
viewof selection2 = {
const svg = d3.select(DOM.svg(width, height))
var i = 0;
const data = input_data.map((d) => ({"i":i++, "d":d}))
let s=9; // spacing
let r=4.5; // radius
function get_layer(i,index) {
var a = 0;
while (i>0) {
a++;
i = i - a;
}
if (index != undefined)
{
return i + a;
}
return a;
}
const dot = svg.append("g")
.attr("stroke", "black")
.attr("stroke-width", 1)
.selectAll("g")
.data(data)
.enter().append("circle")
.attr("cy",d => (0 + s * get_layer(d.i+1) ))
.attr("cx",d => ( 500 + s * get_layer(d.i+1,true)) - 0.5 * s * get_layer(d.i+1) )
.attr("r",function(d){ if(true) {return (r * d.d / 100)}} ).attr("fill", d => ("rgba(0,0,0,"+ d.d / 100 +")") )
return svg.node();
}
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.
