Visual Design with Data

Seth Familian
Seth FamilianBig Data Automation + Marketing Strategist em Familian&1
Seth Familian
Founder + Principal, Familian&1
VISUAL DESIGN
WITH DATA
START HERE!
familian1.com/vdwd
SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1
A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PRESENCE
TEACHING + EDUCATION PROCRAFTINATION
AGENDA 3
BUILDING BEAUTIFUL DATA TABLES
CREATING EFFECTIVE CHARTS
USING SPARKLINES
+ SMALL MULTIPLES
DATA STORYTELLING
TOOLS + TECHNIQUESINSIGHT-

SCREENSHOT
2X2 MATRICES
SCROLLYTELLING
VISUAL DESIGN WITH DATA
WHAT’S GOOD
(DATA) DESIGN?
4
WHAT’S GOOD (DATA) DESIGN?
CONSISTENT.
5
NINJA TIP:
Shift-select multiple
columns/rows and
drag-resize to make
them all the same
size with a single
gesture!
WHAT’S GOOD (DATA) DESIGN?
LET’S GIVE IT A TRY!
6
visit familian1.com/vdwd
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR GOOD (DATA) DESIGN
Emulate good data design. 10 mins 1. Visit familian1.com/vdwd
2. Click on “Visit the Exercises Spreadsheet”
3. Go to “1 - Consistent”
4. Normalize fonts, borders, and column widths
5. Go to “2 - Uncluttered”
6. Make it uncluttered!
A cleaner spreadsheet! Google Spreadsheets
7
WHAT’S GOOD (DATA) DESIGN?
UNCLUTTERED.
8
NINJA TIP:
Adding a “spacer”
row and column at
the top and left of the
page makes the
sheet feel more like
a document.
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.
9
NINJA TIP:
Using 1-2 gradations
on a single color
enables endless
formatting
possibilities.
WHAT’S GOOD (DATA) DESIGN?
ROLLED-UP.
10
NINJA TIP:
Pivot tables are
super useful for
rolling up data in
powerful, flexible
ways
VISUAL DESIGN WITH DATA
CREATING 

EFFECTIVE CHARTS
11
CREATING EFFECTIVE CHARTS 12
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS 13
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS 14
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS 15
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS
CHART TYPES
16
https://developers.google.com/chart/interactive/docs/gallery
CREATING EFFECTIVE CHARTS 17
ANOTHER APPROACH
FROM
CREATING EFFECTIVE CHARTS 18
CHART ANATOMY
FROM
CREATING EFFECTIVE CHARTS
FIELD ELEMENTS
19
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES
20
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES
21
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS 22
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
CREATING EFFECTIVE CHARTS 23
LESS IS MORE
FROM
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…
24
CREATING EFFECTIVE CHARTS
APPLYING DESIGN
PRINCIPLES
25
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!
26
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR CREATING EFFECTIVE CHARTS
Create an effective chart 15 mins 1. Visit your copy of the exercises spreadsheet
2. Go to “5 - Effective Charts”
3. Make a monthly line chart on all the data
4. Clean up the formatting + add comparisons
5. Experiment with switching chart types
A cleaner spreadsheet! Google Spreadsheets
27
CREATING EFFECTIVE CHARTS
ALTERNATIVE 

TIME-SERIES
28
CREATING EFFECTIVE CHARTS
STACKED BARS
29
CREATING EFFECTIVE CHARTS
COMBO CHARTS
30
WITH CHARTED.CO
CREATING EFFECTIVE CHARTS 31
PLOTTING ACTUALS V. PROJECTIONS
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!
32
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR CREATING EFFECTIVE CHARTS
Create an effective chart 15 mins 1. Visit your copy of the exercises spreadsheet
2. Go to “6 - Projections”
3. Project the next 6 months
4. Project the following 12 months
5. Format each of the two new lines
A cleaner spreadsheet! Google Spreadsheets
33
VISUAL DESIGN WITH DATA
BREAK TIME!
34
‣ Stretch your legs
‣ Hydrate or grab a snack
‣ We’ll start again in 10 mins!
VISUAL DESIGN WITH DATA
SPARKLINES 

+ SMALL MULTIPLES
35
SPARKLINES + SMALL MULTIPLES
SPARKLINES
36
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en
SPARKLINES + SMALL MULTIPLES
AREN’T
THEY
PERTY?
37
SPARKLINES + SMALL MULTIPLES
CUSTOM
SPARK-

