Upgrade to Pro — share decks privately, control downloads, hide ads and more …

This Viz

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Carys Jenkins Carys Jenkins
October 06, 2015
0
120

This Viz

Thesis Presentation

Avatar for Carys Jenkins

Carys Jenkins

October 06, 2015
Tweet

More Decks by Carys Jenkins

See All by Carys Jenkins
thesis-prototype.pdf
Avatar for Carys Jenkins carysjenkins
0
180
Thesis Presentation: Delight
Avatar for Carys Jenkins carysjenkins
0
64
Thesis Presentation: Firmness
Avatar for Carys Jenkins carysjenkins
0
33
Thesis Presentation: Cultural Context
Avatar for Carys Jenkins carysjenkins
0
82
Thesis Presentation: Commodity
Avatar for Carys Jenkins carysjenkins
0
72
'How Our Websites Are Used' - Analytics
Avatar for Carys Jenkins carysjenkins
0
110

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.7k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
76
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.9k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
48
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
650

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