Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Creating SVG Badass

Public visualization

Creating SVG Badass

0 stars0🌍 Public
Ssamuelapanisile11@gmail.com
Last edited Feb 6, 2024
Created on Feb 6, 2024
Forked from Circles with D3

This example shows a collection of six colored circles scattered across a light green SVG canvas, each with varying size, position, and opacity. The code uses D3's `select` and data join to bind an array of circle objects to SVG elements, setting attributes like `cx`, `cy`, `r`, and `fill` directly. It’s a minimal starting point for building custom SVG visualizations within a Svelte component, with the data hardcoded in the JavaScript source.

AI-generated description

Creating circles with D3.

Challenge

  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative

Svelte

Here's a video on how to get started with Svelte as well!

Comments

Sign in to join the discussion.

MIT Licensed