3. Crafting Visuals with SVG

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’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.

3.1 SVG Basics: The Canvas for Your Data

Before diving into D3.js, let’s briefly review essential SVG concepts. An SVG image is composed of basic shapes, paths, and text, defined by attributes like x, y, width, height, cx, cy, r, d, fill, stroke, etc.

The main container for all your SVG elements is the <svg> tag. Inside it, you’ll place various elements, often grouped with <g> tags for easier transformation and styling.

Detailed Explanation

When D3.js “appends” an SVG element (e.g., svg.append("rect")), it’s creating an actual XML element within the HTML document that the browser then renders. These elements can be styled with CSS and manipulated with JavaScript (via D3.js).

Key SVG elements for data visualization:

<rect>: Rectangles, often used for bar charts. Attributes: x, y, width, height.
<circle>: Circles, used for scatter plots or nodes in network graphs. Attributes: cx, cy, r (radius).
<line>: Straight lines. Attributes: x1, y1, x2, y2.
<path>: The most powerful and versatile SVG element, capable of drawing complex shapes, curves, and lines using a series of commands. Attributes: d (path data).
<text>: For displaying text labels, titles, and annotations. Attributes: x, y, text-anchor, alignment-baseline.
<g>: A container element used to group other SVG elements. Transformations (like translate, rotate, scale) applied to a <g> affect all its children.

Code Examples

