Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

8c684661128749e5a2ecd0f431f2515e

Shapes with SVG and CSS

1 star3🌍 Public
Sshuksbhoney
Last edited Feb 12, 2022
Created on Feb 12, 2022
Forked from D3 Starter

This example demonstrates how to combine SVG shape elements with CSS styling to create static graphics, showing circles, rectangles, lines, and paths arranged in nested groups with various fills, strokes, and transforms. The code uses D3 version 6's `select` API from the `d3` module to modify the page content, while the visual output relies entirely on inline SVG markup and an external stylesheet. Shapes are positioned and scaled using SVG attributes like `transform`, `translate`, and `scale`, with CSS classes controlling stroke properties for the line and path elements.

AI-generated description

A demonstration of how to start using D3 version 6.