Skip to main content
SimilarExport ZIP
100%

#@_25 great circles

✓ Published0🌍 Public
NNDuma
Last edited May 25, 2016
Created on May 25, 2016

The visualization displays a geometric network of interconnected quads and triangles, drawn as a single outlined path in red against a dark background. The code constructs these shapes using polar coordinate calculations and custom helper functions, then renders them as SVG paths via the D3.js library. Internally, each polygon is subdivided with mid-lines, diagonals, and a "hectogram" polyline, all styled with distinct stroke colors. The piece is inspired by Buckminster Fuller’s geometric explorations and relies on D3’s selection and path-building APIs to generate the final composition.

AI-generated description

Similar vizzes

Loading thumbnail…

Squaring the circle, part 1

This example shows a geometric experiment that builds regular grids by arranging points along the outlines of concentric polygons, with the number of sides and spacing adjustable via a dat.GUI control panel. It starts with a central dot and adds successive layers of rings, each ring containing points distributed evenly along the polygon’s perimeter. The visualization uses D3.js version 4.3 to render SVG circles and paths, with configurable parameters for polygon sides, radius, point size, and opacity. The code dynamically recalculates point positions on any parameter change, demonstrating how circular paths can be approximated and transformed into structured grid-like formations.

FFrissAnalytics
75% 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
74% 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
73% match
Loading thumbnail…

d3 | 1 triangle repeated

This visualization arranges 45 identical triangles in a circular pattern, each rotated by 10 degrees around the center of an SVG canvas, creating a complex, gear-like mandala from a simple repeated shape. The code defines triangle vertices as coordinate pairs and uses D3 v4’s data join with `d3.range` to generate groups, appending a path per triangle via `append('path')` and the `datum` method. A slider input lets users adjust the number of triangles from 1 to 50, triggering a re-render with updated rotations, while all strokes use a semi-transparent yellow against a dark background.

EEndNight95
73% match
Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aadamsnothere@gmail.com
71% match
Loading thumbnail…

circle through Q

This example displays a circular diagram overlaid on a Cartesian grid, with four curved paths connecting edge points to form a rounded shape. The visualization demonstrates quadratic Bézier curves using SVG path commands, where each curve passes through a control point near the center. A blue circle outlines the full circumference, while a smaller red circle marks the central origin. The grid uses 10-unit spacing with thicker lines at the 50-unit midpoint, and text labels indicate angles at 90, 180, 270, and 360 degrees. The rendering relies on native SVG elements within a React framework, using the `d` attribute for path geometry and inline CSS for styling.

Sshabdullah05
71% match
Loading thumbnail…

Fork of Circles with D3

This visualization generates a dynamic abstract composition of nested rectangles and circles. The code uses D3.js (v7) to create an SVG canvas, then recursively draws a spiraling sequence of colored rectangles based on the golden ratio. Each rectangle is filled with a randomly generated hex color, while the background uses a light green tint. The rendering relies on D3's `select`, `selectAll`, `data`, `join`, and `append` methods to manage SVG elements and dynamically resize the canvas to fit its container. The final image resembles a colorful geometric fractal spiral.

11807589994@qq.com
71% match
Loading thumbnail…

Untitled

A star-like geometric figure is drawn on an SVG canvas, consisting of five points arranged in a circle around a central hub. Radial spokes connect the center to each point, while connecting lines form the outer pentagon shape, with small circles marking each vertex. The visualization is built using D3 v7, where `d3.range` generates the point coordinates via trigonometric calculations, and chained selection methods like `selectAll` and `enter` append the SVG circles and lines.

Mmasphel
70% match