Skip to main content
SimilarExport ZIP
100%

My testbed for D3

✓ Published1🌍 Public
OOysteinVeland
Last edited Oct 29, 2023
Created on Oct 29, 2023
Forked from HTML Starter

This example creates a visual testbed for D3 using React and SVG rendering. The code generates a 50-by-50 grid of semi-transparent rectangles that tile the full browser window, creating a subtle crosshatch pattern. It then draws eight distinct D3 symbol shapes—such as circles, crosses, and diamonds—spaced horizontally across the viewport using `d3.symbol` and `d3.symbols`. The visualization demonstrates basic D3 selections, data joins, and SVG attribute manipulation with data from `d3.range`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 start

This example creates a striped grid of horizontal and vertical rectangles, each masked so that the overlap reveals alternating symbol shapes. The visualization uses D3 v6’s `symbol` API to draw seven distinct shapes—circle, cross, diamond, square, star, triangle, and wye—as SVG paths inside two mask definitions. The masks are applied via the `mask` attribute to the rects, which are generated with `d3.range` and `join`. The page captures the full window dimensions, scaling the SVG and grid accordingly, and demonstrates a minimal React-free setup with D3 selections.

VVedran Škarica
79% match
Loading thumbnail…

D3 first steps

This example generates a full-screen grid of 100 vertical and horizontal bars using D3 selections and joins, then applies two circular SVG masks to create a striking cross-hatch pattern. Built with a React-wrapped D3 v6 setup, the code uses `select`, `range`, and `join` to bind data to rectangles, while the masks—one with a white circle on black, the other inverted—reveal and hide intersecting lines around a central focal point.

Ccyriltoneatto965
79% match
Loading thumbnail…

D3Trial

This example uses D3 version 6.6.1 to generate a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick, that span the full width and height of the browser window. Two SVG masks create a circular cutout effect: the first mask, using a white circle on a black background, hides the horizontal bars outside a 200-pixel-radius circle centered on the screen, while the second mask, with inverted colors, shows only the vertical bars inside the same circle. The result is a contrasting composition of crossing lines, where the horizontal and vertical strokes meet within the circle’s boundary. The code uses `d3.select`, `d3.range`, and the `.join()` method to bind data to SVG elements.

Ffdrigui
79% match
Loading thumbnail…

Teste

This example demonstrates a static chart composed of basic SVG geometric shapes—two red and purple circles, a blue-outlined square, and a diagonal line—set against a black border framing the full 1920×1080 canvas. The React-based rendering uses inline SVG elements directly in the HTML, with no dynamic data or interaction. A separate `index.jsx` file imports React and D3’s `select` API, but the visible output does not use them, showing only a raw SVG composition. The chart highlights primitive shape attributes like fill, stroke, and stroke-width without encoding a dataset.

Nnunosilvasemedo@gmail.com
78% match
Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi
78% match
Loading thumbnail…

D3 Starter

This example demonstrates generating a grid of horizontal and vertical lines across the full browser window, masked by two circular cutouts. The alternating line orientations create a crosshatch pattern that appears only within the circular regions, leaving the rest of the canvas blank. The visualization uses D3's `select` and `range` functions to append SVG `rect` elements, with masks (`circle-mask` and `circle-mask-2`) defining the visible areas. The code highlights the declarative D3 API for data-driven element creation and SVG attribute manipulation.

Llt_vandegrift@live.com
78% match
Loading thumbnail…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994
78% match
Loading thumbnail…

D3

This example uses D3 v3 within a React framework to render an SVG visualization on a nearly full-screen canvas. The code sets up a basic HTML page with an SVG element sized to 960 by 500 pixels, demonstrating the integration of D3’s layout and rendering capabilities with React’s component structure. The visualization relies on D3’s data-driven approach, though the specific data or simulation details are not defined in the provided files. The example highlights how SVG elements are manipulated via JavaScript, with CSS controlling page margins and overflow to create a clean, immersive display.

Cczhang746
78% match