In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
Apr 22, 2021
2 forks
viewof SVG = {
const svg = d3.create('svg').attr("width", width).attr("height", height)
const main = svg.append("g").attr('id','main')
let s = main.selectAll('circle')
.data(the_data)
.join("circle")
.attr('stroke','none')
.attr('transform',d => {
let dz = 0.06*dist(d.x,d.y,0,0); // distance
let s = Math.sin(TAU*t-dz); // size
let r = (s*Math.tan(TAU*t/4)*.003)* (180/Math.PI) // rotate in degrees
return `translate(300 300) rotate(${r})`
})
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr('r',13/2)
.attr('fill','#00000080')
mutable t += 0.01
return svg.node()
}
mutable t = 0
the_data = {
let points =[]
for(let x=-200;x<=200;x+=10){ // x
for(let y=-200;y<=200;y+=10){ // y
points.push({x:x,y:y})
}
}
return points
}
width = 600
height = 600
TAU = Math.PI*2
function dist(x1,y1,x2,y2) {
return Math.sqrt( (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2) );
}
d3 = require('d3')
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.
