Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
This Viz
Search
Carys Jenkins
October 06, 2015
0
78
This Viz
Thesis Presentation
Carys Jenkins
October 06, 2015
Tweet
Share
More Decks by Carys Jenkins
See All by Carys Jenkins
thesis-prototype.pdf
carysjenkins
0
150
Thesis Presentation: Delight
carysjenkins
0
55
Thesis Presentation: Firmness
carysjenkins
0
25
Thesis Presentation: Cultural Context
carysjenkins
0
64
Thesis Presentation: Commodity
carysjenkins
0
54
'How Our Websites Are Used' - Analytics
carysjenkins
0
90
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Rails Girls Zürich Keynote
gr2m
91
13k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Automating Front-end Workflow
addyosmani
1356
200k
KATA
mclloyd
15
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Designing for Performance
lara
601
67k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Transcript
THIS VIZ making infographics interactive
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
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!
Why? Most infographics on the web are static… and pixelated!
More and more SVG support! caniuse.com
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!
Audience *Google Analytics Age: 25-35-ish Pinterest & Social Media Addicts
interested in global issues Loves visual content!
What makes up This Viz? PHP includes SVGs PNG fallbacks
articles (text) HTML5 CSS CSS Animations
Proposed Schedule…
Reality
Proposed Schedule…
Reality
SVG what?! Scalable Vector Graphics
Keeping SVG… Inline the… DOM
SVG what?! You can target it with CSS! Add some
id’s! change up colours! Add image files!
We need a fallback for that! PNG
Placing those fallbacks… *thanks Sara Soueidan :)
Let’s test this thing! It works! *browserstack live testing with
IE 8
Testing YAY! Hmm CSS Anim ations YAY! YAY! YAY! YAY!
YAY! YAY-ISH! YAY! YAY! SVG
Let’s check it out! thisviz.com