chart.update(transform)
transforms=[['Overview',d3.zoomIdentity]].concat(d3.groups(data,
d=>d[2]).map(([key,data])=>{
const [x0,x1]=d3.extent(data,d=>d[0]).map(x);
const [y1,y0]=d3.extent(data,d=>d[1]).map(y);
const k=.8*Math.min(width/(x1-x0),height/(y1-y0));
const tx=(width-k*(x0+x1))/2,ty=(height-k*(y0+y1))/2;
return [`function ${key+1}`,d3.zoomIdentity.translate(tx,ty).scale(k)];
}))
x=d3.scaleLinear().domain([-7,7]).range([0,width])
y=d3.scaleLinear().domain([-7*k,7*k]).range([height,0])
z=d3.scaleOrdinal().domain(data.map(d=>d[2]))
.range(d3.schemeCategory10)
function randi(xmin,xmax){
return Math.floor(Math.random()*(xmax-xmin+1))+xmin;};
function make_data(j,dx,dy,num) {
const a=randi(5,11),b=randi(12,36),d=2*Math.PI/num;
return d3.range(0,num).map(function(i) {
return [Math.cos(d*i)+Math.cos(a*d*i)/2+Math.sin((a+b)*d*i)/3+dx,
Math.sin(d*i)+Math.sin(a*d*i)/2+Math.cos((a+b)*d*i)/3+dy,
j]}); }
data={
const num=1280;
return [].concat(make_data(0,3,2,3*num),make_data(1,-3,2,num),
make_data(2,-3,-2,3*num),make_data(3,3,-2,num))}
xAxis=(g,x)=>g
.attr('transform',`translate(0,${height})`)
.call(d3.axisTop(x).ticks(12))
.call(g=>g.select('.domain').attr('display','none'))
yAxis=(g,y)=>g
.call(d3.axisRight(y).ticks(12*k))
.call(g=>g.select('.domain').attr('display','none'))
k=height/width
height=600
d3=require('d3@6')
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.
