Pentagon

100%

✓ Published3🌍 Public

Last edited Oct 1, 2018

Created on Sep 6, 2018

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)`.

AI-generated description

Inspired by a figure from chapter 5 of Tamara Munzner's excellent book "Visualization Analysis and Design". Imported from Bl.ocks.org: Pentagon.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Pentagon

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.

RRubens

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

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

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

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

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

67% match

Loading thumbnail…

radial line

This example demonstrates a radial line drawing that connects a series of points defined by angle and radius, forming a closed polygonal shape with varied distances from the center. Using d3.radialLine, it maps angular coordinates to SVG path data, with the line rendered inside a 2000x2000 SVG canvas. The code defines an array of points and assigns the generated path to the `<path>` element via `select("path").attr("d", ...)`. The visualization relies on D3 v7 and shows how radial line generators translate polar coordinates into a Cartesian path.

HHeet Bhatt

66% match