Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Topological Skeleton Tracing - WASM
canvasTracing
viewof canvasTracing = {
video;
const videoEl = viewof video.querySelector("video");
const w = width > 700 ? width / 3 : width / 2;
const h = videoEl.videoHeight * (w / videoEl.videoWidth);
const canvas = DOM.canvas(w, h);
const ctx = canvas.getContext('2d');
function processSkeleton() {
ctx.drawImage(
videoEl,
0,
0,
videoEl.videoWidth,
videoEl.videoHeight,
0,
0,
w,
h
);
ctx.canvas.value = TraceSkeleton.fromCanvas(canvas);
ctx.canvas.dispatchEvent(new CustomEvent("input"));
}
processSkeleton();
return ctx.canvas;
}
viewof features = {
const svg = DOM.svg(canvasTracing.width, canvasTracing.height);
const features = canvasTracing.polylines.map(poly => ({
type: "Feature",
properties: { color: "#A0F" },
geometry: { type: "LineString", coordinates: poly }
}));
svg.value = { type: "FeatureCollection", features };
const path = geoCurvePath(d3.curveBasis); // d3.geoPath() with a curve
d3.select(svg)
.attr("fill", "none")
.attr("stroke-width", 2)
.selectAll("path")
.data(features)
.join("path")
.attr("stroke", d => d.properties.color)
.attr("d", path);
return svg;
}
import { geoCurvePath } from "@d3/context-to-curve"
TraceSkeleton = await (await require("skeleton-tracing-wasm")).load()
d3 = require("d3@5", "d3-delaunay@5")
import { select } from "@jashkenas/inputs"
import { View } from "@mbostock/synchronized-views"
await FileAttachment("video.mp4").url()
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.
