D3 SVG Primitives

100%

D3 SVG Primitives

✓ Published0🌍 Public

Last edited Oct 20, 2020

Created on Oct 20, 2020

This example demonstrates basic SVG shape primitives rendered with D3.js in a React environment. It displays rectangles, circles, ellipses, and lines with static styling, showcasing fundamental SVG element creation. The code uses D3 version 4 selections to append shapes directly to an SVG canvas, loading data from a CSV file for positioning. A second version uses `d3.scaleLinear` and `d3.interpolateBlues` to map data values to circle radii and fill colors, with mouseover and mouseout events controlling opacity to highlight individual circles.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

86% match

Loading thumbnail…

SVG practice

This example demonstrates basic SVG shape rendering, showing circles, rectangles, lines, and paths composed within grouped transformations. It uses React to render the SVG markup directly in the browser. The visualization applies scaling and translation transforms to position elements, while CSS classes control stroke and fill styles. The code employs raw SVG elements like `circle`, `rect`, `line`, and `path` without any external data source, serving as a practice exercise for layout and styling techniques.

DDannie2020

85% match

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

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering using D3.js within a React application, showing how vector graphics are constructed and styled. The code creates a blank HTML page that loads React and D3, providing a minimal scaffold for drawing shapes with SVG elements like circles and rectangles. It uses D3’s selection and data-join APIs to bind data to SVG nodes, allowing dynamic updates. The visualization clarifies the building blocks of SVG, such as coordinate systems, attributes, and styling, without relying on complex charting libraries.

TTheCreativeZellie

84% match

Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

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

84% match

Loading thumbnail…

d3 prac

This example shows a simple static composition of two basic shapes within an SVG: a red circle and a blue outlined rectangle. The code uses raw SVG elements directly in the HTML, placing the circle at coordinates (50, 50) with a radius of 50, and a 200x200 rectangle with a 20-pixel blue stroke starting at (10, 10). Nothing is interactive or animated; it demonstrates the fundamental syntax of SVG drawing within a React context.

Mmaryong2

84% match