https://ai-blog.noorshomelab.dev/tags/shapes/Recent content in Shapes on AI VOIDHugoenSat, 11 Oct 2025 01:00:00 +0530https://ai-blog.noorshomelab.dev/d3js-guide/crafting-visuals-with-svg/Sat, 11 Oct 2025 01:00:00 +0530https://ai-blog.noorshomelab.dev/d3js-guide/crafting-visuals-with-svg/<h1 id="3-crafting-visuals-with-svg">3. Crafting Visuals with SVG</h1> <p>Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. D3.js works beautifully with SVG because SVG elements are part of the DOM, making them easily manipulable with D3&rsquo;s selection and data-binding methods. This chapter will teach you how to create various SVG elements using D3.js, forming the visual building blocks of your charts.</p> <h2 id="31-svg-basics-the-canvas-for-your-data">3.1 SVG Basics: The Canvas for Your Data</h2> <p>Before diving into D3.js, let&rsquo;s briefly review essential SVG concepts. An SVG image is composed of basic shapes, paths, and text, defined by attributes like <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code>, <code>cx</code>, <code>cy</code>, <code>r</code>, <code>d</code>, <code>fill</code>, <code>stroke</code>, etc.</p>