D3.js - Introduction to SVG

D3.js - Introduction to SVG

SVG, which stands for Scalable Vector Graphics, is a crucial technology for creating web-based data visualizations. SVG is an XML-based markup language for describing two-dimensional vector graphics. Unlike raster graphics (like JPEGs or PNGs) which are pixel-based, vector graphics are defined by mathematical equations. This allows them to scale to any size without losing clarity or quality, making them ideal for responsive designs and high-resolution displays. D3.js heavily utilizes SVG to render visual elements.

Key Features of SVG

Understanding these SVG features will help you when working with D3.js:

• Vector-based and Text-based: SVG images are defined in XML text files, meaning they are human-readable and can be manipulated with code or text editors.
• Scalable and Resolution Independent: SVGs look sharp at any zoom level or screen resolution.
• DOM Manipulable: SVG elements become part of the Document Object Model (DOM), just like HTML elements. This allows D3.js and JavaScript to interact with and modify them dynamically.
• Styleable with CSS: You can apply CSS styles to SVG elements for presentation (colors, fonts, strokes, etc.).
• Coordinate System: SVG uses a coordinate system where (0,0) is typically the top-left corner. Positions are absolute relative to their parent SVG container or transformed coordinate space.
• Embeddable in HTML: SVG markup can be directly embedded within an HTML document.

A Minimal SVG Example (Without D3.js)

Let’s first look at a basic SVG image directly embedded in HTML.

Step 1: Create an SVG canvas. The <svg> element defines the drawing area. Its width and height attributes set its dimensions.

<!-- In your HTML body -->
<svg width="300" height="300">
  <!-- SVG shapes will go here -->
</svg>

By default, units are pixels if not otherwise specified.

Step 2: Draw a shape, for example, a line. The <line> element draws a straight line.

<svg width="300" height="300">
  <line x1="100" y1="100" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

Explanation of <line> attributes:

• x1, y1: Coordinates of the starting point of the line.
• x2, y2: Coordinates of the ending point of the line.
• style: An inline style to define the line’s appearance. Alternatively, CSS classes can be used.
• stroke: Color of the line (here, red).
• stroke-width: Thickness of the line (here, 2 pixels).

Let’s integrate this into a full HTML document:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>SVG Line Example</title>
  <style>
   body { font-family: Arial, sans-serif; }
   svg {
     border: 1px solid #ccc; /* Optional: to see the SVG boundary */
   }
  </style>
 </head>
 <body>
  <div id="svgcontainer">
   <svg width="300" height="300">
    <line x1="100" y1="100" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
   </svg>
  </div>
  <p>The above SVG displays a red diagonal line.</p>
 </body>
</html>

When you open this HTML file in a browser, you will see a red diagonal line within a 300x300 pixel area.

Creating SVG Elements with D3.js

D3.js excels at creating and manipulating SVG elements based on data. Let’s recreate the line example using D3.js.

Step 1: Create a container in your HTML where D3 will place the SVG.

<!-- In your HTML body -->
<div id="d3svgcontainer"></div>

Step 2: Use D3 to select the container, append an <svg> element, and then append a <line> element inside it, setting its attributes.

// JavaScript code (e.g., within a <script> tag)
const width = 300;
const height = 300;

// Select the container div
const svgContainer = d3.select("#d3svgcontainer");

// Append an SVG element to the container
const svg = svgContainer.append("svg")
    .attr("width", width)
    .attr("height", height);

// Append a line element to the SVG
svg.append("line")
    .attr("x1", 100)
    .attr("y1", 100)
    .attr("x2", 200)
    .attr("y2", 200)
    .style("stroke", "blue") // Let's make this one blue
    .style("stroke-width", 2);

The complete HTML file with D3.js:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>SVG Line with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
   body { font-family: Arial, sans-serif; }
   svg {
     border: 1px solid #ccc; /* Optional */
   }
  </style>
 </head>
 <body>
  <div id="d3svgcontainer"></div>
  <p>The SVG below, created by D3.js, displays a blue diagonal line.</p>

  <script>
   const width = 300;
   const height = 300;

   const svgContainer = d3.select("#d3svgcontainer");

   const svg = svgContainer.append("svg")
       .attr("width", width)
       .attr("height", height);

   svg.append("line")
       .attr("x1", 100)
       .attr("y1", 100)
       .attr("x2", 200)
       .attr("y2", 200)
       .style("stroke", "blue")
       .style("stroke-width", 2);
  </script>
 </body>
</html>

This code will produce a blue diagonal line, demonstrating how D3.js can programmatically generate SVG content.

Common SVG Shape Elements

Besides <line>, SVG offers various other shape elements that D3.js can create and manipulate:

Rectangle Element (<rect>)

A rectangle is defined by its top-left corner’s coordinates (x, y), its width, and height.

SVG code for a rectangle:

<rect x="20" y="20" width="200" height="100" fill="green" />

Key attributes for <rect>:

• x: The x-coordinate of the top-left corner.
• y: The y-coordinate of the top-left corner.
• width: The width of the rectangle.
• height: The height of the rectangle.
• fill: The fill color of the rectangle (e.g., “green”).

Creating a rectangle with D3.js:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>SVG Rectangle with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 <body>
  <div id="svgcontainer"></div>
  <script>
   const svgWidth = 300;
   const svgHeight = 200;

   const svg = d3.select("#svgcontainer")
      .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight);

   svg.append("rect")
      .attr("x", 20)
      .attr("y", 20)
      .attr("width", 200)
      .attr("height", 100)
      .attr("fill", "green");
  </script>
 </body>
</html>

This will render a green rectangle within the SVG canvas.

Circle Element (<circle>)

A circle is defined by the coordinates of its center (cx, cy) and its radius (r).

SVG code for a circle:

<circle cx="150" cy="100" r="40" fill="purple" />

Key attributes for <circle>:

• cx: The x-coordinate of the center of the circle.
• cy: The y-coordinate of the center of the circle.
• r: The radius of the circle.

Creating a circle with D3.js:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>SVG Circle with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 <body>
  <div id="svgcontainer"></div>
  <script>
   const svgWidth = 300;
   const svgHeight = 200;

   const svg = d3.select("#svgcontainer")
      .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight);

   svg.append("circle")
      .attr("cx", 150)
      .attr("cy", 100)
      .attr("r", 40)
      .attr("fill", "purple");
  </script>
 </body>
</html>

This will render a purple circle.

Ellipse Element (<ellipse>)

An ellipse is defined by its center (cx, cy) and two radii: rx (horizontal radius) and ry (vertical radius).

SVG code for an ellipse:

<ellipse cx="150" cy="100" rx="100" ry="50" fill="orange" />

Key attributes for <ellipse>:

• cx: The x-coordinate of the center of the ellipse.
• cy: The y-coordinate of the center of the ellipse.
• rx: The horizontal radius of the ellipse.
• ry: The vertical radius of the ellipse.

Creating an ellipse with D3.js:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>SVG Ellipse with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 <body>
  <div id="svgcontainer"></div>
  <script>
   const svgWidth = 300;
   const svgHeight = 200;

   const svg = d3.select("#svgcontainer")
      .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight);

   svg.append("ellipse")
      .attr("cx", 150)
      .attr("cy", 100)
      .attr("rx", 100)
      .attr("ry", 50)
      .attr("fill", "orange");
  </script>
 </body>
</html>

This will render an orange ellipse. Understanding these basic SVG shapes is fundamental to building more complex visualizations with D3.js.