Viewing a saved revision (read-only)
7a99a55679f842ed8ce853ec99825993
Image
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 descriptionCreating 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!