Gist 3900523

100%

✓ Published0🌍 Public

Last edited Oct 16, 2012

Created on Oct 16, 2012

This example demonstrates a geometric self-intersection detection routine for polyline coordinates. It iterates through each pair of non-adjacent line segments defined by the input x and y arrays, constructing segment geometries via `guilabs.createGeometry` and testing their intersection with the `Intersect` method. The visualization highlights the result of the intersection check, returning the final intersection geometry. The code is written in Python, relying on the `guilabs` library’s geometric primitives, and is intended to be run on coordinate sets containing at least three distinct points.

AI-generated description

Similar vizzes

Loading thumbnail…

line-intersection

This example demonstrates an interactive line-intersection visualization, where users can add points by clicking on a canvas and drag them to see the resulting line segments and their intersections update in real time. The visualization highlights the geometric intersection points between line segments connecting all pairs of points, with a vertical divider separating the interactive area from a static queue preview. The rendering uses SVG with points, lines, and pair paths, and includes a side panel that shows a scaled representation of the point coordinates. The underlying code provides utility functions for point, distance, angle, and intersection calculations, and uses a sorted array with a custom bisector to manage points.

11wheel

63% match

Loading thumbnail…

n-line intersection

This example visualizes the Bentley-Ottmann algorithm for finding intersections among multiple line segments, using an animated sweep line to show when segment adjacency changes. The left panel displays the segment ordering as a sequence of dots, with black lines connecting newly adjacent pairs that are checked for potential crossings. The right panel renders the segments themselves, highlighting intersection points in red. The code uses D3.js with custom helper libraries (d3-jetpack, d3-starterkit, geometry) for SVG rendering, along with Lodash for utility functions. The animation progressively updates the sweep line position, demonstrating how the algorithm maintains order and only tests nearby segments.

11wheel

59% match

Loading thumbnail…

two line intersection

A draggable line-intersection demo lets the user move four endpoints to see where two line segments cross. The intersection point is drawn as a small circle, which turns red only when the segments actually intersect; otherwise it stays gray. The visualization uses D3’s drag behavior and data joins to bind the points and path elements, while a custom `intersection` function in `geometry.js` computes the crossing and checks whether it lies on both segments. Rendering relies on SVG paths and circle elements, with coordinates updated on each drag event.

11wheel

59% match

Loading thumbnail…

Gist ec930412e72d913bffbb04219457e593

A single, continuous polyline forms a zigzag pattern across the SVG viewport, alternating between the top and bottom edges. The line, defined by a single `polyline` element, uses coordinates that increment horizontally by roughly 9.7 units, creating a regular sawtooth wave. The rendering relies on raw SVG, with the polyline’s points explicitly listed in the markup. The visualization demonstrates a minimal, purely geometric data trace, showing how a sequence of values can be encoded as alternating high and low positions. No external libraries are used; the example relies on the native SVG polyline API.

EEelsie

59% match

Loading thumbnail…

Gist dd10fa64484c334e066db46d1b74959b

This example shows a geographic grid of vertical and horizontal line segments covering a small area near Shwatka, Yukon, generated from a what3words API request. The visualization uses a GeoJSON MultiLineString containing coordinates for 14 horizontal and 14 vertical lines, which together form a dense mesh of cell boundaries. The code likely renders these lines with a mapping library such as D3.js, using `d3.geoPath` to project and draw the geographic coordinates onto a canvas or SVG. The API response metadata confirms successful retrieval from what3words, with the grid representing a localized portion of their three-meter word-based location system.

GGeoWill

54% match

Loading thumbnail…

Gist 6aa3450d9b856251aaedccbfbb552622

This visualization generates two concentric, spiral-like polylines from tabular data, with each line tracing a sequence of points along a circular path. The first series sweeps through a wide angular range, while the second covers a narrower band, creating a layered, oscillating pattern. The rendering relies on Power Query’s `#table` constructor to build the dataset and a custom `List.Accumulate` function to compute each point’s coordinates based on a category, step count, and angular start/end values. The resulting shape emphasizes the geometric relationship between the two angular intervals, showing how a simple parametric function can produce a visually rhythmic composition.

HHugoberry

54% match

Loading thumbnail…

Triangle Pentagon

This example displays a closed polygonal line connecting eight points in a two-dimensional coordinate space, forming a shape reminiscent of a star or a triangle-pentagon hybrid. The visualization uses the D3.js v4 library’s `d3.line()` path generator to convert the array of x-y coordinates into an SVG `path` element, which is then rendered with a blue stroke and no fill. The code appends the SVG container to the document body via `d3.select()`, hardcoding the 1000x1000 pixel canvas and the data points. The geometric pattern is drawn as a single continuous path, illustrating how D3’s line interpolation handles multiple segments within one dataset.

EEndNight95

54% match

Loading thumbnail…

Gist b2644a6ec6b1fd1a95ef87d5a93ec93c

This example visualizes a GPS track as a three-dimensional path using a MultiLineString GeoJSON feature. The data, sourced from a gist by FergusDevelopmentLLC, is rendered with altitude encoded as the third coordinate in each vertex. The visualization highlights the elevation changes along the path through a continuous line, with the points tracing a looping route. The use of 3D coordinates allows the viewer to perceive the terrain's vertical profile alongside its horizontal extent, making it useful for analyzing elevation gain, slope, and path shape in a compact, geographic context.

WWill Carter

54% match