InfoVis SS 2026

Exercise 1: Create a Simple Chart in SVG

This exercise involves hand-coding a chart in SVG 1.1. There is widespread browser support for SVG 1.1.

There has been a Candidate Recommendation for SVG 2 since 2018, but browser support is still very patchy.

Note:

• This is an individual exercise. Points will be awarded individually, not by group.

• You must work alone. Do not collaborate with anyone else (and certainly not with a colleague who is creating the same chart).

• You must use a plain text editor.

  I want you to hand code an SVG file using a text editor. Do not use a vector graphics editor such as Illustrator or Inkscape for this exercise. I will notice the difference.

• You are not allowed to use any Generative AI tool for this exercise!

1 Preparation

1. Read the (free) Pocket Guide to Writing SVG:
   https://svgpocketguide.com/

2. Look at this guide to hand-coding SVGs:
   https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

3. Refer to the SVG 1.1 Specification for any details:
   https://w3.org/TR/SVG11/

   Note: It is also possible to style SVG elements using CSS, either from an external file (style sheet) or embedded in a <style> element.

4. The best book on SVG for the web is:
   Using SVG with CSS3 and HTML5: Vector Graphics for Web Design Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey; O'Reilly, Nov 2017, ISBN 1491921978.
   https://learning.oreilly.com/library/view/using-svg-with/9781491921968/

5. Check out this article on Making Charts with SVG:
   https://css-tricks.com/how-to-make-charts-with-svg/

6. Download the sample SVG files and data files from:
   ../exercises/materials/svg-chart/
   

   Right-click, Save Link As...

   There are examples of charts by previous students Peter Oberrauner, Ridvan Aydin, and Philipp Drescher.

   The example charts are provided under the terms of a CC BY 4.0 licence.

   Do not simply replicate the look of the examples, come up with your own style!

2 Dataset and Chart Type Assignments

There are two datasets (each with seven records):

1. Vienna Population:

   Population of the city of Vienna, on 01 Jan of each year, from 2019 to 2025:
   vienna-population-2019-2025.txt

   Source: Stadt Wien, Bevölkerungsstand;
   https://wien.gv.at/statistik/bevoelkerungsstand

2. Gorton and Denton By-Election Results, 26 Feb 2026:

   Percentage of votes for top seven parties:
   gorton-election-2026-02-26.txt

   Source: Manchester City Council, Parliamentary Gorton and Denton By-Election;
   https://manchester.gov.uk/directory_record/538292/parliamentary_gorton_and_denton_by-election_-_26_february_2026

There are two chart topics:

1. Line chart with population dataset (population-line).
2. Bar chart with election dataset (election-bar).

See TeachCenter to see which topic you have been assigned.

3 Plan the Chart on Graph Paper

1. Sketch the chart on graph paper (kariertes Papier) to figure out the coordinates.

   I want to see your workings, not just a hand-drawn version of the chart!

2. Keep the sketch to document your process and hand in.

   Make a copy or a scan first if you want to keep it, you will hand in the original.

4 Hand Code the Chart in SVG 1.1

Using a text editor, hand code your assigned chart as SVG 1.1:

1. Name your SVG file as follows: surname-task.svg, where surname is your (main) surname in lower case and task is one of population-line or election-bar, depending on your assignment. For example, andrews-population-line.svg or andrews-election-bar.svg

2. Include the following visual elements in your chart:

   • the chart itself
   • chart title
   • x axis with tick marks and labels
   • x axis title
   • y axis with tick marks and labels
   • y axis title
   • a narrow uniform margin around the chart (no visible frame).

3. The sample SVG files contain a comment with copyright and CC BY 4.0 licence statement:

   • Change the name in the copyright statement to your own and the year to this year.
   • Or, alternatively, leave out the licence statement, if you do not wish to place your work under that licence.

Bear in mind:

• Only use UTF-8 character encoding (the default for SVG).

• Never set a width or height (or x or y origin) on the SVG element! These fix an absolute size in pixels and mean that your chart will not be freely scalable. Instead, use viewBox to define a user coordinate space.

• In the SVG coordinate system, the origin (0,0) is in the top left corner.

• If you use CSS to style the SVG elements, put the style directives in a <style> element inside the SVG file.

• In general, set font sizes in user (viewBox) units, font-size="10". Never set font sizes in absolute units such as px or pt. Avoid setting font sizes in relative units such as em or rem, except for special use cases.

• Keep your SVG clean and tidy. Use indentation of 2 spaces. Do not use any tab characters.

5 Hand In Your Work

1. Email your SVG file to me at kandrews@iicm.edu by Tue 10 Mar 2026 18:00.

2. I will collect your hardcopy sketches in class on Wed 11 Mar 2026.