Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Image

Public visualization

Viewing a saved revision (read-only)

2908d450863943a5a2152f3d43c5f501

Image

0 stars0🌍 Public
BBelede Rahul
Last edited Feb 27, 2024
Created on Feb 27, 2024
Forked from Circles with D3

This example uses D3.js v7 to draw a simple cartoon dog from geometric shapes defined in an external JSON file. The visualization shows a brown dog with a circular body and head, floppy elliptical ears, white eyes, a black nose, and a curved mouth line, all positioned within a 400x400 SVG canvas. The code loads the shape coordinates and colors from the JSON data using `d3.json`, then appends SVG elements—including `circle`, `ellipse`, and `path`—to render each part of the dog. The mouth is drawn as a path with a stroke, while the remaining features use filled shapes, demonstrating a straightforward declarative approach to building vector graphics with data-driven attributes.

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!