Fork of Pentagon

100%

Fork of Pentagon

✓ Published0🌍 Public

Last edited Jan 4, 2023

Created on Jan 4, 2023

Forked from 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.

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

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

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

78% match

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

76% match

Loading thumbnail…

5 forks

This example displays a dense cluster of randomly colored, rotated polygons overlaid with a single hand-drawn black fork path. Using React and ReactDOM, the visualization generates 21³ nested SVG polygon elements within a 960 by 1000 pixel canvas, while the fork path is rendered with an SVG path element using a static `d` attribute. The polygons’ positions, colors, and rotations are determined by JavaScript’s `Math.random()`, creating a chaotic, abstract backdrop that contrasts with the structured, predefined fork shape.

VVenkat-Sumith-Thota

71% match

Loading thumbnail…

Fork of Fork of #HAW: Svelte + D3: Voronoi

A Voronoi diagram partitions a 100-point random dataset into cells around each point, with the entire diagram dynamically updating as the mouse moves across the canvas. The interactive visualization, built with Svelte and rendered as SVG, uses D3's `scaleLinear` for coordinate mapping and `Delaunay.from` to compute the Voronoi tessellation from the points. The mouse position replaces the first data point in real-time, causing the diagram to continuously recalculate and redraw.

NNita

71% match

Loading thumbnail…

Fork of Fork of Main Viz | Protype Dev

This example presents a prototype visualization with a central radar chart surrounded by quadrant-based annotations and interactive elements. Using D3.js v5, it renders SVG graphics with linear scales for coordinate mapping, arc generators for circular segments, and custom gradient definitions to color each quadrant. The data is loaded from a CSV file of car productions, while the layout incorporates multiple side panels for supplementary content. The visualization demonstrates advanced SVG manipulation, including axis removal, custom path generation, and gradient styling through D3's selection and data-binding methods.

EErik L

71% match

Loading thumbnail…

Fork of Polygons2

This visualization explores the combinatorial structure of polygon dissections by displaying an N-polygon with its interior edges determined by a user-selected codeword. The code uses D3 v7 to render an SVG, with a menu that lets viewers switch between different codewords, dynamically redrawing the polygon's interior line segments based on the selected combinatorial representation. A subtle animation transitions the polygon's points into place on initial load.

TTrio-

71% match