Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Feb 27, 2023

Created on Feb 27, 2023

This example demonstrates a simple D3.js starter template that renders a grid of rectangles across the full window. The visualization uses nested loops to create SVG groups at regular intervals, with each group containing multiple rectangles positioned vertically. The code imports `select` and `range` from the d3.v7 library and uses data joins with `.join('rect')` to append elements. The page scales text to 13em and includes a YouTube tutorial link, while the JavaScript calculates grid margins based on window dimensions and sets the SVG size to fill the viewport.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders a collection of rectangles in an SVG. The code uses D3’s `select` and `selectAll` with the data-join pattern to bind an array of generated objects (each with height and width properties) to SVG `rect` elements, positioning them at the origin. It relies on D3 v7, loaded via a CDN, and a `bundle.js` file, while the page also includes an embedded YouTube tutorial. No scales, axes, or interactions are present; it simply shows foundational data-binding and element creation.

DDea Bardhoshi

87% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3.js starter template that creates a vertical series of 100 rectangular bars across the full width of the viewport. The visualization uses D3’s selection and data-join API (`select`, `selectAll`, and `join`) to generate SVG rectangles positioned by their `y` attribute, with each bar spaced 20 pixels apart. The code initializes an empty SVG element within the page body and relies on D3 version 7.8.2, loaded via CDN, to construct the graphic without any external data source.

DDea Bardhoshi

85% match

Loading thumbnail…

Fork of D3 Starter

This example layers two sets of thin rectangles—horizontal and vertical—across the full screen, creating a grid of lines. Masking with circles reveals a central circular region where the lines intersect, while the surrounding area shows only the horizontal lines. The code uses D3 v7’s `select`, `range`, and `join` methods to generate the rects, and SVG `mask` elements with `rect` and `circle` shapes to control visibility. The visualization dynamically sizes to the browser window using `window.innerWidth` and `window.innerHeight`.

DDONAR144-release

85% match

Loading thumbnail…

Fork of D3 Starter

A minimal D3 starter example demonstrates a basic data join by rendering 15 circles across the screen. The code uses `d3.select` and `d3.range` to generate data, then employs `selectAll`, `data`, `enter`, and `append` to create SVG circles with fixed radii. It runs entirely in the browser with a full-window SVG canvas, set against a plain white background. The example highlights the core enter selection pattern in d3 v7, with the bundled JavaScript file containing the import and logic.

Ccaitlin-woods

84% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js starter template, rendering a single empty SVG rectangle on an 800x400 canvas. The visualization shows how to set up a basic D3 project with an HTML5 document structure and inline SVG. The code loads D3 version 7.0.4 from the unpkg CDN and uses JavaScript to define a simple graphic element, providing a foundation for building more complex data visualizations with the D3 framework.

Aanoptic

84% match

Loading thumbnail…

Fork of D3 Starter

This fork of D3 Starter demonstrates a minimal D3 version 7 setup, rendering a static grid of colored rectangles in an SVG canvas. The visualization shows a simple categorical heatmap-like pattern with varied blue, green, and yellow hues. The code imports the `select` function from D3 and uses it to update the page body text, while the SVG layout is hand-coded in HTML. No data loading or interactive behavior is included, focusing solely on the basic wiring of a D3 project.

Dd-schwabe

84% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js v6 starter template that loads JSON event data and renders it as static rectangles. The visualization shows four entries from a local `evenement.json` file, each mapped to a fixed-size `<rect>` element in an SVG container, though no data-driven scaling or positioning is implemented. The code uses D3’s `select`, `json`, and `scaleLinear` APIs to fetch the data and append shapes, with the SVG dimensions read directly from the markup. The rendering approach is basic, serving as a foundational scaffold for further development rather than a finished interactive chart.

BBenoit Estrade

84% match

Loading thumbnail…

Fork of D3 Starter

This example shows a grid of horizontal and vertical stripes across the full viewport, with a circular region at the center appearing brighter against the surrounding dark mask. The code uses D3 v7 selections to append two groups of rectangles, each generated from a `range(100)` data array, and assigns SVG masks to each group. The first mask contains a black rect with a white circle, while the second uses inverse colors, creating the overlapping visual effect.

HHaritscode

84% match