D3 Logo

100%

✓ Published0🌍 Public

Last edited Oct 24, 2019

Created on Oct 16, 2015

The D3 logo is rendered as a stylized “d3” in a 400×400 SVG viewport, with the letterforms clipped from three overlapping linear gradients in orange and red. The example demonstrates the official logo artwork directly from the d3-logo repository, embedded via an `<img>` tag in a minimal HTML page. The SVG uses a `clipPath` to define the letter shapes, while the gradients—`gradient-1`, `gradient-2`, and `gradient-3`—paint the clipped areas with smooth color transitions. The rendering is static, with no animation or interaction.

AI-generated description

The official D3 logo is available is several forms in the d3-logo repository.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Outline Logo

This example displays the D3 logo as a high-contrast outline, designed for the official D3 sticker. It renders two overlapping SVG `<use>` elements referencing a single `<path>` definition: the first applies a thick black stroke, while the second fills the shape with white to create the outlined effect. The logo is drawn entirely with hand-coded path data, and the page styles set a light background. No JavaScript or D3 APIs are used; the visualization relies solely on static SVG markup.

Mmbostock

84% match

Loading thumbnail…

Revised D3 Logo

This example presents a geometrically precise reconstruction of the D3 logo, replacing cubic Béziers with strictly circular arcs and straight lines. The SVG rendering shows the logo’s path alongside a grid of construction lines, key anchor points, and intersecting circles that define the arcs. The code computes several points via circle-line and circle-circle intersection, using SVG elements like `<path>`, `<circle>`, and `<line>` to visualize the underlying geometry. The result highlights how the logo’s shape is derived from a small set of overlapping radii and horizontal guides.

Mmbostock

84% match

Loading thumbnail…

Animated D3 Logo

The D3 logo animates as if hand-drawn, with its "d" and "3" shapes tracing their strokes in sequence. The SVG paths are initially hidden, then revealed using stroke-dasharray transitions. Each path’s total length determines its animation duration, and transitions are queued with delays so they draw one after another. The example uses d3.select and d3.selectAll to manage the paths, with the animate function triggered on load, click, or touch.

Mmbostock

83% match

Loading thumbnail…

Logo design in Color

A logo design is drawn on an SVG canvas using D3 v5, featuring a black rounded rectangle with white text and geometric elements. The design incorporates two text labels, "V z" and "Hub", composed in the Ubuntu Mono font. A set of circles and a thin rectangle animate into place, using D3's `transition` API with staggered delays and durations to create a sequential reveal effect. The visualization demonstrates the application of basic SVG shapes, styling via CSS classes, and D3 animation for a simple brand identity composition.

NNita

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

73% match

Loading thumbnail…

D3 Testing

A hand-drawn-style face constructed from three SVG circles, rendered via static HTML and CSS within a D3-less page title. The code directly specifies circle positions, radii, and styling attributes—a yellow head with a thick black stroke, plus two black eyes—without using any D3 APIs or JavaScript logic. The example serves as a minimal visual test of SVG shape rendering and basic geometry layout, with the viewport set to 960 by 500 pixels and overflow hidden.

AArne Bab

73% match

Loading thumbnail…

beginning of D3

A simple SVG canvas displays a single large yellow circle with a black outline, centered on a 900-by-900 viewport. The example demonstrates the most basic use of the Scalable Vector Graphics (SVG) API, with geometric attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` set directly in the markup. The accompanying HTML page contains no JavaScript or D3 library references, relying entirely on static SVG syntax. This minimal composition serves as a starting point for learning graphical primitives before introducing dynamic data visualizations.

MMaharshi

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

71% match