Pascal's Triangle

100%

Pascal's Triangle

✓ Published1🌍 Public

Last edited May 1, 2021

Created on Apr 2, 2021

This visualization displays Pascal’s Triangle as a series of 22 rows of numerically generated values, arranged as an SVG in a stepped diagonal layout. Each row is computed from the previous one using a custom `nextRow` function that sums adjacent elements with a coefficient of 2, producing the triangle’s entries. The code uses D3 v6 data joins to append SVG groups and text elements, positioning rows vertically via `translate` transforms and columns horizontally with a fixed offset. Circles styled with red strokes are defined in CSS but not rendered in the visible output.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

variation Pascal's Triangle

This visualization presents a variation of Pascal's Triangle, where each row is a sequence of circles colored green or red based on whether the value is divisible by the row index. The triangle is built procedurally, generating 22 rows using a custom `nextRow` function that computes each row's sum-based values. Rendered as SVG via D3 v6, the code uses `d3.select` and `d3.append` to create a single SVG, with each row as a `<g>` element translated vertically and each circle horizontally. The fill color is determined by `j%i`, showing the modulo pattern across the structure.

MMTR

89% match

Loading thumbnail…

d3 | 1 triangle repeated

This visualization arranges 45 identical triangles in a circular pattern, each rotated by 10 degrees around the center of an SVG canvas, creating a complex, gear-like mandala from a simple repeated shape. The code defines triangle vertices as coordinate pairs and uses D3 v4’s data join with `d3.range` to generate groups, appending a path per triangle via `append('path')` and the `datum` method. A slider input lets users adjust the number of triangles from 1 to 50, triggering a re-render with updated rotations, while all strokes use a semi-transparent yellow against a dark background.

EEndNight95

73% match

Loading thumbnail…

Circular Geometric Patterns Tiled

This visualization displays a tiled grid of circular geometric patterns, where each tile contains arcs and lines generated from Vedic Square principles. The sketch shows 11 by 12 individual stars, each computed from a specific node number and skip factor. Built with D3 v5 and React, the Star component uses D3's `range`, `line`, and `curveLinearClosed` to construct polyline paths and circles, rendered as SVG elements. The resulting patterns, drawn with a blue stroke and gray circles, emerge from varying mathematical parameters across the grid.

CCurran Kelleher

70% match

Loading thumbnail…

181202_05_Nested circles

A grid of nested circles and rectangles animates into place on an SVG canvas. The visualization builds a parametric layout of 91 cells, each containing concentric circles with decreasing radii and a grey rectangle that expands during the transition. The code uses D3 v5 selection and range modules to generate and position elements, with the `transition().duration()` API animating the circles from the center outward and rectangles from zero size. Hover effects change fill colors to black.

LLudovicGouverneur

69% match

Loading thumbnail…

Fibonacci Sequence

This visualization displays the first 29 numbers of the Fibonacci sequence as nested, unfilled squares on an SVG canvas. Each rectangle’s width and height correspond directly to its sequence value, creating a spiral-like layout. The code uses D3 v7’s `select`, `selectAll`, and data joins to bind the array to `rect` elements, with attributes set via callback functions. The SVG is sized 960 by 1000 pixels, and the numbers are hardcoded in the source array.

NNita

68% match

Loading thumbnail…

Untitled

Three circles of varying sizes and colors visualize three numeric values from a clay dataset, with each circle’s radius roughly corresponding to its value and a number label placed inside. The code builds an SVG using D3 v7 in a React-friendly HTML page, drawing the circles with fixed coordinates and styling them with opacity and white strokes. It directly appends SVG elements via `d3.select` and `.append`, setting circle positions, radii, and fill colors, while text elements display the values 62, 11, and 17 in font sizes tied to those numbers.

Rrykay

68% match

Loading thumbnail…

Circular Geometric Patterns

The visualization displays a grid of circular geometric patterns formed by connecting points on a virtual circle. Based on the Vedic Square concept, each cell plots lines between nodes using varying skip factors and node counts, with thin orange strokes over light gray circles on a muted background. Built with React and D3 v5, it uses the `range()` and `line()` APIs with `curveLinearClosed` to generate star-like polylines, while SVG `<circle>` elements are rendered per node. A CSS blur filter softens the overall appearance.

Ssofia-martinovich

68% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

68% match