Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Jul 8, 2023

Created on Jul 8, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starter template for D3 version 7, rendering a set of basic SVG shapes—two circles and two rectangles—directly onto a 960x500 canvas. The code imports the `select` function from the D3 library and loads the full D3 bundle from an unpkg CDN. Shapes are drawn statically with standard SVG attributes, with the second pair of shapes colored red, while the stylesheet sets the page body to center-aligned text at a massive 13em font size. No interactive or data-driven behavior is present.

Zzakirkhan11

87% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for a D3 visualization, rendering a simple red circle with a radius of 100 units onto an SVG canvas. The code imports the `select` function from the D3 library (version 7) and uses it to select the SVG element and append the circle with specified attributes. The HTML file loads D3 from the unpkg CDN and includes a body styled with massive 13em font size, while the JavaScript logic resides in a separate `bundle.js` file.

Ffaroukaf

87% match

Loading thumbnail…

Fork of D3 Starter

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.

OOleg Levy

86% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3.js v7 setup with an SVG canvas, showing two outlined columns: a left column with a static blue circle and text label, and a right column that maps an array of seven numeric values to green circles of varying radii. It uses `d3.select` and the standard append/attr chain to construct the SVG structure, then applies `d3.scaleLinear` to map data domain [100,700] to a range of [1,10] for circle sizing. The right column’s circles are positioned linearly by index, while a text element is transformed and anchored. The code runs in a simple HTML file with D3 loaded via unpkg.

PPedram

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

85% match

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

85% match