d3 + SVG

Let's go exploring:

Let's explore some more:

SVG

SVG

SVG (Scalable Vector Graphics) is the vector graphics format of the web.

(Vector graphics: lines, circles, shapes
Bitmap/raster graphics: pixels)

SVG

SVG is human-readable and part of the HTML specification. SVG is defined using HTML-tags:

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50px" cy="50px" r="20px">
    </circle>
</svg>

SVG

SVG comes with several basic shapes:

<svg width="550" height="100">
    <circle cx="50px" cy="50px" r="30px"></circle>
    <rect x="95px" y="20px" width="60px" height="60px"></rect>
    <ellipse cx="200px" cy="50px" rx="30px" ry="20px"></ellipse>
</svg><

SVG

SVG's coordinate system starts in the top-left corner:

d3 + SVG

d3 + SVG

d3.js was originally built with SVG in mind. All its DOM manipulation works with SVG.

var svg = d3.select('body').append('svg')
  .attr('width', 300)
  .attr('height', 300);

d3 + SVG

var svg = d3.select('body').append('svg')
  .attr('width', 300)
  .attr('height', 300);

svg.append('circle').classed('my-circle', true)
  .attr('cx', 30)
  .attr('cy', 30)
  .attr('r', 25);
  

d3 + SVG

Let's draw some circles with d3!

(Use code/d3-basics/template.html as a starting point)

More SVG Shapes

SVG

Polylines and polygons have a single points attribute, containing a list of coordinates:

<polyline points="0 0, 65 120, 0 115, 75 130"/>

SVG

Path is the most flexible shape, has its own mini-language and can be used to draw lines, arcs, curves, ...

<path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45
  L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10" />

SVG Styling

SVG Styling

SVG elements can be styled using a variety of attributes:

<circle cx="50px" cy="50px" r="20px"
  stroke="blue"
  fill="pink" />

SVG Styling

There's also attributes for opacity (in addition to the regular CSS-opacity):

<circle cx="50px" cy="50px" r="20px"
  stroke="blue"
  fill="pink"
  stroke-opacity="0.5"
  fill-opacity="0.5" />

SVG Styling

Plus attributes for line-styles:

<circle cx="50px" cy="50px" r="20px"
  stroke="blue"
  fill="pink"
  stroke-width="20" />

SVG Styling

Most attributes can be set via CSS (except the "position/radius" ones):

circle {
  fill: white; stroke: blue;
  stroke-width: 20; opacity: 0.5;
}

<circle cx="50px" cy="50px" r="20px"/>

SVG Styling

Some elements (e.g., <line>) have weird defaults and need styling to be visible at all:

<line x1="20" y1="20" x2="300" y2="80"
stroke="blue" stroke-width="20"></line>

SVG Styling

SVG also supports fills with gradients and general patterns:

SVG Text

SVG Text

SVG also has a <text> tag:

<text x="10" y="90">Hello!</text>

SVG Text

Note that the y attribute determines the text's baseline!

<text x="10" y="90">Hello!</text>

SVG Text

SVG Text ignores text-align, use text-anchor (start, middle, end) instead.

<text x="10" y="90" text-anchor="middle">Hello!</text>

SVG Text

You can style SVG text using the regular CSS font attributes:

text {
  font-family: serif; font-style: italic;
  font-variant: small-caps; font-size: 94px;
}

<text x="10" y="90">Hello!</text>

SVG Text

SVG Text doesn't do line breaks :(

<text x="10" y="90">Hello! This is a very long text which
  will just disappear beyond the SVG's borders.</text>

SVG Text

You can use the tspan element to do that manually...

<text x="10" y="50"><Hello! This is a very
<tspan x="10" y="100">long text which will just</tspan>
<tspan x="10" y="150">disappear beyond the SVG's
borders.</tspan></text>

SVG Text

Use textPath to make text paths:

<path id="my_path"
d="M 60,60 C 240,60 240,300 700,250" fill="transparent" />
<text>
  <textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>

SVG Groups

SVG Groups

Use groups <g> to apply attributes to several elements:

<g transform="translate(100, 100)">
  <circle cx="0" cy="0" r="100" fill="#dd0000" />
  <text x="0" y="0" fill="white" text-anchor="middle">circle</text>
</g>

SVG Groups

Use groups <g> to apply attributes to several elements:

<g transform="rotate(45)">
  <circle cx="0" cy="0" r="100" fill="#dd0000" />
  <text x="0" y="0" fill="white" text-anchor="middle">circle</text>
</g>

SVG Groups

Use groups <g> to apply attributes to several elements:

<g transform="translate(100, 100) rotate(45)">
  <circle cx="0" cy="0" r="100" fill="#dd0000" />
  <text x="0" y="0" fill="white" text-anchor="middle">circle</text>
</g>