Data visualization/Interactive media and full-stack data science web app developer.
Published
Edited
Mar 3, 2022
3 stars
image = FileAttachment("squirtle.png").image()
polygon_points = getImageOutline(image)
svg = {
var w = d3.max(polygon_points, (d) => d.x);
var h = d3.max(polygon_points, (d) => d.y);
var first_point = polygon_points[0];
var last_point = polygon_points[polygon_points.length - 1];
return html`<svg viewbox="0 0 ${w} ${h}" width="300">
<path d="M ${first_point.x} ${first_point.y}
${polygon_points.map((p) => ` L ${p.x} ${p.y}`)}
L ${last_point.x} ${last_point.y}"/>
</svg>`;
}
image_to_svg(await FileAttachment("squirtle.png").image())
image_to_svg = (img) => {
var polygon_points = getImageOutline(img);
var w = d3.max(polygon_points, (d) => d.x);
var h = d3.max(polygon_points, (d) => d.y);
var first_point = polygon_points[0];
var last_point = polygon_points[polygon_points.length - 1];
return html`<svg viewbox="0 0 ${w} ${h}" width="300">
<path d="M ${first_point.x} ${first_point.y}
${polygon_points.map((p) => ` L ${p.x} ${p.y}`)}
L ${last_point.x} ${last_point.y}"/>
</svg>`;
}
getImageOutline = (
await import("https://cdn.skypack.dev/image-outline@0.1.0?min")
).default
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.
