Week 2, Day 3: Wednesday, July 20, 2022
Synopsis
Visualization and interactivity. On day three participants learn to communicate information about data through interactive graphs and charts. In session one we introduce Scalable Vector Graphics (SVG), an XML technology that allows users to create data-driven charts and graphs with XQuery. The afternoon’s small-group hands-on session, with all instructors providing guidance, integrates these techniques into the edition for publication, as participants develop responsive, user-oriented visualizations exported and transformed from the laboratory edition data. Guest lecturer Elisa Beshero-Bondar teaches an extended special topic session on network analysis with text.
Outcome goals
- Understand that SVG is an XML vocabulary.
- Think about the axes as infinite space, the viewport as a window onto that space, and the viewbox as a way to control the viewport.
- Draw and style circles, lines, and text with SVG.
- Discuss charting patterns and anti-patterns.
- Plan the model and inventory chart components.
- Learn about graphs, nodes, and edges.
- Learn about types of centrality.
- Model nodes and edges from the data.
- Extract model data in TSV format.
Legend
- Presentation: by instructors
- Discussion: instructors and participants
- Talk lab: participants discuss or plan in small groups
- Code lab: participants code alone or in small groups
9:00–10:30: SVG basics
| Time | Topic | Type |
|---|---|---|
| 15 min | What is SVG and how does it work? | Presentation |
| 10 min | The SVG coordinate space. | Code lab |
| 15 min | SVG housekeeping. | Code lab |
| 25 min | SVG basic shapes. | Code lab |
| 25 min | Planning a sample visualization. | Talk lab |
10:30–11:00: Coffee break
11:00–12:30: Creating SVG visualizations for the edition
Edition repo stages for session
| Time | Topic | Type |
|---|---|---|
| 15 min | Scope of variables. | Code lab |
| 30 min | Create the model. | Code lab |
| 45 min | Implement the planned visualization using the model. | Code lab |
12:30–2:00: Lunch
2:00–3:30: Special topic: Introducing network analysis with Elisa Beshero-Bondar
| Time | Topic | Type |
|---|---|---|
| 25 min | What is network analysis? How is it used? | Presentation |
| 50 min | Creating the model as tab-separated values (TSV) using XQuery. | Presentation |
| 15 min | Install Cytoscape. | Code lab |
3:30–4:00: Coffee break
4:00–5:30: Special topic: Using Cytoscape to visualize network relationships with Elisa Beshero-Bondar
| Time | Topic | Type |
|---|---|---|
| 30 min | Import TSV and explore network analysis data. | Code lab |
| 45 min | Style nodes and edges, create sub-networks from a complex network, and explore export formats from Cytoscape. | Code lab |
| 15 min | (TEI) graphing for eXist-db. | Presentation |
We’ll end each day with a request for feedback, based on a general version of the day’s outcome goals, and we’ll try to adapt on the fly to your responses. Links to the feedback forms are in our Slack workspace in the #daily-feedback channel (posting from Mason on Mon, July 11).