Skip to main content
SimilarExport ZIP
100%

The first commented line is your dabblet’s title

✓ Published0🌍 Public
Mmbostock
Last edited Jan 1, 2012
Created on Jan 1, 2012

A full-width SVG rectangle is dynamically recolored based on its initial CSS background. The example demonstrates a minimal D3.js interaction: a single `d3.select` call targets the `rect` element and applies a solid red fill, overriding the page’s gradient styling. The HTML contains the SVG markup, while the CSS sets a pink-to-yellow linear gradient as the page background. The script loads D3 from a remote URL and uses the `style` method to mutate the SVG shape’s presentation, showing how D3 can directly manipulate existing DOM nodes.

AI-generated description

Similar vizzes

Loading thumbnail…

Document

This example displays a single red SVG rectangle that fills the entire 960 by 500 pixel viewport. Using D3 v6, the code selects the SVG element and applies the background color directly through its style property. The visualization demonstrates the simplest possible rendering approach, where a static shape is styled without any data binding or interactive behavior. The HTML page loads the D3 library from a CDN and runs the JavaScript which modifies the SVG element.

GGal Thelander
76% match
Loading thumbnail…

Hello D3 Version 6

This example demonstrates a minimal first step with D3 version 6 by turning an SVG element’s background red. It uses the `d3.select` API to reference the SVG and applies the style directly, while loading the library from the official d3.v6.min.js CDN link. The page itself is otherwise empty, focusing solely on the styling effect.

AAdrienne Vermorel
76% match
Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2
76% match
Loading thumbnail…

d3.bayview walkthru

This example demonstrates a decorative, static composition of orange and red geometric shapes—a large rotated rectangle and multiple circles—rendered within an SVG canvas. The code applies a shared CSS style to both `rect` and `circle` elements, giving them a blue stroke with dashes and transparency. It uses D3.js version 3.5.5, referencing the `d3.select` API, though the primary drawing is hand-coded in markup. The gist includes a minimal HTML file and README, with the shape placement and attributes defined directly.

GGordyD
75% match
Loading thumbnail…

First D3 Test

A plain red square fills the entire 400-by-400 pixel SVG viewport, with no axes, labels, or data plotted. The example demonstrates the minimal setup for a D3 visualization by selecting the SVG element with `d3.select` and applying a CSS background color directly via `.style()`. It loads D3 v5 from a CDN and uses a bundled ES module import, relying on the SVG rendering approach. This serves as a first functional test, confirming that D3 and the SVG container are correctly connected.

Jjlonai@nnu.edu
75% match
Loading thumbnail…

SVG Fun

This example introduces D3 version 6 and 7 syntax by rendering basic SVG shapes—a pink circle and a red rounded rectangle—directly in an HTML page, with a fixed 960×500 SVG viewport. The code uses `d3.select` from the D3 library to append text to the document body, demonstrating the module’s import style. The accompanying README and embedded YouTube tutorial guide users through version differences. Rendering relies on plain SVG markup for shapes, not data joins or interactive features, serving as a minimal starting point for learning D3’s setup and drawing primitives.

GGoldSupplyChainz
75% match
Loading thumbnail…

D3 Intro

An empty SVG canvas is colored entirely red through a simple demonstration of D3's DOM manipulation. The code selects the `svg` element using D3's `select` function and applies an inline background color style. This example serves as a minimal introduction to D3 v5, using the library loaded from a CDN and bundled via rollup. The rendering relies on SVG, with no data binding or visualization yet, focusing solely on establishing the basic workflow of selecting elements and applying styles.

Ssploitfun
75% match
Loading thumbnail…

HTML Starter

A bare minimum HTML page renders a single SVG element that fills the viewport, with its background color set to red via D3's `select` function. The code uses `d3.v5` and React, with the SVG statically defined in the markup and manipulated through D3's selection API. The example demonstrates the simplest possible setup for combining D3 with a framework, serving as a starting point for more complex visualizations. The included stylesheet applies a large centered body text, though the visible output is limited to the red SVG background.

Aamalfiyd
75% match