Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published1🌍 Public

Last edited Sep 17, 2021

Created on Sep 17, 2021

This example demonstrates basic SVG shape rendering and grouping with D3 v7. It shows circles, rectangles, lines, and a path arranged in three groups, each with different fill colors, stroke styles, and transform translations. The code uses SVG elements directly, applying group transforms like `translate` and `scale`, while CSS classes define stroke properties for the line elements. The visualization serves as a minimal starter template, illustrating how D3 integrates with static SVG markup and CSS styling without data binding or dynamic scales.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates basic SVG shape rendering and grouping with D3 v7, using static geometric primitives rather than data-driven binds. It shows circles, rectangles, lines, and paths inside nested `<g>` elements, with `transform` attributes for translation and scaling applied to layers. Inline `fill` and `stroke` properties override inherited group styles, while CSS rules in `styles.css` further style path joins and stroke widths. The visualization relies solely on declarative SVG markup within an HTML document, with no JavaScript logic beyond importing the D3 library.

Zzakirkhan11

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

89% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal interactive D3.js visualization: a single circle rendered as an SVG element. The circle changes its fill color and radius when hovered, using a CSS transition for a smooth three-second animation. The code relies on D3 version 7, loaded from a CDN, and manipulates the SVG circle's attributes directly through CSS and HTML, without invoking any specific D3 functions or data binding. The visualization serves as a basic starter template for D3 projects.

JJasper Alblas

86% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3 starter template that combines static SVG shapes with D3’s DOM manipulation. It displays a large yellow circle with black outline and two smaller unfilled circles positioned on the left and right, rendered directly in an SVG element without data binding. The code imports `select` from D3 version 6, then replaces the body text with “Hello D3 version 7”, showing how to use D3’s selection API alongside raw SVG markup. All shapes are hardcoded in the HTML, with script execution toggling the page text.

Kkamal

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

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for D3 version 7, rendering a single yellow circle with a black stroke inside an SVG element. The page loads D3 from a CDN and uses static SVG markup to display the shape, with no data binding or interactive behavior. The code includes commented-out imports and selection methods, showing how a D3 script would typically begin, while the current visualization relies solely on hardcoded SVG attributes.

RRubanda

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js setup, rendering an empty SVG canvas with a single `<g>` group element. The code uses `d3.select` to target the SVG by its `id`, sets its width and height to 500 pixels each, and appends the group. It is built with D3 version 7.8.2, loaded from the unpkg CDN, and the visualization is entirely static, showing no data or geometric shapes. The fork serves as a starting point for learning D3’s core selection and SVG manipulation APIs.

NNwaegerue Chinemerem

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

84% match