Public
Edited
Feb 13, 2023
16 stars
Hello, PGLiteINSEE ParquetHello, apcachDruidJS workerHello, OrbitWord Tour: 40k words and their friendsHello, spectral.jsHello, petite-vueHello, @thi.ng/grid-iteratorsHello, thumbhashHello, SwissGLHello, QOI (and glitches)Hello, orbHello, cosmographHello, TabulatorUsing d3.blur with PlotMath.cbrtHello debounceColorcetHello, gliiHello, Open MeteoHello, PyWaveletsHello, typesenseHello, libgifHello, kmeans-engineHappy anniversary, Project Gutenberg!Hello, fflateHello, ArchieML!Hello, d3-bboxCollideHello, jsgeoda!Hello, EDTF!Hello, protovis!Hello, placekeyHello, fuse.jsHello, Reorder.jsHello, shadow DOMjszipHello, procedural-glHello, qhullHello, genetic-jsDruidJSHello, Tippy.jsHello, paintWorkletBig πHello, AutoencoderHello, Shakespearean UUIDsHello, ccwt.jsHello, constrainautorHello, talismanHello, polygon-offsetHello p-queueHello async-poolHello rollup-plugin-asciiHello, algebra.jsHello, d3-renderHello zip/unzipCumulative Wikipedia DonationsHTML <details>regl textureHello, npyjsHello protobufHello, pencil touchHello, LOESSHello html2canvaslegra mapscolor2cssHello, ecsy2D point distributionsHello, delatinThe gpu.js loopDijkstra’s shortest-path treeHello nojacko/Dijkstras-jsHello, tcort/dijkstrajsHello, lambdabaa/dijkstraHello, gpu.js v2Hello jsqrHello qrcodeHello SharedArrayBufferHello GamePad APIHello vtk.jsHello nd4jsHello BiofabricTravelling with a self-organizing mapHello glitchHello UMAP-jsHello pandemoniumHello iocaneHello JSON-editorHello d3-griddingHello mljs/knnWorkerHello lalolibImage to GPU.jsImage to blink.jsTissot's indicatrixVega projectionsHello WebCLGLUsing d3-inertia with observableVideo contouring 3ngraph: pagerank, louvain…Union-FindPerceptron (simple statistics)mljsHello h3-jsEmoji FlagsHello, poisson-disk-sampling
Hello, pixi.js
Also listed in…
Geo
{
const app = new PIXI.Application({
antialias: true,
transparent: true,
width,
height: 200,
resolution: devicePixelRatio || 1
});
invalidation.then(() => app.destroy(true, true));
const context = new PIXI.Graphics();
app.stage.addChild(context);
let v = 150;
const data = Array.from({ length: width / 20 }, (_, i) => [
10 + i * 20,
(v += 25 * (Math.random() - .55))
]);
const area = d3
.area()
.y0(199)
.context(context);
const line = d3.line().context(context);
context.clear();
context.lineStyle(.5);
context.beginFill(0xeeeeee);
area(data);
context.endFill();
context.lineStyle(2);
line.curve(d3.curveBasis)(data);
context.lineStyle(1);
context.beginFill(0xee7777);
line.curve(curvePoints(3))(data);
context.endFill();
return Object.assign(app.view, { style: `width: ${width}px` });
}
{
const context = contextPixi(width, height, invalidation);
const path = d3.geoPath(projection).context(context);
// Rectangle
context.clear();
context.lineStyle(1, 0x000000, 1);
context.beginFill(0xfefee2);
path(land); // almost!
context.endFill();
context.lineStyle(3, 0x000000, 1);
path({ type: "Sphere" });
context.endFill();
return context.canvas;
}
PIXI = import("https://cdn.jsdelivr.net/npm/pixi.js@6.5.9/+esm")
contextPixi = (width, height, invalidation, resolution) => {
if (!invalidation) throw new Error("please pass an invalidation method");
const app = new PIXI.Application({
antialias: true,
transparent: true,
width,
height,
resolution: resolution || devicePixelRatio || 1
});
invalidation.then(() => app.destroy(true, true));
const context = new PIXI.Graphics();
app.stage.addChild(context);
app.view.style = `width: ${width}px`;
context.canvas = app.view;
return context;
}
projection = d3.geoBertin1953().fitSize([width, height], { type: "Sphere" })
height = width * 0.6
d3 = require("d3@7", "d3-geo-projection@4")
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
import { curvePoints } from "5c4650cfb7214d6c"
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.
