Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Feb 14, 2023

Created on Nov 20, 2022

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.

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

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

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

86% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for D3 version 7, replacing the page content with the text “Hello D3 version 7” via `d3.select` and the `.text()` method. It renders an empty SVG canvas of 900 by 500 pixels, with commented-out circle and rectangle elements showing where shapes can be added. The code loads D3 from a CDN and uses a separate `bundle.js` to execute the JavaScript, following a basic modular setup. No data is loaded, and no interactive behaviors are implemented; the focus is purely on initializing D3 and setting up an SVG container.

Mminaadel6600

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

86% match