Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published1🌍 Public

Last edited Apr 4, 2021

Created on Mar 26, 2021

This example shows a simple grid of 50 black circles arranged in a flexible wrapping layout across the page. The page initially contains a single div element, and the JavaScript loop appends 49 additional div elements directly to the document body. The circles are styled with CSS for size, background color, and rounded corners. The code uses the vanilla DOM API (`document.body.append` and `document.createElement`) rather than D3 selections, though the D3 v6 library is loaded via CDN but not actively utilized in the displayed behavior.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example renders 50 static blue squares in a vertical layout using D3.js version 7. The code iterates fifty times without incrementing a counter, creating a loop that appends a single `div` with the class `item` to the body. The `d3.select` and `.append` methods place the element, while CSS styles define its dimensions and color. The visualization demonstrates basic DOM manipulation with D3’s selection API.

YYiorgos Bagakis

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

83% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 v6 starter template, rendering a set of 15 circles arranged sequentially in an SVG canvas. The visualization shows how to select an HTML body element, append an SVG, and bind an array of data to circle elements using the data join pattern. The code uses d3.select, d3.range, and the `.enter()` method to create circles with a fixed radius of 100 pixels. The SVG dimensions are set to match the browser window, though the variable name `h` and the attribute method contain typos that would prevent the chart from displaying correctly.

Xxani

82% match

Loading thumbnail…

Fork of Fork of D3 Starter

A grid of 40 white circles arranged horizontally on a black SVG canvas undulates vertically in a smooth, periodic wave, with each circle’s height determined by a sine function of its index and a shared time parameter. Using D3 v6, the example selects the SVG element, binds data to an array of 40 values, appends circle elements, and animates them with `d3.timer`, updating the `cy` attribute each frame. The rendering relies solely on D3’s selection and data-join methods without any external data source.

DDavid Sanderson

82% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders a row of five red circles on an SVG canvas. The code uses D3 v7 APIs, including `d3.select` to access the SVG element, `d3.range` to generate an array of five fruit objects, and the data-join pattern with `.data()`, `.enter()`, and `.append()`. Each circle is positioned horizontally via a calculated `cx` attribute and vertically centered, with a fixed fill color and radius. The page loads D3 from a CDN and runs the script from a separate bundle file.

AAmeer Nuri

81% match

Loading thumbnail…

Fork of D3 Starter

A grid of fifteen circles undulates vertically and changes radius in a continuous sine-wave pattern, creating a flowing wave effect across the screen. Running on a timer that updates every 20 milliseconds, the animation redraws each circle's y-coordinate and radius based on a sine function. The code uses D3 v6’s `select`, `range`, and data joins with `join('circle')` to bind and update SVG circle elements, while the viewport-sized SVG fills the browser window.

Wwgloss

81% match

Loading thumbnail…

Fork of D3 Starter

This example shows a simple D3 starter visualization that renders 15 circles along a sine wave across a full-screen SVG canvas. The circles are positioned using `d3.range()` to generate data, with x-coordinates spaced 60 pixels apart and y-coordinates calculated using `Math.sin()`. The code uses D3 v7’s `select` and `range` imports, appends an SVG to the body, and binds the generated data to circle elements via `enter()` and `append()`, setting each circle’s radius to 20 and its position with `attr` and callback functions.

AAdan Rodriguez

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 v7 setup: a single circle rendered in an SVG. The code uses `d3.select` to target the SVG element and appends a circle with a fixed radius of 200 pixels. The HTML page loads D3 from a CDN, styles the body with a massive 13em font size, and relies on an external `bundle.js` for the JavaScript. It serves as a minimal starting point for D3 development, showing only the core selection and manipulation pattern without any data binding or interaction.

Ssohnnk

80% match