Public
Edited
Oct 5, 2019
31 stars
Chandrupatla’s root-finding methodSidi’s root-finding methodRegular numbersDruidJS workerNatural breaksDistance to a segmentRay out of a convex hullWord Tour: 40k words and their friendsHello, @thi.ng/grid-iteratorsHead/tail breaksPseudo-blue noise shaderHow fast does walk-on-spheres converge?AoC 12: shortest path under constraintsKDE estimationPlot: Correlation heatmapPoisson Finish 2Poisson disk sampling functionsWoS with transportSimple and surprising sortLocal medianTime series topological subsamplingUnion-FindLevel set experiment 1Mean value coordinatesPoisson potentialMiddle-squareWorld of squares (spherical)World of squaresLargest Inscribed SquareHello, PyWaveletsGeothmetic meandianHello, Reorder.jsGeometric MedianImage FFTTransport to a mapDisc TransportTP3: Power Diagram and Semi-Discrete Optimal TransportThe blue waveHello, genetic-jsSliced Optimal TransportDruidJSSelf-Organizing Maps meet DelaunayHello, polygon-clippingseedrandom, minimalWalk on Spheres 2Walk on SpheresHello, AutoencoderKaprekar’s numberVoronoiMap2DHello, ccwt.jsPolygon TriangulationQuantile.invert?Linear congruential generatorHue blurNeedle in a haystackMoving average blurApollo 11 implementation of trigonometric functions, by Margaret H. Hamilton (march 1969)2D curves intersectionThe 2D approximate Newton-Raphson methodInverting Lee’s Tetrahedral projectionLinde–Buzo–Gray stipplingMean shift clustering with kd-tree2D point distributionsShortest pathKahan SummationDijkstra’s algorithm in gpu.jsLloyd’s relaxation on a graphManhattan DiameterManhattan VoronoiMobility landscapes — an introductionDijkstra’s shortest-path treeH3 odditiesProtein MatrixConvex Spectral WeightsSort stuff by similarityKrigingDelaunay.findTrianglen-dimensions binning?Travelling with a self-organizing mapUMAP-o-MaticMNIST & UMAP-jsHello UMAP-jsMean shift clusteringLevenshtein transitionRd quasi-random sequencesAutomated label placement (countries)Phyllotaxis explainedMotionrugsPlanar hull (Andrew’s monotone chain algorithm)South Africa’s medial axisTravelling salesperson approximation with t-SNEDistance to shoreWorkerngraph: pagerank, louvain…t-SNE VoronoiCloud ContoursCircular function drawingKruskal MazeMyceliumTravelling salesperson approximation on the globe, with t-SNEtsne.jstsne.js & worker
Hello, delatin
viewof illo = {
const context = DOM.context2d(width, height, 1),
element = context.canvas;
const X = d3
.scaleLinear()
.domain([0, data.width])
.range([-width / 2, width / 2]),
Y = d3
.scaleLinear()
.domain([0, data.height])
.range([-height / 2, height / 2]),
H = (x, y) => tin.heightAt(Math.round(x), Math.round(y)),
Z = (x, y) => 2 * (H(x, y) - 100);
const illo = (element.value = new Zdog.Illustration({
element,
dragRotate: true,
onDragMove: update,
rotate: { x: Zdog.TAU * -.1 }
}));
const g = new Zdog.Anchor({addTo: illo, rotate: {x: Zdog.TAU / 4}});
for (let i = 0; i < tin.triangles.length; i += 3) {
const p0 = tin.triangles[i],
p1 = tin.triangles[i + 1],
p2 = tin.triangles[i + 2],
x0 = tin.coords[2 * p0],
y0 = tin.coords[2 * p0 + 1],
x1 = tin.coords[2 * p1],
y1 = tin.coords[2 * p1 + 1],
x2 = tin.coords[2 * p2],
y2 = tin.coords[2 * p2 + 1];
new Zdog.Shape({
addTo: g,
path: [
{ x: X(x0), y: Y(y0), z: Z(x0, y0) },
{ x: X(x1), y: Y(y1), z: Z(x1, y1) },
{ x: X(x2), y: Y(y2), z: Z(x2, y2) }
],
color: color(H((x0 + x1 + x2) / 3, (y0 + y1 + y2) / 3)),
stroke: 1,
fill: true
});
}
function update() {
illo.updateRenderGraph();
}
update();
yield element;
}
{
const context = DOM.context2d(width, height),
scale = width / data.width;
for (let i = 0; i < tin.triangles.length; i += 3) {
const p0 = tin.triangles[i],
p1 = tin.triangles[i + 1],
p2 = tin.triangles[i + 2],
x0 = tin.coords[2 * p0],
y0 = tin.coords[2 * p0 + 1],
x1 = tin.coords[2 * p1],
y1 = tin.coords[2 * p1 + 1],
x2 = tin.coords[2 * p2],
y2 = tin.coords[2 * p2 + 1];
context.beginPath();
context.moveTo(scale * x0, scale * y0);
context.lineTo(scale * x1, scale * y1);
context.lineTo(scale * x2, scale * y2);
context.lineTo(scale * x0, scale * y0);
context.fillStyle = color(
tin.heightAt(
Math.round((x0 + x1 + x2) / 3),
Math.round((y0 + y1 + y2) / 3)
)
);
context.fill();
context.stroke();
}
return context.canvas;
}
Delatin = (await import('delatin@0.1/index.js?module')).default
data = fetch(
"https://gist.githubusercontent.com/mbostock/4241134/raw/ee3244eaf405667623241b3d5e1477424623d12b/volcano.json"
).then(d => d.json())
tin = {
const tin = new Delatin(data.values, data.width, data.height);
tin.run(2);
return tin;
}
tin.getMaxError()
color = d3
.scaleSequential(interpolateTerrain)
.domain(d3.extent(data.values))
.nice()
interpolateTerrain = {
const i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.9));
const i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.9), d3.hsv(0, 0, 0.95));
return t => (t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2));
}
height = ((width * data.height) / data.width) | 0
d3 = require("d3@5", "d3-hsv")
Zdog = require("zdog@1/dist/zdog.dist.min.js")
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.
