class: left, middle, title # Web + Mobile System Design #### DIGF 6039 - Digital Futures, OCAD University Session 7, starting at **3:10PM** --- class: left, middle ## Today's agenda - Reminder: Assignment #2 - Visualization, Briefly on Past and Present - Images on the Web - SVG and Chart.js --- class: left, middle ## 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** --- class: center, middle ### Visualization is not new
--- class: center, middle ### Visualization is not new
--- class: center, middle ### Visualization is not new
--- class: center, middle ### Visualization is not new
--- class: center, middle ### Visualization, interactive
--- class: center, middle ### Visualization, interactive
--- class: center, middle ### Visualization, large-scale
--- class: center, middle ### Visualization, commercialized
--- class: center, middle ### Visualization, personalized
--- class: center, middle ### Visualization, journalistic
--- class: center, middle ### Visualization, politicized
--- class: left, middle ### 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** (?) --- class: center, middle ### Edward Tufte
--- class: center, middle ### Distant Reading
--- class: center, middle ### Moneyball
--- class: center, middle ### Personal Projects
--- class: center, middle ### Personal Projects
--- class: center, middle ### Personal Projects
--- class: left, middle ## Images on the Web - **Raster images**: JPG, GIF, and PNG - **Vector graphics** not introduced until 1999 --- class: left, middle ## 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) --- class: center, middle ### JPG
--- class: left, middle ## 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 --- class: center, middle ### GIF
--- class: left, middle ## 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** --- class: center, middle ### PNG
--- class: left, middle ## 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 --- class: center, middle ### Vector on the Web
--- class: left, middle ## Vector on the Web - “What if I want to display **complex vector shapes?**” - “Can I display my AI files in my website?” --- class: left, middle ## 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 --- class: center, middle ### SVG
--- class: center, middle ### SVG
--- class: left, middle ## Scalable Vector Graphics - Interactive visualizations (D3.js) - Icons (FontAwesome) and regular vector graphics --- class: center, middle ### D3.js #### (It can be an overkill)
--- class: left, middle ## Today's Exercise - Sketching by coding: vanilla SVG - Chart.JS, getting started