Skip to main content
SimilarExport ZIP
100%

D3 Outline Logo

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Dec 11, 2015

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.

AI-generated description

A new version of the D3 logo with a high-contrast outline. This was designed for the official D3 sticker, which is available for only $4.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Logo

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.

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
79% 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
78% match
Loading thumbnail…

D3 path-I

This example showcases a single, closed curved shape rendered as a stroked SVG path, creating a geometric knot-like form that stands alone on a blank white canvas. The path’s coordinates are provided as a static string in the `d` attribute, defining the outline with a smooth cubic Bézier curve that draws the shape twice to connect its interior and exterior contours. Built with D3 v6 inside a React-free HTML page, the code selects the `body` element, appends an SVG container of 960 by 500 pixels, and uses `d3.select` and `append` to add the path. The stroke is colored blue with a width of 2 pixels, and the fill is explicitly set to none, leaving only the outline visible.

NNita
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
73% match
Loading thumbnail…

D3 SVG

This example demonstrates basic SVG shapes rendered with D3.js, showing how static geometric elements can be drawn directly in a web page. It displays a blue circle and a rectangular outline with a stroke, positioned at fixed coordinates within an SVG canvas of 500 by 960 pixels. The code uses the D3.js library to construct the SVG container and its child elements, with circle and rect tags defining the visual properties. The rendering approach relies on D3’s SVG manipulation capabilities, though no data binding or dynamic updates occur, as the shapes are hardcoded in the HTML structure.

MMohd Sameer
73% match
Loading thumbnail…

intro to d3

This example demonstrates basic SVG shape rendering and styling within an HTML page, displaying circles, rectangles, lines, and paths at fixed coordinates. The visualization loads D3.js via UNPKG but primarily relies on raw SVG elements with presentation attributes for colors, strokes, and transforms. A stylesheet defines the SVG path's green stroke and stroke-width through CSS classes. The example serves as a minimal introduction to combining SVG markup with imported JavaScript libraries and external CSS, though it does not yet showcase D3's data-binding or dynamic layout capabilities.

RRITUZZ
73% match
Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck
72% match