LINES
38
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
SPARKLINES + SMALL MULTIPLES
Emulate good data design. 20 mins 1. Visit your copy of the exercises spreadsheet
2. Go to “6 - Sparklines”
3. Add a sparkline for each column
4. Make the sparkline a spark-column
In-line sparklines! Google Spreadsheets
39
SPARKLINES + SMALL MULTIPLES
WHAT’S POSSIBLE
40
VISUAL DESIGN WITH DATA
DATA VIZ TECHNIQUES
41
DATA VIZ TECHNIQUES
NARRATIVE!
42SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
NARRATIVE!
43SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
NARRATIVE!
44
VIA MIXPANEL SCREENSHOTS
DATA VIZ TECHNIQUES
THE POWER OF NARRATIVE
45
HTTP://FALLEN.IO
DATA VIZ TECHNIQUES
SCROLLYTELLING!
46
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES
SCROLLYTELLING!
47
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES
SCROLLYTELLING!
48
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES
SMALL MULTIPLES
49
HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
DATA VIZ TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES
50SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
2X2S
51
DATA VIZ TECHNIQUES
2X2S
52
D8R8R.COM
VISUAL DESIGN WITH DATA
DATA VIZ TOOLS
53
DATA VIZ TOOLS
CHARTED
54
CHARTED.CO
FOR SUPER SIMPLE CHARTS
DATA VIZ TOOLS
TAGUL
55
TAGUL.COM
FOR GORGEOUS WORD CLOUDS
DATA VIZ TOOLS
QUID
56
QUID.COM
FOR UNSTRUCTURED ANALYSIS
DATA VIZ TOOLS
MAPBOX
57
MAPBOX.COM
FOR GEOGRAPHIC DATA
DATA VIZ TOOLS
MIXPANEL
58
MIXPANEL.COM
FOR USER-EVENT DATA
DATA VIZ TOOLS
GECKOBOARD
59
GECKOBOARD.COM
DATA VIZ TOOLS
KLIPFOLIO
60
KLIPFOLIO.COM
VISUAL DESIGN WITH DATA
FINAL THOUGHTS
61
FINAL THOUGHTS
DATA OBESITY!
62
FINAL THOUGHTS
A NEW TYPE OF
KNOWLEDGE
WORKER
63
http://www.doclens.com/87922/think-issue-7-2014/
FINAL THOUGHTS
AN INCREDIBLY VALUABLE SKILL
64
https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
FINAL THOUGHTS
DATA AS INTERFACE
65
FINAL THOUGHTS 66
DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
FINAL THOUGHTS
DATA AS INTERFACE
67
for
using
FINAL THOUGHTS
START HERE
68
D3JS.ORG
FINAL THOUGHTS
OR HERE
69
C3JS.ORG
FINAL THOUGHTS
OR HERE
70
INFOACTIVE.CO/DATA-DESIGN
HBR.ORG
FINAL THOUGHTS
OR HERE
71
DATA VIZ TOOLS + TECHNIQUES
OR HERE
72
FAMILIAN1.COM
BUT MOST IMPORTANTLY…
HAVE FUN!
73
SURVEY TIME!
VISUAL DESIGN WITH DATA 74
BECAUSE FEEDBACK IS KEY :)
HEAD BACK TO
familian1.com/vdwd
AND SCROLL TO THE BOTTOM
A BIT ABOUT ME 75MY GENERAL ASSEMBLY WORKSHOPS
THANK YOU!
KEEP IN TOUCH.
76
SETH@FAMILIAN1.COM · @SETHFAM1
1 de 76

Mais conteúdo relacionado

Mais procurados(20)

The Science of Memorable PresentationsThe Science of Memorable Presentations
The Science of Memorable Presentations
Ethos3347.7K visualizações
Design Your Career 2018Design Your Career 2018
Design Your Career 2018
Slides That Rock4.8M visualizações
Five Killer Ways to Design The Same SlideFive Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same Slide
Crispy Presentations3.8M visualizações
The Designer's Guide to Startup WeekendThe Designer's Guide to Startup Weekend
The Designer's Guide to Startup Weekend
Iryna Nezhynska406.5K visualizações
The power of creative collaborationThe power of creative collaboration
The power of creative collaboration
Table19359.3K visualizações
The Future of EverythingThe Future of Everything
The Future of Everything
Charbel Zeaiter877K visualizações
Australian Digital Marketing Landscape 2016Australian Digital Marketing Landscape 2016
Australian Digital Marketing Landscape 2016
Marketa64.7K visualizações
Top Productivity Working Hacks by Jan RezabTop Productivity Working Hacks by Jan Rezab
Top Productivity Working Hacks by Jan Rezab
Jan Rezab933.8K visualizações
Open Source CreativityOpen Source Creativity
Open Source Creativity
Sara Cannon172.8K visualizações
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
Natasha Murashev389K visualizações
25 Need-to-Know Marketing Stats25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats
contently412.6K visualizações
Designing PresentationsDesigning Presentations
Designing Presentations
The Media Kitchen83.1K visualizações

Destaque

