D3 SVG

100%

✓ Published0🌍 Public

Last edited Nov 6, 2023

Created on Nov 6, 2023

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.

AI-generated description

DATA VISUALIZATION WITH D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML D3

This example shows a static set of basic geometric shapes rendered in an SVG canvas, using HTML, CSS, and JavaScript without any external libraries. It displays two circles, one pink and one black, alongside a black rectangle with a pink stroke, all positioned manually via SVG coordinates. The styling is applied through a CSS class for typography and inline presentation attributes for the shapes. The code demonstrates the foundational structure of an HTML page with embedded SVG, which serves as a minimal starting point for building more complex D3.js visualizations in a React environment.

SSurabhi Verma

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

85% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes drawn directly in an HTML document, including circles, rectangles, lines, and paths. The SVG canvas is fixed at 800 by 800 pixels, with shapes positioned using explicit coordinates and styled with attributes like fill, stroke, and stroke-width. The code also includes `index.js`, which imports the `select` function from D3 version 7 and sets the body text to "Hello D3 version 7", showing a minimal D3 integration alongside static SVG markup. The visual output is purely static, with no interaction or dynamic data binding.

Hharikishan8891

84% match

Loading thumbnail…

D3.js in action!

This example shows a red square with a thick black border rendered inside an SVG canvas, demonstrating basic D3.js DOM manipulation. The code uses `d3.selectAll('svg')` to target the SVG element and appends a `rect` with attributes for position, size, stroke, and fill. It relies on the D3 v5 library loaded from a CDN, and renders the shape as pure SVG geometry without any data binding or interaction. The result is a static visual, illustrating how D3 can directly create and style SVG elements.

SSagar Malviya

83% match

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates static geometric shapes—a circle and a rectangle—drawn directly on an SVG canvas with a fixed 960×500 viewport. The code uses only SVG elements and CSS styling, with no JavaScript-driven interaction or data binding. It relies on the SVG `circle` and `rect` primitives to define the shapes, while external stylesheets handle page layout and font imports. The D3.js library is imported but only used to set text content in a separate message element, which is not visible in the provided markup.

LLe Truong Trong Nguyen

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes as a static, code-driven visualization. It renders two primitive elements—a circle and a rectangle—directly within an HTML document using the SVG markup language. The circle appears without fill or stroke styling, while the rectangle uses a purple fill with an orange outline via SVG presentation attributes. The code relies on no external libraries or data sources, instead showcasing how SVG’s native `circle` and `rect` elements define geometry and appearance. The example serves as a minimal foundation for understanding vector graphics structure, independent of JavaScript or D3 functionality.

SShikhar Pachori

83% match

Loading thumbnail…

D3-HTML

This example demonstrates the basic structure of an HTML page that integrates SVG graphics created with D3.js. It shows a red circle positioned on an SVG canvas alongside a simple line element, combined with plain HTML text. The code primarily uses the D3.js library version 3 to render the SVG shapes, with the circle and line defined using standard SVG tags within an HTML document. The visualization serves as a minimal illustration of mixing vector graphics with standard web content.

RRakesh Mahendran

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes on a blank canvas, displaying a circle, rectangle, line, and path with varied colors and stroke styles. The static visualization uses raw SVG markup within an HTML page, with no external data sources or JavaScript libraries. Elements are positioned via explicit coordinates, including a green rectangle with a red border and a navy path drawn using the `d` attribute. The code relies solely on native SVG APIs and inline attributes to render the geometric primitives.

DDobrin Stoilov

83% match