Published
Edited
May 20, 2022
Insert cell
# Making a vortex
Insert cell
<div style="display: flex; justify-content: center; align-items: center; margin: 20px;">
<svg></svg>
</div>
Insert cell
function initVortex() {

const svgWidth = 400,
svgHeight = 400,
halfWidth = svgWidth / 2,
halfHeight = svgHeight / 2,
vh = 5,
vw = 3,
ij = 2,
r = 5;

let ii = 1;
const svg = d3
.select("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
function makeVortex() {
ii += 0.02;
let dataset = []
for (var i = 0; i * r < halfHeight; i++) {
const x = i * vw * Math.sin((ij * i) + ii);
const y = i * vh;

dataset.push({x,y})
dataset.push({x: -x, y: -y})
}

svg.selectAll("circle").remove();

svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr('cy', d => d.y + halfHeight)
.attr('cx', d => d.x + halfWidth)
.attr('r', r);
setTimeout(makeVortex, 1);
}

makeVortex();
}
Insert cell
setTimeout(initVortex, 1000)
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