Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Shapes

Public visualization

Viewing a saved revision (read-only)

8c3ea0aa66c04e7b979ee95ebbd94c9b

SVG Shapes

0 stars0🌍 Public
YYogesh Joshi
Last edited Jul 19, 2019
Created on Jul 19, 2019
Forked from Hello VizHub

This example demonstrates fundamental SVG shape elements—circle, rect, and line—positioned within a fixed 960 by 960 coordinate system. The visualization compares shapes with default styling against those customized with explicit `fill` and `stroke` attributes, while a `<g>` group applies shared `fill="teal"` and `stroke="black"` to its children. Beyond these static SVG primitives, the code also showcases basic D3 integration by importing `select` from `d3` and using it to set the text content of a div element, along with a separate ES6 module export. The rendering relies entirely on SVG markup.

AI-generated description

An example showing the capabilities of VizHub.