In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
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('rect')
.data(the_data)
.join("rect")
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr('width',d => d.s)
.attr('height',d => d.s)
.attr('fill','#000')
return svg.node()
}
the_data = {
let points=[]
mutable f+= 0.02
for (let w=0;w<width+100;w+=25){
for (let h=0;h<height+100;h+=25){
let distance = dist(width/Math.PI*Math.acos(Math.cos(f+9)), height/Math.PI*Math.acos(Math.cos(f*2)),w,h)/25
let size = Math.abs(-10*(1+Math.sin(f))+Math.min(20,distance)) // fixed by Snowman-s
points.push({x:w,y:h,s:size})
}
}
return points
}
function dist(x1,y1,x2,y2) {
return Math.sqrt( (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2) );
}
mutable f = 0
width = 800
height = 800
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.
