This Viz

Thesis Presentation

Transcript

1. THIS VIZ making infographics interactive
2. What does This Viz stand for? This Viz looks to present interactive infographics that not only tell a story, but engages the user This Visual… Information
3. 1. What is This Viz? 2. Why? 4. What’s the site made from? 6. SVG fun! 3. Aims & Audience 5. Schedule 7. Testing 8. The site!
4. Why? Most infographics on the web are static… and pixelated!
5. More and more SVG support! caniuse.com
6. Aims 1. show ideas, issues, and data in an interactive and visual way 2. have users engage with content 3. show what web tech has to offer to the world of infographics!
7. Audience *Google Analytics Age: 25-35-ish Pinterest & Social Media Addicts interested in global issues Loves visual content!
8. What makes up This Viz? PHP includes SVGs PNG fallbacks articles (text) HTML5 CSS CSS Animations
9. Proposed Schedule…
10. Reality
11. Proposed Schedule…
12. Reality
13. SVG what?! Scalable Vector Graphics
14. Keeping SVG… Inline the… DOM
15. SVG what?! You can target it with CSS! Add some id’s! change up colours! Add image files!
16. We need a fallback for that! PNG
17. Placing those fallbacks… *thanks Sara Soueidan :)
18. Let’s test this thing! It works! *browserstack live testing with IE 8
19. Testing YAY! Hmm CSS Anim ations YAY! YAY! YAY! YAY! YAY! YAY-ISH! YAY! YAY! SVG
20. Let’s check it out! thisviz.com