Revised D3 Logo

100%

Revised D3 Logo

✓ Published0🌍 Public

Last edited Oct 24, 2019

Created on Oct 16, 2015

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.

AI-generated description

An updated, more geometrically precise implementation of the D3 logo using strictly circular arcs and lines (rather than cubic Béziers). Some of the points are computed using circle-line and circle-circle intersection.

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…

D3 Logo

This example displays the D3.js logo as a purely vector-based SVG graphic. It defines a custom path, assigned the ID "deethree", which encodes the logo's shape through a series of arc and line commands. The graphic is first rendered as a thick black outline using a `<use>` element with a stroke, then duplicated with a white fill. The implementation directly leverages the SVG `<defs>` and `<use>` tags within the HTML markup, with no JavaScript libraries involved.

LLGBY4

80% match

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

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

77% match

Loading thumbnail…

DevResults Logo

This example uses D3.js to recreate the DevResults logo mathematically, transforming a 6x6 grid of dots and a bar chart into a circular composition. The visualization demonstrates two key techniques: approximating circular dots with four Bézier curves (using the constant 0.551915024494 for control-point placement), and projecting points from a square grid onto a circle using a mathematical mapping. The result is an animated SVG logo where dots and bars warp to fit a circular envelope, with subtle color transitions, mimicking Illustrator's envelope distort effect in code.

HHerbCaudill

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

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

72% match

Loading thumbnail…

Rounded Corner

This example demonstrates how to compute a rounded corner between a line and a circle, using geometric offsets and circle-line intersection formulas. The SVG rendering shows the original line, the outer circle, a dashed offset circle, and the resulting corner circle in red, along with its origin and tangency points. The code relies on D3.js v3 to append SVG elements and markers, while performing manual trigonometric calculations for the perpendicular and parallel offset lines, and solving the intersection to place the corner circle. The visualization clarifies the construction steps without any interaction or animation.

Mmbostock

71% match