Intro to D3

100%

✓ Published0🌍 Public

Last edited Aug 6, 2020

Created on Aug 6, 2020

This D3.js example renders a static SVG emblem centered on a dark olive green circle with a black outline. Two beige banner arcs, created using the `d3.arc` API, frame the circle’s upper and lower sections. Text is placed along curved paths using SVG `textPath` elements, with the phrase “SEMPER PATIENS” following a lower wavy path and “2 0 0 3” positioned along an upper arc. The visualization demonstrates a declarative SVG construction approach, relying on absolute coordinates and D3’s arc generator for precise path definition.

AI-generated description

MIT Licensed

Similar vizzes

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

77% match

Loading thumbnail…

d3 start

A simple SVG drawing depicts a yellow circle with a black outline, two black eyes, and a single wedge-shaped mouth segment on a 960 by 500 canvas. The D3.js v5 code uses the `select`, `append`, and `attr` APIs to construct the shapes, while a path’s `d` attribute is generated with the `arc` generator using inner and outer radii and an angle range. The illustration demonstrates basic shape creation and arc path generation in an SVG context.

Ookrzysiek

76% match

Loading thumbnail…

D3-SVG Basics

This example demonstrates the fundamental building blocks of SVG graphics within a minimal HTML page, showing a simple text message alongside basic shapes including two circles, a thick navy line, and a green path. The code uses raw SVG elements—namely circle, line, and path tags—directly in the document markup, with CSS styling applied to the message text. The line element contains a duplicated x2 attribute and placeholder text, while the path illustrates a simple coordinate-based drawing command sequence. The page relies on no JavaScript libraries, serving purely as a static demonstration of HTML, CSS, and SVG syntax.

NNhat Nguyen

76% match

Loading thumbnail…

D3_

This example renders a single SVG arc using React and D3. The page displays a heading and a small 100x100 pixel SVG containing a path generated by `d3.arc()` with fixed inner and outer radii, plus start and end angles. The arc is drawn via the `d3.arc()` function’s output, which is assigned to the `d` attribute of an SVG path element. The code uses React 17 and D3 v7, with the visualization embedded directly in a JSX component and rendered through `ReactDOM.render`. The data is hardcoded in the arc parameters.

Kkhenghuatlim

75% match

Loading thumbnail…

D3 testing1

This example draws a single SVG circle and text element using D3 v5, displaying the number "3" in blue. The code defines a reusable `createNumIcon` function that appends a stroked circle and a text label to an SVG canvas via `d3.select` and the `append` and `attr` methods. The circle has a fixed radius of 20 pixels and a blue stroke, while the text uses Arial font at 35 pixels. No data is loaded; the visualization is purely static and demonstrates basic SVG shape creation with D3.

PPere Ginebra Solanellas

75% match

Loading thumbnail…

Intro to D3

This example demonstrates how to build a simple face using basic SVG shapes in D3, with a lime circle for the head, black circles for eyes, and an arc-based mouth. The left eye remains static while the right eye animates horizontally through chained `transition().duration()` calls. All elements are created using D3 selections and the `arc` generator from the d3-shape API, rendered as SVG within a 960x500 viewport.

FFhouston17

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering within an HTML page, showing a green circle, a navy line, and an empty path element. The visualization uses the SVG specification directly in the markup rather than generating shapes programmatically. The accompanying JavaScript imports the `select` function from D3 version 7 and writes "Hello D3 version 7" into the document body, illustrating simple DOM manipulation. The code serves as an introductory template for combining static SVG graphics with the D3 library's selection API.

FFouzia A.

75% match

Loading thumbnail…

d3 intro

A D3.js example renders an SVG scene of a large yellow circle, flanked by two smaller outlined circles, against a brown background. The visualization demonstrates basic SVG shape construction and styling through the D3 API, using methods like `append`, `attr`, and `style` to set geometry, fill, stroke, and layout properties. It reads width and height attributes from the SVG element and positions shapes relative to those dimensions. The page loads D3 from UNPKG and imports `select` and `csv` from the local script. A static CSV data file is present but not used in the displayed scene.

RRITUZZ

75% match