Pentagon

100%

✓ Published1🌍 Public

Last edited Sep 29, 2018

Created on Sep 26, 2018

This visualization displays a pentagon composed of purple lines, with a central point connected to each of the five vertices by spokes, alongside the pentagon’s edges. The shape is generated mathematically using D3’s `range` function to compute five evenly spaced angles, then calculating vertex coordinates with sine and cosine. The code uses `svg.selectAll('line').data(lines)` to bind the line data and appends SVG `line` elements with attributes for position and stroke styling. All rendering is done with D3 v5 in an SVG container.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pentagon

This example shows a pentagon constructed from five evenly spaced points around a central hub, with thick black lines radiating outward to each vertex and connecting adjacent vertices to form the polygon’s perimeter. The code uses d3’s `select` and `range` to compute the point coordinates via trigonometric functions, then generates line elements using D3’s data join. The visualization is rendered as an SVG with a fixed 960×800 canvas, and all styling is applied through attribute setters such as `attr('stroke-width', 15)`.

CCurran Kelleher

90% match

Loading thumbnail…

Pentagon

This example shows a pentagon drawn as a set of lines radiating from the center of an SVG canvas and connecting the five outer vertices. Built with d3.v4, it uses `d3.range` to generate five points based on angular calculations, then constructs and renders spokes and perimeter lines as SVG `<line>` elements with black strokes. The data source is a gist, and the rendering approach is static, with coordinates derived from the SVG’s width and height.

CCurran Kelleher

89% match

Loading thumbnail…

Pentagon Fork

This animated visualization shows a rotating pentagon constructed from a central point to five outer vertices, with its size cycling continuously between expanding and contracting. The code generates 50 spokes and connecting wheel lines using D3 v4’s selection and data-join methods, computing point positions with trigonometric functions. A `setInterval` loop triggers a re-render every 10 milliseconds, incrementing the rotation angle and adjusting the radius length, while an `if` statement reverses the growth direction when the length exceeds 300 pixels or drops below zero. All rendering is done via SVG line elements, cleared and redrawn on each frame.

FFasani

83% match

Loading thumbnail…

Fork of Pentagon

A fork of a pentagon is drawn using D3 v5's SVG rendering. The visualization demonstrates a figure inspired by Tamara Munzner's "Visualization Analysis and Design," showing a geometric shape composed of five interconnected nodes. The code uses D3's force-directed simulation (d3.forceSimulation) to position the vertices dynamically, creating an interactive layout. The rendering outputs to an SVG canvas within an HTML page, with the graph's edges and nodes displayed as vector elements.

Ppeter@attachmentdivision.com

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

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

72% match

Loading thumbnail…

data viz svg

This example demonstrates a geometric composition of three identical shapes arranged horizontally, each consisting of a yellow circle with a rectangular base and stem, colored orange, blue, and pink. A separate polyline path with connecting segments appears below the shapes in teal. The visualization uses D3 v6 to render SVG elements directly in the HTML, with CSS controlling the line styling via the `.lines` class, while all positional offsets are applied through SVG `transform` attributes on the `<g>` groups.

Aannprzy

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

67% match