Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 9, 2021

Created on Oct 9, 2021

This example renders four circles in an SVG, positioned diagonally according to a hardcoded data array of integers. The visualization demonstrates basic D3 v7 workflow, using `d3.select` to access the SVG element and the `.data()` and `.enter()` methods to create circles from the array. Each circle’s center is offset by 10 times its data value along both the x- and y-axes, with a fixed radius of 40. The code relies on the D3 library loaded via a CDN, with the `bundle.js` file containing the custom JavaScript logic. The page itself has a large 13em font-size style, though it does not affect the graphic output.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

89% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 6 setup for binding an array of coordinate points to SVG circles. It shows how to select an SVG container, join data using `d3.select` and `enter()`, and append circles with position and radius attributes. The visualization uses three hardcoded points rendered as identical ten-pixel-radius circles. The code uses D3’s data join pattern with `attr` callbacks, but does not include axes, scales, or interactions, serving instead as a basic starter template.

Fflyingshutter

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

87% match

Loading thumbnail…

Fork of D3 Starter

A static set of overlapping blue, white, red, and yellow circles is arranged on an SVG canvas, with each circle drawn four times at progressively smaller radii to create a layered, target-like appearance. The example demonstrates basic D3 data joins and transitions, using `d3.select`, `d3.range`, and array data to bind circle elements. A brief transition animates the entire SVG group by shifting it via `transition.attr('transform')`, moving the composition diagonally twice. All rendering is done with inline SVG attributes, with no external data source.

Fferneyhoughedward@gmail.com

87% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 6 starter project, rendering two circles on an SVG canvas: a large yellow circle with a dark stroke and a small dark circle. The code uses d3-selection’s `select` and `append` methods to build the SVG elements, with circle attributes like `r`, `cx`, and `cy` set via method chaining. Positioning relies on percentage and pixel values, and the visualization is embedded in a full-viewport HTML page with a large font-size style.

Mmagistrfox

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

86% match