Fork of Fork of D3 Starter

100%

Fork of 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, 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

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.

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

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

86% match

Loading thumbnail…

Fork of Fork of HTML Starter with SVG

This example presents a basic SVG scene composed of circles, rectangles, lines, and a path, rendered within a 960x500 viewport. The graphic demonstrates primitive shapes and SVG grouping via the `<g>` element, with some elements transformed using the `translate` attribute. CSS styling applies a black stroke to the line group and a blue stroke with rounded joins to the path. The code uses plain HTML, SVG, and CSS, with no JavaScript libraries or data sources, serving as a minimal starter template for visualization work.

Vvmakker

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

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

84% match

Loading thumbnail…

Fork of D3 Starter

A blank SVG canvas forms the stage for a minimal drawing example. The code selects the `#svg` element and uses D3's data join to enter a range of ten values, appending a single line for each. The lines all start at the x-coordinate zero and have a black stroke, but no other attributes are set, so they appear as overlapping vertical segments. This demonstrates the foundational D3 pattern of binding data to SVG elements, though no visual layout or differentiation is applied yet.

GGimm Yu

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

84% match