-

# Web + Mobile System Design
#### DIGF 6039 - Digital Futures, OCAD University

Session 7, starting at **3:10PM**

---

## Today's agenda

- Reminder: Assignment #2
- Visualization, Briefly on Past and Present
- Images on the Web
- SVG and Chart.js

---

## Assignment #2

### API-driven Experiment (35%)

#### Overview

Build a **single page experiment** that creatively appropriates two or more of the following:

- jQuery plugin (ex. Isotope Layout, Featherlight, etc.)
- Data-oriented web service (ex. Flickr, RSS, etc.)
- Feature-oriented web service (ex. Twilio, Google Maps, etc.)
- Visualization solutions (ex. D3, Chart.js, etc.)

#### Technical Considerations

- Must be accompanied by a brief statement (less than 300 words)
- Must combine **two external resources** to a creative effect

Due on **June 10 at 3:10PM**; Work period on **June 6**

---

### Visualization is not new

---

### Visualization is not new

---

### Visualization is not new

---

### Visualization is not new

---

### Visualization, interactive

---

### Visualization, interactive

---

### Visualization, large-scale

---

### Visualization, commercialized

---

### Visualization, personalized

---

### Visualization, journalistic

---

### Visualization, politicized

---

### Data-driven Thinkers

- Nate Silver of **FiveThirtyEight**
- Edward Tufte of **The Visual Display of Quantitative Information**
- Franco Moretti and **Distant Reading**
- Billy Beane and **Moneyball** (?)

---

### Edward Tufte

---

### Distant Reading

---

### Moneyball

---

### Personal Projects

---

### Personal Projects

---

### Personal Projects

---

## Images on the Web

- **Raster images**: JPG, GIF, and PNG
- **Vector graphics** not introduced until 1999

---

## JPG

- **“Lossy”** compression — but human eyes can’t really tell
- **Smooth variation** of colours
- Suited for photographs and paintings of realistic scenes
- **Not suited** for sharp graphics
- (JPG automatically blurs neighbouring colours together)

---

### JPG

---

## GIF

- **“Lossless”** compression — no colours are blended together!
- **Accommodates up to 256 colours** in a single file
- **Not suited** for detailed photorealistic images
- Limited animations — suited for memes and simple graphics

---

### GIF

---

## PNG

- Created as a **replacement** for GIF
- **Loseless** compression — no colour information is lost or modified
- Results in **bigger file sizes**
- **Alpha channel** — responsible for transparency / translucency
- Suited for graphics that require **precision and transparency**

---

### PNG

---

## Vector on the Web

- Any elements that are inserted using code
- Text objects, rectangular shape objects, etc.
- **No pixelation** upon zooming in
- Very light on the server as well as the browser

---

### Vector on the Web

---

## Vector on the Web

- “What if I want to display **complex vector shapes?**”
- “Can I display my AI files in my website?”

---

## Scalable Vector Graphics

- Released in 1999
- Designed to allow websites to display **complex vector shapes**
- Text document describing each geometric primitive
- Browser interprets and renders each shape

---

### SVG

---

### SVG

---

## Scalable Vector Graphics

- Interactive visualizations (D3.js)
- Icons (FontAwesome) and regular vector graphics

---

### D3.js
#### (It can be an overkill)

---

## Today's Exercise

- Sketching by coding: vanilla SVG
- Chart.JS, getting started