Pentagon

100%

✓ Published0🌍 Public

Last edited Sep 26, 2017

Created on Sep 26, 2017

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.

AI-generated description

Constructed in the video tutorial: The Pentagon. Inspired by a figure from chapter 5 of Tamara Munzner's excellent book "Visualization Analysis and Design".

Built with blockbuilder.org

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

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

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

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

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

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

70% match

Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

70% match