Let’s create a simple HTML file to demonstrate basic SVG shapes with D3.js.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js SVG Basics</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; }
        .svg-container {
            border: 1px solid #ccc;
            background-color: #f0f8ff; /* Light blue background for SVG area */
            margin-top: 20px;
            border-radius: 8px;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        }
        .shape {
            stroke: #333;
            stroke-width: 2px;
        }
        .rect-example { fill: #a6cee3; }
        .circle-example { fill: #1f78b4; }
        .line-example { stroke: #b2df8a; stroke-width: 3px; }
        .text-example { font-family: sans-serif; font-size: 14px; fill: #33a02c; }
        .group-example rect { fill: #fb9a99; }
        .group-example circle { fill: #e31a1c; }
    </style>
</head>
<body>
    <h1>D3.js: Crafting Visuals with SVG</h1>

    <div class="svg-container">
        <svg id="my-svg" width="600" height="400"></svg>
    </div>

    <script type="module" src="./app.js"></script>
</body>
</html>

app.js

import * as d3 from 'd3';

const svg = d3.select("#my-svg");

// --- 3.1.1 Rectangles ---
svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 100)
    .attr("height", 70)
    .attr("class", "shape rect-example");
    // .attr("fill", "#a6cee3")
    // .attr("stroke", "#333")
    // .attr("stroke-width", 2);

// --- 3.1.2 Circles ---
svg.append("circle")
    .attr("cx", 250)
    .attr("cy", 85)
    .attr("r", 40)
    .attr("class", "shape circle-example");
    // .attr("fill", "#1f78b4")
    // .attr("stroke", "#333")
    // .attr("stroke-width", 2);

// --- 3.1.3 Lines ---
svg.append("line")
    .attr("x1", 350)
    .attr("y1", 50)
    .attr("x2", 450)
    .attr("y2", 120)
    .attr("class", "shape line-example");
    // .attr("stroke", "#b2df8a")
    // .attr("stroke-width", 3);

// --- 3.1.4 Text ---
svg.append("text")
    .attr("x", 500)
    .attr("y", 85)
    .attr("text-anchor", "middle") // Center text horizontally
    .attr("alignment-baseline", "middle") // Center text vertically
    .attr("class", "text-example")
    .text("Hello SVG!");

// --- 3.1.5 Groups (<g>) ---
const group = svg.append("g")
    .attr("transform", "translate(100, 200)") // Move the entire group
    .attr("class", "group-example");

group.append("rect")
    .attr("x", 0) // Relative to group's origin (100, 200)
    .attr("y", 0)
    .attr("width", 50)
    .attr("height", 50)
    .attr("class", "shape"); // Uses group CSS class for fill/stroke

group.append("circle")
    .attr("cx", 75) // Relative to group's origin
    .attr("cy", 25)
    .attr("r", 20)
    .attr("class", "shape"); // Uses group CSS class for fill/stroke

group.append("text")
    .attr("x", 35)
    .attr("y", 80)
    .attr("text-anchor", "middle")
    .text("Grouped!");

Exercises/Mini-Challenges

More Rectangles: Use data binding to draw 5 rectangles in a row. Each rectangle should have a random width (between 20 and 100 pixels) and a fixed height (50 pixels). Give them different fill colors from d3.schemeAccent.
Stacked Circles: Create a stack of 3 circles, each with a different radius (e.g., 20, 30, 40) and fill color, centered at the same cx and cy coordinates. The largest circle should be at the bottom, and the smallest on top. (Hint: Append them in the correct order or manage z-index with D3).
Crosshairs with Lines: Draw a simple crosshair using two <line> elements that meet in the center of the SVG. Make them red and dashed.
Text with Offset: Append a new <text> element. Instead of directly setting x and y, set x and then use dx and dy attributes to shift it relative to its x, y (or previous text’s position).

3.2 Paths: The Powerhouse of SVG

The <path> element is the most versatile SVG shape. It can draw anything from simple lines to complex curves, filled shapes, and outlines of geographical regions. Its shape is defined by the d attribute, which contains a sequence of path commands.

Detailed Explanation

Path data consists of a series of commands and coordinates:

M (moveto): M x y - Move to a point without drawing. (Always starts a path)
L (lineto): L x y - Draw a straight line to x,y.
H (horizontal lineto): H x - Draw a horizontal line to x.
V (vertical lineto): V y - Draw a vertical line to y.
Z (closepath): Z - Close the path by drawing a straight line back to the starting point.
C (curveto): C x1 y1, x2 y2, x y - Cubic Bezier curve (two control points, one end point).
S (smooth curveto): S x2 y2, x y - Shorthand for cubic Bezier (infers first control point).
Q (quadratic Bezier curveto): Q x1 y1, x y - Quadratic Bezier curve (one control point, one end point).
T (smooth quadratic curveto): T x y - Shorthand for quadratic Bezier (infers control point).
A (elliptical arc): A rx ry x-axis-rotation large-arc-flag sweep-flag x y - Draw an elliptical arc.

All commands also have a lowercase version (e.g., m, l) which specify relative coordinates instead of absolute ones.

D3.js provides geometry generators in the d3-shape module to simplify creating complex path d strings, especially for common chart types:

d3.line(): Generates path data for lines from an array of points.
d3.area(): Generates path data for areas (e.g., between a line and an axis).
d3.arc(): Generates path data for arcs (used in pie/donut charts).
d3.symbol(): Generates path data for common geometric symbols (circles, crosses, etc.).

Code Examples

Let’s use d3.line() and d3.area() to create a simple line chart with a shaded area.

index.html (Add a new SVG for paths)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js SVG Paths</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; }
        .svg-container {
            border: 1px solid #ccc;
            background-color: #f0f8ff;
            margin-top: 20px;
            border-radius: 8px;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        }
        .line-chart-path {
            fill: none;
            stroke: steelblue;
            stroke-width: 2px;
        }
        .area-chart-path {
            fill: lightsteelblue;
            opacity: 0.7;
        }
        .axis path, .axis line {
            fill: none;
            stroke: #333;
            shape-rendering: crispEdges; /* Prevents blurry lines */
        }
        .axis text {
            font-family: sans-serif;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <h1>D3.js: SVG Paths - Line and Area Charts</h1>

    <div class="svg-container">
        <svg id="path-chart" width="700" height="400"></svg>
    </div>

    <script type="module" src="./app.js"></script>
</body>
</html>

app.js

import * as d3 from 'd3';

const pathSvg = d3.select("#path-chart");

// Data for line and area chart
const lineData = [
    { x: 0, y: 80 },
    { x: 100, y: 120 },
    { x: 200, y: 60 },
    { x: 300, y: 150 },
    { x: 400, y: 90 },
    { x: 500, y: 180 },
    { x: 600, y: 100 }
];

// Chart dimensions and margins
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 700 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const g = pathSvg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// Scales for the data
const xScale = d3.scaleLinear()
    .domain(d3.extent(lineData, d => d.x))
    .range([0, width]);

const yScale = d3.scaleLinear()
    .domain([0, d3.max(lineData, d => d.y) + 20])
    .range([height, 0]); // Inverted for SVG y-coordinates

// --- 3.2.1 d3.line() generator ---
const lineGenerator = d3.line()
    .x(d => xScale(d.x)) // Map data x to SVG x
    .y(d => yScale(d.y)) // Map data y to SVG y
    // .curve(d3.curveMonotoneX); // Optional: add a curve for smoother lines

// Append the line path
g.append("path")
    .datum(lineData) // Bind the entire data array to one path element
    .attr("class", "line-chart-path")
    .attr("d", lineGenerator); // Use the line generator to create the 'd' attribute

// --- 3.2.2 d3.area() generator ---
const areaGenerator = d3.area()
    .x(d => xScale(d.x))
    .y0(height) // Y-coordinate for the base of the area (bottom of the chart)
    .y1(d => yScale(d.y)) // Y-coordinate for the top of the area
    // .curve(d3.curveMonotoneX); // Use same curve as line if desired

// Append the area path (typically drawn before the line so it's underneath)
g.append("path")
    .datum(lineData)
    .attr("class", "area-chart-path")
    .attr("d", areaGenerator);

// --- 3.2.3 Axes (for context) ---
g.append("g")
    .attr("class", "x-axis axis")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(xScale));

g.append("g")
    .attr("class", "y-axis axis")
    .call(d3.axisLeft(yScale));

// Add circles at each data point for emphasis
g.selectAll("circle")
    .data(lineData)
    .join("circle")
    .attr("cx", d => xScale(d.x))
    .attr("cy", d => yScale(d.y))
    .attr("r", 5)
    .attr("fill", "red")
    .attr("stroke", "white")
    .attr("stroke-width", 1.5);

Exercises/Mini-Challenges

Generate a Polygon: Create a data array representing the vertices of a polygon (e.g., a triangle or a star). Use d3.line() but remember to close the path (.attr("d", lineGenerator(data) + "Z")) to create a filled polygon.
Radial Line/Area Chart: Imagine data points in a polar coordinate system (angle, radius). Research d3.radialLine() and d3.radialArea() and try to create a simple “petal” or “spiral” shape. This will require converting polar to Cartesian coordinates or using a suitable scale.
Custom Symbols: Use d3.symbol() with d3.symbolStar or d3.symbolDiamond to draw custom markers instead of circles at the data points in the path chart. You’ll need to define a d3.symbol() generator and use attr("d", d3.symbol().size(50).type(d3.symbolStar)) or similar.

By now, you should be comfortable selecting DOM elements, binding data to them, using scales to map data, and drawing basic and complex SVG shapes. These are the core skills for building any static or interactive D3.js visualization. In the next chapter, we’ll build on this foundation by adding interactivity and smooth transitions to bring your charts to life.

Crafting Visuals with SVG

// table of contents

3. Crafting Visuals with SVG

3.1 SVG Basics: The Canvas for Your Data

Detailed Explanation

Code Examples

Exercises/Mini-Challenges

3.2 Paths: The Powerhouse of SVG

Detailed Explanation

Code Examples

Exercises/Mini-Challenges