InfoVis SS 2024

Exercise 1: Create a Simple Chart in SVG

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).

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 SVG 2 since 2018, but browser support is still very patchy.

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.

1.1 Preparation

1.2 Dataset and Chart Type Assignments

There are two datasets (each with seven records):

  1. Austria Population:

    Average yearly population, in millions, to nearest 1000, from 1960 to 2020:
    austria-population-1960-2020.txt

    Source: Statistik Austria; https://statistik.at/atlas/bev_prognose/

  2. UK General Election 2019:

    Number of seats for top seven parties (650 seats total):
    election-uk-2019.txt

    Source: Wikipedia; https://wikipedia.org/wiki/List_of_MPs_elected_in_the_2019_United_Kingdom_general_election

There are two chart types:

  1. Line Chart
  2. Bar Chart

Assignments

population-line:
Aumüller
Bajramovic
Heider
Hukkanen
Ibrahimpašić

election-bar:
Ramadan
Tenstad

1.3 Hand Code the Chart in SVG 1.1

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

Bear in mind:

1.5 Hand In Your Work

Email your SVG file to me at kandrews@iicm.edu before the deadline.