Data Visualization Lab

# Data Visualization Lab
Experimenting with D3 and Highcharts

CSE443: Winter 2026; Jennifer Mankoff (Last Edited: 2026-02-06). <a href="/courses/cse443/26wi/slides/visualization-lab.html">Live View: /slides/visualization-lab.html</a>

Important Reminder: check zoom & captioning

---

<div class="slide-outline" style="margin: 1em 0; padding: 1em; background: #f5f5f5; border-radius: 5px;">
<h2 style="margin-top: 0;">
  
  
    Outline
  
  
</h2>
    
  <ul style="list-style-type: none; padding-left: 0;">
  
  
  
  
  
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#5">Visualization Studio</a> (Slide 5)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
  </ul>
</div>

---
class: center, middle, inverse
# Announcements

<p>Announcements for week 5</p>

---
## Final Project
<ul>
  <li>Everything is up now</li>
  <li>There are significant revisions, so please let us know if you run into any inconsistencies. Our goal is a supportive structure, not stress!</li>
  <li>Taking a look together at it</li>
</ul>

---
class: center, middle, inverse
# Visualization Studio

---
## Setup

- Clone the [lab repo](https://gitlab.cs.washington.edu/teaching-materials/visualization-lab) in your preferred editor (VS Code recommended):
- Load d3.html in your web browser

---
## Check it out with a screen reader

- Open d3.html in your browser.
- Turn on your screen reader.
- Try to navigate to the chart:

Does focus reach the chart?
What (if anything) is announced?
Can you get individual values?

---
## Minimal Accessibility

- Add focusability (TODO 1)
- Add a description (TODO 2)
``` 
<p id="chartSummary" role="region"  aria-label="Interactive ... [ALT text]".>
  // Describe the chart in more detail
</p>```

---
## Make it more robust (1/2)
Make the description automatically so data updates update it
- In d3.html
```
<p id="chartSummary"
   aria-live="polite"
  
</p>```

---
## Make it more robust (2/2)
- in d3-chart.js
```const summary = `There are ${data.length} categories. Min ${min}, max ${max}, total ${total}.`;
document.getElementById('chartSummary').textContent = summary;```

---
##  Test again

We can do a lot more, but let's just stop here and test

Thoughts on other improvements we could do? (Start Post on [Ed](https://edstem.org/us/courses/90089/discussion/))
- we will add to this post over the course of today's studio

---
## Let's use a tool that helps!

Open highcharts.html

Try it with a screen reader
See if you can access a data table

---
## Look for and fix TODOS

- Caption vs Description
- Hover support?

Try it again when you're done

---
## Discussion

- How does something like Chartability help you understand what you actually need to implement to make charts accessible
- How do tools like Highcharts change the experience of addressing accessibility? Where else might tools help?

(Post on [Ed](https://edstem.org/us/courses/90089/discussion/))