O'Reilly logo

D3.js By Example by Michael Heydt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 3. Creating Visuals with SVG

In this chapter, we will learn about Scalable Vector Graphics, commonly referred to as SVG. SVG is a web standard for creating vector-based graphics within the browser. We will begin the chapter with several basic examples of directly coding SVG within the browser, and in the end, examine how to use D3 to create SVG elements based on data.

In this chapter, we will cover the following topics:

  • A brief introduction to SVG, coordinates, and attributes
  • A simple example of SVG that draws circles
  • Working with fundamental shapes: ellipses, rectangles, lines, and paths
  • The relationship of CSS with SVG and D3.js
  • Using strokes, line caps, and dashes
  • Fundamental transformations: rotate, translate, and scale
  • Grouping SVG elements ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required