variation Pascal's Triangle

100%

variation Pascal's Triangle

✓ Published0🌍 Public

Last edited May 1, 2021

Created on May 1, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Pascal's Triangle

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.

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

72% match

Loading thumbnail…

Circular circles

Two animated clusters of small circles drift outward from their origins against a dark background, with green circles generated by a loop of 500 iterations and red circles by a separate loop of 300 iterations. Each circle uses D3’s `transition()` to move along the x-axis via `attr('cx', y[i])` and the y-axis via `attr('cy', i)`, while positions derive from `Math.cos` and `Math.sin` with random scaling. The visualization renders in SVG within a React framework, leveraging D3 v6’s `select` and `append` to structure the two groups.

NNita

71% match

Loading thumbnail…

Repeat Array

A row of green circles is rendered on an SVG canvas, evenly spaced from left to right. The example demonstrates how to generate and repeat array data using custom JavaScript functions. The code creates a data array of ten values, each incrementing by 100, and binds it to circle elements via d3’s `selectAll` and `data` methods. Circles are positioned using the `cx` attribute mapped from the data, with a fixed `cy` of 300, and styled with a radius of 10 and green fill.

NNita

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

71% match

Loading thumbnail…

Circular Geometric Patterns

A dense grid of circular geometric patterns fills the screen, each cell containing a star-like figure formed by red outlines over filled circles. The patterns are generated algorithmically, varying the number of nodes and skip factors that control point placement along a circle, with radius fixed. Built with React and D3 v5, the visualization maps each combination of parameters to a position in the grid, using D3’s `line` generator with `curveLinearClosed` to draw the star paths and SVG circles for the filled nodes.

Ssofia-martinovich

70% match

Loading thumbnail…

Tributary inlet

A small triangular cascade of red, blue, and green rectangles forms a stepped diagonal pattern, with each bar’s height increasing linearly along the horizontal axis. The visualization uses D3.js to bind an array of 30 numbers to SVG `rect` elements, positioning them at regular intervals while mapping each index to a distinct color via a three-color ordinal scale. The rendering approach relies on the classic enter selection pattern, setting width, x, y, and height attributes directly. This compact example demonstrates how ordinal color mapping and simple data-driven geometry can create a rhythmic, geometric composition.

CCBasis

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