Tutorials > Intro to D3.js

1. D3.js: Intro to SVG

July 1, 2013 | 4 minutes | By Scott Becker

This is the start of a video tutorial course on D3.js: Data Driven Documents. In this first video, we'll go over what SVG is, and how it works.

 
Watch Preview

 

It helps to have a working knowledge of SVG when digging into D3.js. Here's some resources to help!

Resources

Code

SVG Circle Example

<svg width="400" height="400">

  <circle cx="200"
          cy="200"
          r="150"
          fill="purple"
          stroke="black"
          stroke-width="20"/>

</svg>

Run times

  <script type="text/javascript">
    var distances = [2.0, 3.5, 5.0, 4.2, 6.7];
  </script>

Represented as a table

  <table border="1">
    <tr><th>Run Distances</th></tr>
    <tr><td>2.0 miles</td></tr>
    <tr><td>3.5 miles</td></tr>
    <tr><td>2.3 miles</td></tr>
    <tr><td>4.2 miles</td></tr>
    <tr><td>4.6 miles</td></tr>
  </table>

Represented as a bar chart with SVG

  <svg width="460" height="500">
    <rect width="200" height="18" y="0" />
    <rect width="350" height="18" y="20" />
    <rect width="230" height="18" y="40" />
    <rect width="420" height="18" y="60" />
    <rect width="460" height="18" y="80" />
  </svg>