Creating SVG Elements with D3

>

Learn how to create SVG elements using D3.js. SVG (Scalable Vector Graphics) uses XML-like text to create graphics.

What is SVG?

  • Text-Based Image: SVG is a text-based image format.
  • HTML-like Structure: SVG elements are similar to HTML elements.
  • Part of the DOM: SVG elements are part of the Document Object Model (DOM).
  • Attributes for Properties: SVG properties are set using attributes.
  • Absolute Positioning: SVG elements are positioned relative to (0, 0).

Example: Creating a Rectangle in SVG

Syntax

<svg width="500" height="500">
<rect x="10" y="10" width="150" height="150"></rect>
</svg>
Output

[Displays a rectangle at position (10,10) with width 150 and height 150.]

Drawing SVG Elements with D3

Line

Syntax

<svg width="500" height="500">
<line x1="50" y1="50" x2="300" y2="50" stroke="black"/>
</svg>
Output

[Displays a black line from (50,50) to (300,50).]
Syntax

<body>
<script>
var width = 500;
var height = 500;

// Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Create and append line element
svg.append("line")
    .attr("x1", 50)
    .attr("x2", 300)
    .attr("y1", 50)
    .attr("y2", 50)
    .attr("stroke", "black");
</script>
</body>

Rectangle

Syntax

<svg width="500" height="500">
<rect x="50" y="50" width="200" height="100"></rect>
</svg>
Output

[Displays a rectangle at position (50,50) with width 200 and height 100.]
Syntax

<body>
<script>
var width = 500;
var height = 500;

// Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Create and append rectangle element
svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 200)
    .attr("height", 100);
</script>
</body>

Circle

Syntax

<svg width="500" height="500">
<circle cx="250" cy="250" r="100"/>
</svg>
Output

[Displays a circle with center (250,250) and radius 100.]
Syntax

<body>
<script>
var width = 500;
var height = 500;

// Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Append circle
svg.append("circle")
    .attr("cx", 250)
    .attr("cy", 250)
    .attr("r", 100);
</script>
</body>

Ellipse

Syntax

<svg width="500" height="500">
<ellipse cx="250" cy="250" rx="150" ry="75"/>
</svg>
Output

[Displays an ellipse with center (250,250), x-radius 150, and y-radius 75.]
Syntax

<body>
<script>
var width = 500;
var height = 500;

// Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Append ellipse
svg.append("ellipse")
    .attr("cx", 250)
    .attr("cy", 250)
    .attr("rx", 150)
    .attr("ry", 75);
</script>
</body>

Text

Syntax

<svg width="500" height="500">
<text x="250" y="250">Hello, SVG!</text>
</svg>
Output

[Displays text "Hello, SVG!" at position (250,250).]
Syntax

<body>
<script>
var width = 500;
var height = 500;

// Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Append text
svg.append("text")
    .attr("x", 250)
    .attr("y", 250)
    .text("Hello, SVG!");
</script>
</body>

Styling SVG Elements

You can style SVG elements using attributes or CSS:

  • Fill: Sets the color inside the shape.
  • Stroke: Sets the color of the outline.
  • Stroke-width: Sets the width of the outline.
  • Opacity: Sets the transparency level.
  • Font-family: Specifies the font for text.
  • Font-size: Specifies the size of the text.

Example: Styling with D3

Syntax

<body>
<script>
var width = 500;
var height = 500;

// Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Append and style ellipse
svg.append("ellipse")
    .attr("cx", 250)
    .attr("cy", 250)
    .attr("rx", 150)
    .attr("ry", 75)
    .attr("fill", "lightblue")
    .attr("opacity", 0.7);

// Append and style text
svg.append("text")
    .attr("x", 150)
    .attr("y", 250)
    .attr("fill", "darkblue")
    .attr("font-family", "Arial")
    .attr("font-size", "20px")
    .text("Styled Ellipse!");
</script>
</body>

Now you know how to create and style SVG elements with D3! In the next chapter, we’ll use these skills to build more complex SVG charts.