owned this note
owned this note
Published
Linked with GitHub
---
tags: ResBaz2021
---
# Visualizing data with Vega-lite
## Monday, May 17th, 2021 3\:00-5\:00
[Back to Resbaz HackMD Directory](https://hackmd.io/@ResBaz21/directory)
Vega-Lite is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis.
This workshop will start with a brief introduction to terms in visualization. These terms will make it easier to understand Vega-Lite as well as other visualization libraries.
Then, we will go through a code-along where the presenter shows her code live and the audience follows along.
Finally, there will be do-it-yourself exercises where the audience will code first and then the presenter will verify.
You are also are free to explore on your own with either the materials or your own data. We're happy to help!
## Getting Started
**Step 0**: Please download the [Code-Along files](http://hdc.cs.arizona.edu/~kisaacs/projects/gvss/hackathons/index.html).
You may also download the slides from that site.
**Step 1**: File check. Unzip the downloaded file. Inside are:
- `template.html` -- we will start here
- `resbaz_data.js` -- the data is in this file, linked from `template.html`
- A PDF self-paced guide with all the exercises
- A PDF summary sheet of Vega-Lite keywords
- `solutions.html` -- a file with all the exercise solutions
- A set of `twitch*` files -- more data for accelerated participants to play with.
**Step 2**: Workflow check.
1. Open `template.html` in a web browser. In most operating systems you can do this by double-clicking the file or right-click open-width. You should see a mostly blank page with the sentence `This is my chart title.`
2. Open `template.html` in a _text editor_ of your choice. You should see code that starts with `<!DOCTYPE html>`. You will edit this file and then re-load your browser to see updates.
---
## Introductions
Name, Affiliation, Title, Email, Social Media
- Your Name, University of Arizona, Your title, youremail@email.arizona.edu, your social media
- Kate Isaacs, University of Arizona, Assistant Professor, kisaacs@cs.arizona.edu, @8clique
- Alex Bigelow, Stardog, Software Engineer, alex.bigelow@stardog.com, @accidental_PhD
- Devin Bayly, University of Arizona, Data & Visualization consultant, baylyd@email.arizona.edu, DevinBayly@github
- Ash Xu, American University, Student, ax9843a@student.american.edu, Anyixu@github
## If you've gotten lost, here's the last solution:
Paste this in place of the `var mySpec = { ... };` in template.html:
```javascript=
var mySpec = {
width: "300",
height: "300",
data: {
values: ufos
},
title: "UFO Sightings in AZ",
mark: { type: 'bar', tooltip: { content: 'data' } },
encoding: {
x: {
field: '*',
type: 'quantitative',
aggregate: 'count'
},
y: {
field: 'Date',
timeUnit: 'month',
type: 'temporal'
}
}
};
```
(all the solutions are in solutions.html)
## Questions and Answers
In this section, you can post your questions and feel free to answer if you have it. Questions will be answered during or after the workshop.
You may also use Zoom direct messaging to Kate Isaacs (presenter) or Alex Bigelow (roving assistant extraodrinaire) for specific help.
1. Ask your question.
- Here is an answer
---
:::info
**Session Feedback :mega:**
Use the link below to provide your feedback on the session:
[**Session Feedback Form**](https://forms.gle/TrnJpr9qRBEKdnVVA)
:::
Google Drive
Gist
Clipboard
Sign in with Wallet
