Published
Edited
May 15, 2020
randomDots ={
const w = 300;
const h = w;
const parent = DOM.element('div');
let head = d3.select(parent).append("p")
.html("Cox's Bazaar, Bangladesh: 40,000/km2")
let canvas1 = d3.select(parent).append("canvas")
.attr("width", w)
.attr("height", h);
let head2 = d3.select(parent).append("p")
.html('Dadaab camp, Kenya: 4,657/km2')
let canvas2 = d3.select(parent).append("canvas")
.attr("width", w)
.attr("height", h);
let head3 = d3.select(parent).append("p")
.html('London: 5,729/km2')
let canvas3 = d3.select(parent).append("canvas")
.attr("width", w )
.attr("height", h);
const context1 = canvas1.node().getContext('2d');
const context2 = canvas2.node().getContext('2d');
const context3 = canvas3.node().getContext('2d');
const n1 = 40000;
const n2 = 4657;
const n3 = 5729;
const particles1 = Array.from({length: n1}, () => [Math.random() * w, Math.random() * h, 0, 0]);
context1.canvas.style.background = "#fff";
const particles2 = Array.from({length: n2}, () => [Math.random() * w, Math.random() * h, 0, 0]);
context2.canvas.style.background = "#fff";
const particles3 = Array.from({length: n3}, () => [Math.random() * w, Math.random() * h, 0, 0]);
context3.canvas.style.background = "#fff";
const delaunay1 = new del.Delaunay.from(particles1);
const delaunay2 = new del.Delaunay.from(particles2);
const delaunay3 = new del.Delaunay.from(particles3);
context1.clearRect(0, 0, w, h);
context1.beginPath();
delaunay1.renderPoints(context1,1);
context1.fill();
context1.beginPath();
context2.clearRect(0, 0, w, h);
context2.beginPath();
delaunay2.renderPoints(context2,1);
context2.fill();
context2.beginPath();
context3.clearRect(0, 0, w, h);
context3.beginPath();
delaunay3.renderPoints(context3,1);
context3.fill();
context3.beginPath();
return parent
}
camps = `camp,peopleKm,
"Cox's Bazaar", 40000,
"Dadaab camp", 4657,
"London", 5729`
del = require("d3-delaunay@4")
d3 = require("d3@5", "d3-array@^2.2")
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.
