Squaring the circle, part 1

100%

Squaring the circle, part 1

✓ Published0🌍 Public

Last edited Oct 1, 2018

Created on Dec 8, 2016

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.

AI-generated description

Experiment in creating regular grids from circular paths, step 1: General concept and reference grids.

forked from <a href='http://bl.ocks.org/mootari/'>mootari</a>'s block: <a href='http://bl.ocks.org/mootari/56039eed3e606fc97562034ad5f71637'>Squaring the circle, part 1</a>

mit Licensed

Similar vizzes

Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel

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

78% match

Loading thumbnail…

minimalistic circle grid

A minimalistic circle grid displays ten uniformly sized circles arranged in a single vertical column, each positioned at a fixed radius. The visualization uses D3 v4 with the `d3.gridding()` layout function to compute the grid coordinates from a simple array of ten data points. Circles are rendered as SVG elements, translated to their calculated `cx` and `cy` positions within an 800-by-600 viewport. The example relies on the external `d3-gridding` plugin to handle the layout, with no additional styling or interaction beyond the basic geometric arrangement.

FFrissAnalytics

75% match

Loading thumbnail…

Circular Geometric Patterns

This animated example generates circular geometric patterns by placing points along a circle and drawing both the connecting polygon and overlapping circles around each point. As the animation runs, a continuously increasing skip factor and node count alter the points’ positions, producing evolving abstract shapes. The visualization uses React for state management and rendering, with D3’s `line` and `curveLinearClosed` to create the polygon path, while each circle’s radius is calculated from the distance between the first two points. The scene is rendered as SVG, with a blue semi-transparent outline tracing the polygon and gray strokes for the circles.

EEric Rodenbeck

75% match

Loading thumbnail…

#@_25 great circles

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.

NNDuma

75% match

Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

MMettiHoof

74% match

Loading thumbnail…

Circular Geometric Patterns

Five circles appear around the center of an SVG, each drawn at a radius influenced by a factor of seven and connected by a closed polyline. The circles are sized by the distance between the first two points, creating an overlapping geometric composition. Implemented with React and D3 v5, the visualization uses `range`, `line`, and `curveLinearClosed` to generate the points and path, with the circles and stroke rendered directly as SVG elements. The example explores ordered circular symmetry through minimal code.

Mmshoer

74% match

Loading thumbnail…

Circular Layout (Recursive)

A circular layout visualizes ten concentric rings, each divided into 90 wedge-shaped segments. The example derives these shapes recursively, with each ring’s path geometry generated from radial distances scaled from 180 to 240 pixels and angular slices of π/90 radians. Colors interpolate from brown to steelblue across the rings. The implementation uses D3 v3’s linear scales for radius and fill, and builds SVG paths via `d3.svg.arc` within nested `selectAll` and `enter` calls. The data is procedural, created with `d3.range(10)` for rings and angle increments.

Mmbostock

74% match