The Sketchnote Mini-WorkshopThe Sketchnote Mini-Workshop
The Sketchnote Mini-WorkshopMike Rohde
1.5M visualizações31 slides
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design InspirationBannersnack
1.3M visualizações25 slides
How a Strong Brand Boosts B2B DemandHow a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B DemandGYK Antler
1.6M visualizações34 slides
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitudeWith Company
1.4M visualizações39 slides

Destaque(19)

The Sketchnote Mini-WorkshopThe Sketchnote Mini-Workshop
The Sketchnote Mini-Workshop
Mike Rohde1.5M visualizações
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design Inspiration
Bannersnack1.3M visualizações
How a Strong Brand Boosts B2B DemandHow a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B Demand
GYK Antler1.6M visualizações
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
Aaron Irizarry1.1M visualizações
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitude
With Company1.4M visualizações
500 Demo Day Batch 19: Gluwa500 Demo Day Batch 19: Gluwa
500 Demo Day Batch 19: Gluwa
500 Startups814.5K visualizações
How NOT to Run Your Company – Lessons LearnedHow NOT to Run Your Company – Lessons Learned
How NOT to Run Your Company – Lessons Learned
Weekdone.com775.8K visualizações
38 Employee Engagement Ideas Your Team Will Love38 Employee Engagement Ideas Your Team Will Love
38 Employee Engagement Ideas Your Team Will Love
Elodie A.1.2M visualizações
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
In a Rocket977K visualizações
How to Land that First CustomerHow to Land that First Customer
How to Land that First Customer
Floown814.7K visualizações
10 Best Practices of a Best Company to Work For10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work For
O.C. Tanner1.2M visualizações
Towards GreatnessTowards Greatness
Towards Greatness
Abhishek Shah793.8K visualizações
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
a16z1.7M visualizações
The ABC’s of Living a Healthy LifeThe ABC’s of Living a Healthy Life
The ABC’s of Living a Healthy Life
Dr. Omer Hameed1.2M visualizações

Similar a Visual Design with Data

Let's Work TogetherLet's Work Together
Let's Work TogetherAquent
1.1K visualizações168 slides

Similar a Visual Design with Data(20)

Skye Sant - lead ux/product case studiesSkye Sant - lead ux/product case studies
Skye Sant - lead ux/product case studies
Skye Sant193 visualizações
State of Drupal keynote, DrupalCon New OrleansState of Drupal keynote, DrupalCon New Orleans
State of Drupal keynote, DrupalCon New Orleans
Dries Buytaert15.7K visualizações
Skye Sant - NEW PLATFORM case study (Sr UX)Skye Sant - NEW PLATFORM case study (Sr UX)
Skye Sant - NEW PLATFORM case study (Sr UX)
Skye Sant271 visualizações
Let's Work TogetherLet's Work Together
Let's Work Together
Aquent1.1K visualizações
Programming for Non-programmers PFNP @ Razorfish Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Chris Castiglione1.4K visualizações
Develop like a designerDevelop like a designer
Develop like a designer
J+E Creative278 visualizações
Make data simple in the cognitive eraMake data simple in the cognitive era
Make data simple in the cognitive era
IBM Analytics937 visualizações
Awesomizing your Squarespace WebsiteAwesomizing your Squarespace Website
Awesomizing your Squarespace Website
Seth Familian2.2K visualizações
Pluk2011 deploy-mysql-like-a-devops-sysadminPluk2011 deploy-mysql-like-a-devops-sysadmin
Pluk2011 deploy-mysql-like-a-devops-sysadmin
Frederic Descamps345 visualizações
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014
Chris Castiglione27.5K visualizações
Squarespace bootcampSquarespace bootcamp
Squarespace bootcamp
Seth Familian2.8K visualizações
Webinar manage MySQL like a devops sysadminWebinar manage MySQL like a devops sysadmin
Webinar manage MySQL like a devops sysadmin
Frederic Descamps484 visualizações
Back to Basics: Dashboards 101Back to Basics: Dashboards 101
Back to Basics: Dashboards 101
TIBCO Jaspersoft247 visualizações
Where is Scheduling Headed?Where is Scheduling Headed?
Where is Scheduling Headed?
Basis442 visualizações

Mais de Seth Familian

Funnel Analytics: An OverviewFunnel Analytics: An Overview
Funnel Analytics: An OverviewSeth Familian
2.1K visualizações35 slides
Digital tools for BusinessDigital tools for Business
Digital tools for BusinessSeth Familian
5.2K visualizações70 slides
Automating Big Data  (Dec-2016)Automating Big Data  (Dec-2016)
Automating Big Data (Dec-2016)Seth Familian
2.4K visualizações11 slides
Fam1 Big Data + VisualizationFam1 Big Data + Visualization
Fam1 Big Data + VisualizationSeth Familian
1.6K visualizações57 slides
Working With Big Data - Nov 2016Working With Big Data - Nov 2016
Working With Big Data - Nov 2016Seth Familian
2.3K visualizações64 slides
The 3-Hour WebsiteThe 3-Hour Website
The 3-Hour WebsiteSeth Familian
2K visualizações33 slides

