Annotation Label Sandbox

100%

Annotation Label Sandbox

✓ Published1🌍 Public

Last edited Jun 13, 2021

Created on Jun 11, 2021

Forked from transform = translate HTML Starter

This example showcases the d3.annotation library by rendering several annotation types—including `d3.annotationLabel` and `d3.annotationCalloutCircle`—within an SVG on a white background. It demonstrates how to configure note labels, titles, text wrapping, alignment, connector endpoints (arrow and dot), and curve types for connectors, with annotations positioned at explicit x and y coordinates. The code uses D3 v4 to select the SVG element, append a `<g>` group, and call the `d3.annotation()` generator with an array of annotation objects, each specifying a custom color and optional subject settings like circle radius.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Annotation Label Sandbox

This example demonstrates how to add a single annotation label with an arrow connector to an SVG canvas using the d3-annotation library. The code creates a text title and subtitle, then defines an annotation object with custom note text, title, wrapping width, and alignment, along with a connector ending in an arrow. The annotation is rendered via `d3.annotation()` and `d3.annotationLabel`, with the SVG display styled using CSS, including the Lato font and a white background. The underlying data is hardcoded in JavaScript as an array of annotation objects.

SSreeram Veerapaneni

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

70% match

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng

70% match

Loading thumbnail…

Untitled

This example demonstrates how D3 v3 renders SVG marker shapes used as line endpoints. It defines four distinct path geometries—circle, square, arrow, and stub—and attaches each as both a marker-start and marker-end to a corresponding element in a group. The code uses `d3.scale.category10` for colors, builds markers via SVG `<defs>`, and positions everything within a fixed margin layout. The visible result is a set of colored, marker-capped paths across the canvas, though the intended connecting lines are commented out.

PPiotr Paszek

70% match

Loading thumbnail…

d3

This example demonstrates a single red circle with a green stroke, centered inside a 500-by-500 SVG canvas. The code uses D3 v6 to select the SVG element, append a circle, and set its radius, position, and fill and stroke colors via attribute methods. The visualization anchors the circle using fixed pixel coordinates, while the body text is styled with a 13-em font size for a bold, minimal layout.

Ggyanendra verma

69% match

Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams

69% match

Loading thumbnail…

Untitled

This example demonstrates basic SVG shape construction on a static HTML page, combining a diagonal line, a rounded rectangle, and a vibrant green circle within a translated group. The visualization labels the shapes as "Rectangle" and "Circle" using monospaced text, while a larger title announces "d3.js 学习 Day01" (D3.js Learning Day 01). The code relies on raw SVG elements—`line`, `rect`, `circle`, `g`, and `text`—styled with inline CSS and attributes like `transform`, `fill`, and `stroke`. No JavaScript libraries are imported; it is a pure HTML/CSS/SVG composition.

Jjexchan

69% match

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

68% match