Skip to main content
SimilarExport ZIP
100%

Solitaire

✓ Published0🌍 Public
Bbjfmbeck
Last edited Mar 16, 2023
Created on Mar 14, 2023
Forked from D3 Starter

A solitaire pegboard game rendered as an SVG using D3 version 6, where players click brown pegs to select them and then click highlighted purple target positions to jump and remove pegs. The board is a 9x9 grid with a cross-shaped play area, and the scoreboard displays the remaining pegs. The code uses D3’s `scaleLinear`, `selectAll`/`data` joins, and event handlers for click interactions, with a restart button and a "GAME OVER" message when no legal moves remain.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 - Sol

This example reproduces a Sol LeWitt art piece as an interactive SVG drawing. It creates a full-screen canvas that fills the browser window, using D3 version 6.6.1 to select the body element and append an SVG with dimensions matching the viewport. The artwork is rendered dynamically, with the code importing only the `select` function from D3 to manage the SVG creation. The piece focuses on geometric form, translating LeWitt's conceptual wall drawings into a web-based medium.

FFilip Pavlove
67% match
Loading thumbnail…

Sol D3

Two intersecting sets of thin horizontal and vertical lines form a grid across the full screen. D3 symbols (shapes) are used as masks to selectively reveal or hide sections of these lines, creating a pattern inspired by Sol LeWitt's wall drawings. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate SVG rectangles and masked paths, with two mask layers applied in opposite color inversions.

Jjonathanh21
67% match
Loading thumbnail…

todo

A simple game rendered on a Canvas element, controlled by clicking the window to launch a magenta square upward against gravity. Obstacles, rendered as green blocks, continuously scroll from right to left; the score increments every frame the player avoids them, and resets upon collision. The game loop uses a custom `d3.timer` to update physics and redraw the canvas, while a separate `div` element displays the score. The code applies basic geometry for collision detection and movement, with the D3.js library handling selection and layout conventions.

11wheel
66% match
Loading thumbnail…

VIS2

This interactive visualization displays a filtered collection of over 20,000 board games as a hexagonal grid, using a random seeded layout to position games. Users can filter by player count and category via dropdown menus, with the top 104 ranked games shown as hexagons sized by ranking. Built with D3.js (d3-hexbin, d3-collection, d3-seedrandom), it renders SVG hexagons over a canvas and includes zoom and pan navigation, while tooltips show game details on hover. The visualization animates transitions when filters change, and data comes from a CSV of board game attributes.

DDaniel
66% match
Loading thumbnail…

Sol

This interactive artwork reproduces a Sol LeWitt-inspired drawing using SVG. It displays a grid of vertical and horizontal lines that are partially revealed through a mask containing geometric symbols. The piece builds the composition by layering 100 rectangles in each orientation. The visualization uses D3.js, specifically the `select`, `range`, `symbols`, and `symbol` APIs, to generate the mask patterns and render the final image dynamically based on the browser window size.

JJeppeOEM
66% match
Loading thumbnail…

Sol Lewitt - D3

A grid of thin horizontal and vertical white strokes overlays the full browser window, but a circular mask reveals the pattern only within a central disc, creating a crisp boundary between the visible striped interior and a blank exterior. Built with D3.js (version 7.9.0) and rendered as SVG, the code uses `select`, `range`, and the `.join('rect')` API to generate 100 rects in each orientation. Two SVG masks—one with a white circle on black, the other inverted—alternately hide and reveal the respective stroke sets, producing the final composed image.

Hhquazza@gmail.com
66% match
Loading thumbnail…

Fork of Sol lewitt reproduction in D3

A full-screen grid of horizontal and vertical stripes is drawn over a gray background, with circular masks applied to both sets of stripes to reveal a cross-shaped intersection. The artwork is generated procedurally using D3’s `select` and `append` APIs to build SVG elements, and `range` to create 100 rows and columns of rectangles. Two masks are defined—one with a black rectangle and white circle for the horizontal stripes, and another with reversed fills for the vertical stripes—so the overlapping circles form a checkerboard-like overlay. The piece highlights D3’s declarative chaining for SVG construction and masking.

Rraturi22@gmail.com
66% match
Loading thumbnail…

Sol Lewitt D3 v2

A grid of vertical and horizontal striped rectangles, generated with D3 v6, covers the screen. The full-width and full-height strips use `select` and `range` to map data to `rect` elements. Two SVG masks reveal overlapping circular regions: a white-filled circle on a black background shows the horizontal lines, while an inverted cutout mask displays the vertical lines, creating a cross-shaped intersection at the center. Rendering is via SVG with D3's `join` method.

Ppirani.sabah@gmail.com
66% match