Mais de Seth Familian(12)

Funnel Analytics: An OverviewFunnel Analytics: An Overview
Funnel Analytics: An Overview
Seth Familian2.1K visualizações
Digital tools for BusinessDigital tools for Business
Digital tools for Business
Seth Familian5.2K visualizações
Automating Big Data  (Dec-2016)Automating Big Data  (Dec-2016)
Automating Big Data (Dec-2016)
Seth Familian2.4K visualizações
Fam1 Big Data + VisualizationFam1 Big Data + Visualization
Fam1 Big Data + Visualization
Seth Familian1.6K visualizações
Working With Big Data - Nov 2016Working With Big Data - Nov 2016
Working With Big Data - Nov 2016
Seth Familian2.3K visualizações
The 3-Hour WebsiteThe 3-Hour Website
The 3-Hour Website
Seth Familian2K visualizações
Working With Big DataWorking With Big Data
Working With Big Data
Seth Familian291.8K visualizações
Digital Marketing Trends, Analytics + TacticsDigital Marketing Trends, Analytics + Tactics
Digital Marketing Trends, Analytics + Tactics
Seth Familian548 visualizações
Digital marketing — an overviewDigital marketing — an overview
Digital marketing — an overview
Seth Familian7.4K visualizações
Marketing Strategy, Tools & TacticsMarketing Strategy, Tools & Tactics
Marketing Strategy, Tools & Tactics
Seth Familian5.1K visualizações
Persuasive Visualization: Data + Design = EngagementPersuasive Visualization: Data + Design = Engagement
Persuasive Visualization: Data + Design = Engagement
Seth Familian4.8K visualizações
Persuading with PowerpointPersuading with Powerpoint
Persuading with Powerpoint
Seth Familian5.9K visualizações

Último(20)

ColonyOSColonyOS
ColonyOS
JohanKristiansson69 visualizações
Building Real-Time Travel AlertsBuilding Real-Time Travel Alerts
Building Real-Time Travel Alerts
Timothy Spann88 visualizações
3196 The Case of The East River3196 The Case of The East River
3196 The Case of The East River
ErickANDRADE909 visualizações
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdfVikas 500 BIG DATA TECHNOLOGIES LAB.pdf
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdf
vikas126116186 visualizações
Cross-network in Google Analytics 4.pdfCross-network in Google Analytics 4.pdf
Cross-network in Google Analytics 4.pdf
GA4 Tutorials5 visualizações
JConWorld_ Continuous SQL with Kafka and FlinkJConWorld_ Continuous SQL with Kafka and Flink
JConWorld_ Continuous SQL with Kafka and Flink
Timothy Spann76 visualizações
Microsoft Fabric.pptxMicrosoft Fabric.pptx
Microsoft Fabric.pptx
Shruti Chaurasia17 visualizações
Survey on Factuality in LLM's.pptxSurvey on Factuality in LLM's.pptx
Survey on Factuality in LLM's.pptx
NeethaSherra15 visualizações
PTicketInput.pdfPTicketInput.pdf
PTicketInput.pdf
stuartmcphersonflipm286 visualizações
GA4 - Google Analytics 4 - Session Metrics.pdfGA4 - Google Analytics 4 - Session Metrics.pdf
GA4 - Google Analytics 4 - Session Metrics.pdf
GA4 Tutorials19 visualizações
 The Business Tycoons (Jan-2023) - The Unparalleled Digital Leaders The Business Tycoons (Jan-2023) - The Unparalleled Digital Leaders
The Business Tycoons (Jan-2023) - The Unparalleled Digital Leaders
Global India Business Forum14 visualizações
RuleBookForTheFairDataEconomy.pptxRuleBookForTheFairDataEconomy.pptx
RuleBookForTheFairDataEconomy.pptx
noraelstela164 visualizações
Introduction to Microsoft Fabric.pdfIntroduction to Microsoft Fabric.pdf
Introduction to Microsoft Fabric.pdf
ishaniuudeshika19 visualizações
MOSORE_BRESCIAMOSORE_BRESCIA
MOSORE_BRESCIA
Federico Karagulian5 visualizações
Short Story Assignment by Kelly NguyenShort Story Assignment by Kelly Nguyen
Short Story Assignment by Kelly Nguyen
kellynguyen016 visualizações
Organic Shopping in Google Analytics 4.pdfOrganic Shopping in Google Analytics 4.pdf
Organic Shopping in Google Analytics 4.pdf
GA4 Tutorials6 visualizações
UNEP FI CRS Climate Risk Results.pptxUNEP FI CRS Climate Risk Results.pptx
UNEP FI CRS Climate Risk Results.pptx
pekka2810 visualizações

Visual Design with Data