Practical: Scalable Vector Graphics (SVG)

Aims

• Learn about SVG
• Build a basic data visualisation
• Start using d3

Tasks

1. Work through one of the SVG tutorials below. SVG is a web standard, so is managed by the wc3 (World Wide Web Consortium). Start with the first tutorial (MDN). If you want another simple explanation look at the flaviocopes tutorial. If you want a more in-depth explanation, look at the w3c tutorial.

• MDN up to "Basic Transformations", although you can skip over "Gradients" and "Patterns" on first reading
• One from flaviocopes up to "Styling elements"
• w3c You can read chapter 1 if you want to, but it's not essential. Focus on Chapter II: SVG Basics

2. Create a simple data visualisation by hand-coding some SVG. With three data points e.g. [50,196,135] make a bar chart out of three rectangles with the same height, but different widths.

3. Adapt the example2 code in the introductory lecture on d3 to make your SVG bar chart get its data via d3.

4. If you have time then try to make some different charts out of your data, e.g.

• A line graph
• A pie chart