Alpha-Shapes

100%

✓ Published0🌍 Public

Last edited Nov 13, 2020

Created on Nov 11, 2020

This example visualizes the alpha-shape boundary of a set of 2D points, highlighting the concave hull that encloses the data. It uses D3.js to compute a Delaunay triangulation via `d3.geom.delaunay`, filters triangles whose edges exceed a squared alpha threshold, and then traces the outer edges with a custom `boundary` function. The points are offset horizontally, and the resulting polygon is rendered in yellow SVG paths over a blue background, while the raw vertices remain hidden. The code relies on D3 v5 and an older D3 geometry module for triangulation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Alpha-Shape Bounded Voronoi Tessellation

An interactive Voronoi tessellation divides a plane into cells around 100 randomly placed sites, with the site distribution forming two distinct clusters near the left and right edges. The visualization highlights the two clusters’ boundaries using a computed alpha shape, whose convex hull is expanded and then filled with additional artificial sites to constrain the tessellation. Built with d3.v4, it uses `d3.voronoi`, `d3.polygonHull`, and `d3.curveCatmullRomClosed` to calculate and render the polygons and hull path in SVG.

PPhilippe Rivière

76% match

Loading thumbnail…

Shapes with SVG and HTML

This example demonstrates how SVG and HTML elements can be used together to render geometric shapes on a web page. The visualization uses D3 v5’s `select` function to target an SVG element defined in the HTML, with its height and width extracted via `svg.attr`. A CSS class called `.highlighted` styles certain shapes in red, while the body margin is removed for full-bleed display. The code sets up the foundation for binding data to shape positions, though no explicit rendering or data mapping is visible in the provided files.

SShuzhanYang

70% match

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001

69% match

Loading thumbnail…

Shapes

This example displays a simple set of primitive shapes—a light blue rectangle, a blue circle, a green ellipse, a red line, and text—drawn in an SVG canvas, alongside HTML heading and paragraph elements. The page also includes a placeholder for a map and code that fetches salary data from a GitHub-hosted CSV file using `d3.csv()`, parsing the state and mean salary fields into console output. The visualization uses hardcoded shape coordinates within an inline SVG, with styling defined through CSS classes.

Jjyjuni

68% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes and dynamic styling interactions. A light blue rectangle serves as a canvas containing a circle, ellipse, text label, and line. Using D3 v6 selection methods, hovering over the circle turns it yellow, clicking the circle turns it red, and clicking the line thickens it. Clicking anywhere on the SVG updates the text element to display the cursor’s coordinates via `d3.pointer`. The page also mixes plain HTML headings and paragraphs with CSS rules for color and font styling.

JJoyce Robbins

68% match

Loading thumbnail…

D3.js

This D3.js example demonstrates the marching squares and convex hull algorithms from the d3.geom module, rendering SVG polygons with animation. The visualization computes contour polygons for a given grid function and convex hulls for sets of points, displaying them as animated vector graphics. Using d3.v2, the code samples highlight algorithmic geometry operations (contour tracing and Graham scan) implemented in D3's geometry namespace, with the SVG rendering showing how these computed polygons adapt dynamically as the underlying data changes.

GGerHobbelt

68% match

Loading thumbnail…

Page Title

This visualization demonstrates the convex hull algorithm, which finds the smallest convex polygon that contains a set of randomly generated points. The process animates step by step: first locating the highest point, then identifying subsequent points by measuring the smallest angle from the previous line segment using dot products, and finally drawing the boundary polyline as the algorithm progresses. The visualization uses D3.js v3 with SVG elements, including circles for data points, a polyline for the boundary, and animated lines representing the sweep line and ray. Points turn red as they join the hull, while the sweep line rotates to test each candidate point against the current angle threshold.

NNPashaP

68% match

Loading thumbnail…

Shapes with SVG and CSS

A visualization demonstrates a minimal SVG setup with a yellow background rendered using D3 v6 and a plain SVG element. The code imports the `select` function from D3 via ES6 modules, uses it to target the SVG, and applies a CSS style to change its background color. Styling is also applied through an external stylesheet that resets margins and hides overflow. The example highlights how to combine D3 selection methods with inline style manipulation and CSS for basic SVG canvas customization.

Ssarakouzayha

68% match