Multiple polygons with d3.js

100%

Multiple polygons with d3.js

✓ Published0🌍 Public

Last edited Feb 26, 2013

Created on Jan 12, 2016

Three polygons render in a fixed 960 by 700 SVG canvas, with each polygon’s vertices scaled from x,y coordinates in JSON data to pixel positions using `d3.scale.linear`. The example loads `polygons.json` via `d3.json`, binds the polygon array to SVG elements, and sets each `polygon`’s `points` attribute by mapping coordinate pairs through the scales. All polygons share a black stroke with a width of two pixels. The code uses D3 v3’s selection and data-join patterns, with no interactivity or animation present.

AI-generated description

Similar vizzes

Loading thumbnail…

Polygon collision with d3.forceSimulation

Three colored clusters of circles float inside a static black-and-gray polygon layout, each cluster confined to its own triangular slice of the SVG canvas. The circles are positioned using `d3.forceSimulation` with a custom `forceCollidePolygon` that checks segment intersections to keep nodes inside the polygon boundaries, paired with `d3.forceCollide` to prevent circle overlap. Data is randomly generated for 55 nodes per cluster, and the polygon vertices are defined procedurally based on canvas dimensions. Rendering uses SVG elements and styles, with each cluster assigned a distinct stroke color (red, steelblue, orange).

AAjayyy

73% match

Loading thumbnail…

random-simple-poly-circle

This visualization shows a grid of 24 simple polygons, each constructed from 100 random points. Every polygon is composed of semi-transparent circles and a connecting path, creating a varied, organic geometric pattern across the canvas. The code uses D3.js, specifically `d3.scale`, `d3.select`, and `dataAppend`, along with a custom `randPoly` function. The polygons are positioned via SVG `g` elements and translated using a `translate` method, with points rendered as circles with a radius of 1.5. Rendering is done through SVG paths and elements in HTML.

11wheel

73% match

Loading thumbnail…

Polygons

This interactive visualization explores polygon triangulations through codewords, combinatorial representations of how diagonals partition an N-gon. Users can select different N values and codewords from dropdown menus to see the corresponding interior edges drawn as animated paths with staggered stroke-dashoffset transitions. The application uses D3 v7 selections and transitions to animate points, edges, and labels, while codeword generation and geometry calculations are handled by custom JavaScript modules. Colors for interior edges are mapped using `d3.interpolateViridis` based on vertex positions, with buttons to restart or start the animation sequence.

TTrio-

71% match

Loading thumbnail…

Untitled

A simple SVG polygon is drawn on a blank canvas, using a custom `Polygon` constructor that wraps the native SVG `polygon` element and its `points` attribute. The code initializes a single shape with five coordinates and a dark blue fill. The page is centered using flexbox in CSS, with no D3 library calls present despite the README’s mention of D3 version 6. The visualization demonstrates basic SVG creation and manipulation through vanilla JavaScript, appending the element directly to the body.

Kkatebacon32

71% match

Loading thumbnail…

Fork of Polygons

This example visualizes all valid codewords for an N-polygon, with each codeword represented by a set of interior edges connecting polygon vertices. Users select a codeword from a dropdown menu to see its corresponding geometric interpretation. The visualization animates the drawing of interior edges using stroke-dashoffset transitions, while color mapping interpolates between purple and orange. Built with D3 v7, the code leverages `d3.line`, `d3.transition`, and custom geometry functions to generate polygon points, edges, and codeword-derived diagonals.

TTrio-

70% 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

70% match

Loading thumbnail…

Point-in-polygon

This example demonstrates the point-in-polygon algorithm by letting users draw a polygon directly on an SVG canvas while 1000 randomly placed dots update in real time. Dots that fall inside the drawn shape turn red, while those outside remain steel blue. The implementation uses D3 v3’s `d3.behavior.drag` to capture mouse coordinates and a ray-casting algorithm to test each point against the polygon’s vertices. A clear link resets the visualization by removing the drawn path and deselecting all dots.

JJustinGOSSES

70% match

Loading thumbnail…

Fork of Polygons2

This visualization explores the combinatorial structure of polygon dissections by displaying an N-polygon with its interior edges determined by a user-selected codeword. The code uses D3 v7 to render an SVG, with a menu that lets viewers switch between different codewords, dynamically redrawing the polygon's interior line segments based on the selected combinatorial representation. A subtle animation transitions the polygon's points into place on initial load.

TTrio-

70% match