SlideShare a Scribd company logo
Thinking Through Visualization Tools
Sam Pottinger
UC Berkeley
Purpose
We are going to talk about different tools available for building visualizations and
why we might want to use them in different contexts.
We will also look at the same example dataset visualized using two different
approaches.
Background Tools Example
Data visualization tools in function
There are great functional frameworks out there
like in prior work from Krist Wongsuphasawat
which provides a great overview of function
(effort, outcome, and API design).
I’ll tie back into that framework but I want to
provide another vantage point.
High Effort
High Expression
Platform /
Language
Background Tools Example
Low Effort
Low Expression
Tools in function and affordance.
There’s some interesting philosophy around
tools and thought but an easy example are a
paint roller and a brush.
Though their function is the same (they
both paint), the experience of using them
and the type of action they both afford are
quite different.
The way that they ask you think about
painting is different. There’s a relationship
between tools and the way that they let us
think about a task.
In other words, there’s the action we take
through the tool and the action the tool
takes on us.
Background Tools Example
Data visualization tools in affordance
Visualization as language Visualization as representation Visualization as drawing
The first way of seeing data visualization tools is in how they function (what action we take through them). The other
approach is how they influence our thinking about a problem. We will look at tools in both perspectives.
Background Tools Example
A look at tools
Background Tools Example
Fast
Slow
Low High
We will discuss the functional aspect of these them. How
fast it typically is to run its course for common
visualizations in made with them but also how much
typical variation there is in work that they can produce.
We will also discuss how they impact our way of
thinking, including by looking at example work done in
the type of tool.
What is easy What is hard
How it influences
our thinking
Visualization as language
Background Tools Example
Typically a set of pre-built chart types. There’s
nouns: a menu to choose from that have options for
configuration but the tool itself defines a basic set of
strategies for how information is displayed and how
the user is expected to interact with the chart.
What is easy
Getting something on the page easily in a
standardized style.
What is hard
Customization of the structure in which data
are displayed, user interaction, and deeply
specific styling.
How it influences our thinking
Encourages us to think in specific formats (bar,
scatter, doughnut, pie, line) and anything
outside those formats becomes unreachable.
Fast
Slow
Low High
Chart.js
Visualization as language in the world
Background Tools Example
You might recognize… Here’s an example for us to consider:
https://startupoptionsbot.com
Using Chart.js
LibreOffice Chart Wizard
Visualization as representation
Background Tools Example
“Mapping” different attributes of data like year to
horizontal position or cost to vertical size. Tools are
often provided for scales and animation. The tool doesn’t
understand chart types like scatter and line but it is
possible to make visual structures that can be difficult to
achieve in visualization as language.
What is easy
Representing each data point (like a row in a
spreadsheet) visually on a page in sometimes
unique / novel visual structures.
What is hard
Morphing between different representations or
“movements” (Jonathan Harris), highly
customized interaction / animation or unusual
drawing strategies.
How it influences our thinking
Allows exploration of unique structures and
forces thought on how data map to “encoding
mechanisms” but makes it difficult to
re-contextualize the data.
Fast
Slow
Low High
Visualization as representation in the world
Background Tools Example
You might recognize… Here’s an example for us to consider:
Income Gaps
Using D3
Tableau
(thanks official docs)
Visualization as drawing
Background Tools Example
The data guide some drawing process but the method of
drawing is left up to the user. Even if there are tools for
reading data, the tool doesn’t understand what a scale is
or define how data are mapped to visual structures. It
does however offer tools for drawing complex shapes.
What is easy
Very detailed control over drawing, animation,
and interaction pattern. Allows for
“movements” or multiple representations and
elements not directly mapped from data.
What is hard
These tools often exist in code and it is difficult
for non-developers to access these methods.
How it influences our thinking
Forces the designer to consider every aspect of
the visualization in the problem’s context,
making every action very intentional.
Fast
Slow
Low High Inkscape Processing
Raphaël
Visualization as drawing in the world
Background Tools Example
You might recognize… Here’s an example for us to consider:
Podcast Anthropology
Using p5.js
Feltron Annual Reports
Processing
What should I use when?
Background Tools Example
Visualization as
language
Don’t need it in a
very specific format
and a simple well
established “chart
type” is sufficient.
Visualization as
representation
There’s time and
space to explore
alternative
representations but
there’s still a clear
mapping from data
to visual attribute.
Visualization as
drawing
Highly specific
animation, visual,
and interaction
design or complex /
changing strategy for
drawing data.
Focus more on what level of
depth do you want to provide to
the data? How important are
they?
In general, nothing is “faster”
except how quickly the process
ends and where it lets you go.
Tools can also be used outside
their typical affordance.
Example: Can I afford it?
Background Tools Example
We are going to look at the same dataset two ways: one using the visualization as language and the other using
visualization as representation. What are your experiences of the two?
Exploration in Matplotlib Exploration in D3
Example reflection
Background Tools Example
● How did your experience in the two tools
differ?
● How would you continue your exploration in
each?
● How do you feel about the dataset after
having gone through each?
What about React?
Background Tools Example
Visualization code often feels different than the other code on a front-end,
especially in the drawing and representation philosophies. There are efforts
however to make them more “regular” citizens in the broader codebase.

More Related Content

Similar to Thinking Through Visualization Tools

Unit ii design process
Unit ii design processUnit ii design process
Unit ii design process
tamizh arthanari
 
Storyboarding for Data Visualization Design
Storyboarding for Data Visualization DesignStoryboarding for Data Visualization Design
Storyboarding for Data Visualization Design
spatialhistory
 
State Mapping Redux
State Mapping ReduxState Mapping Redux
State Mapping Redux
Dante Murphy
 
Engage Your Audience With PowerPoint Decks: Webinar
Engage Your Audience With PowerPoint Decks: WebinarEngage Your Audience With PowerPoint Decks: Webinar
Engage Your Audience With PowerPoint Decks: Webinar
Gramener
 
Unit1 jaava
Unit1 jaavaUnit1 jaava
Unit1 jaava
mrecedu
 
How to make data-driven interactive PowerPoint presentations for operations
How to make data-driven interactive PowerPoint presentations for operationsHow to make data-driven interactive PowerPoint presentations for operations
How to make data-driven interactive PowerPoint presentations for operations
Gramener
 
Understanding and Conceptualizing interaction - Mary Margarat
Understanding and Conceptualizing interaction  - Mary MargaratUnderstanding and Conceptualizing interaction  - Mary Margarat
Understanding and Conceptualizing interaction - Mary Margarat
Mary Margarat
 
Ux for data exploration
Ux for data explorationUx for data exploration
Ux for data exploration
Vladislav Korobov
 
Scanned by CamScanner11. INTRODUCTIONPrototy.docx
Scanned by CamScanner11. INTRODUCTIONPrototy.docxScanned by CamScanner11. INTRODUCTIONPrototy.docx
Scanned by CamScanner11. INTRODUCTIONPrototy.docx
kenjordan97598
 
Intro to Graph Theory w Neo4J
Intro to Graph Theory w Neo4JIntro to Graph Theory w Neo4J
Intro to Graph Theory w Neo4J
Ray Lukas
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
Sarah Dutkiewicz
 
Calssification: validity y no valida pa
Calssification: validity y no valida  paCalssification: validity y no valida  pa
Calssification: validity y no valida pa
eydansanti1
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
John Yesko
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
teaguese
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
Sarah Dutkiewicz
 
Data Structure Graph DMZ #DMZone
Data Structure Graph DMZ #DMZoneData Structure Graph DMZ #DMZone
Data Structure Graph DMZ #DMZone
Doug Needham
 
An overview of my PhD research
An overview of my PhD researchAn overview of my PhD research
An overview of my PhD research
Felienne Hermans
 
Developing Dashboards with User-Centered Design
Developing Dashboards with User-Centered DesignDeveloping Dashboards with User-Centered Design
Developing Dashboards with User-Centered Design
Amanda Makulec
 
Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)
Markus Breuer
 
Data Viz for Data Discovery
Data Viz for Data DiscoveryData Viz for Data Discovery
Data Viz for Data Discovery
Megan Bowe
 

Similar to Thinking Through Visualization Tools (20)

Unit ii design process
Unit ii design processUnit ii design process
Unit ii design process
 
Storyboarding for Data Visualization Design
Storyboarding for Data Visualization DesignStoryboarding for Data Visualization Design
Storyboarding for Data Visualization Design
 
State Mapping Redux
State Mapping ReduxState Mapping Redux
State Mapping Redux
 
Engage Your Audience With PowerPoint Decks: Webinar
Engage Your Audience With PowerPoint Decks: WebinarEngage Your Audience With PowerPoint Decks: Webinar
Engage Your Audience With PowerPoint Decks: Webinar
 
Unit1 jaava
Unit1 jaavaUnit1 jaava
Unit1 jaava
 
How to make data-driven interactive PowerPoint presentations for operations
How to make data-driven interactive PowerPoint presentations for operationsHow to make data-driven interactive PowerPoint presentations for operations
How to make data-driven interactive PowerPoint presentations for operations
 
Understanding and Conceptualizing interaction - Mary Margarat
Understanding and Conceptualizing interaction  - Mary MargaratUnderstanding and Conceptualizing interaction  - Mary Margarat
Understanding and Conceptualizing interaction - Mary Margarat
 
Ux for data exploration
Ux for data explorationUx for data exploration
Ux for data exploration
 
Scanned by CamScanner11. INTRODUCTIONPrototy.docx
Scanned by CamScanner11. INTRODUCTIONPrototy.docxScanned by CamScanner11. INTRODUCTIONPrototy.docx
Scanned by CamScanner11. INTRODUCTIONPrototy.docx
 
Intro to Graph Theory w Neo4J
Intro to Graph Theory w Neo4JIntro to Graph Theory w Neo4J
Intro to Graph Theory w Neo4J
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
Calssification: validity y no valida pa
Calssification: validity y no valida  paCalssification: validity y no valida  pa
Calssification: validity y no valida pa
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Data Structure Graph DMZ #DMZone
Data Structure Graph DMZ #DMZoneData Structure Graph DMZ #DMZone
Data Structure Graph DMZ #DMZone
 
An overview of my PhD research
An overview of my PhD researchAn overview of my PhD research
An overview of my PhD research
 
Developing Dashboards with User-Centered Design
Developing Dashboards with User-Centered DesignDeveloping Dashboards with User-Centered Design
Developing Dashboards with User-Centered Design
 
Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)
 
Data Viz for Data Discovery
Data Viz for Data DiscoveryData Viz for Data Discovery
Data Viz for Data Discovery
 

More from Sam Pottinger

Building Unusual Paths
Building Unusual PathsBuilding Unusual Paths
Building Unusual Paths
Sam Pottinger
 
Re-Empower the Public with Data Visualization and Game Design
Re-Empower the Public with Data Visualization and Game DesignRe-Empower the Public with Data Visualization and Game Design
Re-Empower the Public with Data Visualization and Game Design
Sam Pottinger
 
Three examples of building for play in data science.
Three examples of building for play in data science.Three examples of building for play in data science.
Three examples of building for play in data science.
Sam Pottinger
 
Co-Design in Data Science
Co-Design in Data ScienceCo-Design in Data Science
Co-Design in Data Science
Sam Pottinger
 
Visualizing for Systems
Visualizing for SystemsVisualizing for Systems
Visualizing for Systems
Sam Pottinger
 
User Centered Machine Learning
User Centered Machine LearningUser Centered Machine Learning
User Centered Machine Learning
Sam Pottinger
 

More from Sam Pottinger (6)

Building Unusual Paths
Building Unusual PathsBuilding Unusual Paths
Building Unusual Paths
 
Re-Empower the Public with Data Visualization and Game Design
Re-Empower the Public with Data Visualization and Game DesignRe-Empower the Public with Data Visualization and Game Design
Re-Empower the Public with Data Visualization and Game Design
 
Three examples of building for play in data science.
Three examples of building for play in data science.Three examples of building for play in data science.
Three examples of building for play in data science.
 
Co-Design in Data Science
Co-Design in Data ScienceCo-Design in Data Science
Co-Design in Data Science
 
Visualizing for Systems
Visualizing for SystemsVisualizing for Systems
Visualizing for Systems
 
User Centered Machine Learning
User Centered Machine LearningUser Centered Machine Learning
User Centered Machine Learning
 

Recently uploaded

Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Fashions
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
Hemant Nagwekar
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
bookkdreambebe
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
sexytaniya455
 
How to Buy Verified Payoneer Account in 5 Easy Steps
How to Buy Verified Payoneer Account in 5 Easy StepsHow to Buy Verified Payoneer Account in 5 Easy Steps
How to Buy Verified Payoneer Account in 5 Easy Steps
maudadkalbmundhir
 
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
sheetal singh$A17
 
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
monikaservice00
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
vsingram
 
Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...
Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...
Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...
tanupasswan6
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
hicham benkhelifa
 
AI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdfAI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdf
Pixeldarts
 
Building Accessibility into your Design Systems
Building Accessibility into your Design SystemsBuilding Accessibility into your Design Systems
Building Accessibility into your Design Systems
Resolute
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
sonalibook860
 
AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
Shayestha Fathima
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
monikaservice00
 
Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...
Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...
Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...
miss ekta$A17
 
Ghhhhhgggfffgggghhjjhytrrffffggggggggggggg
GhhhhhgggfffgggghhjjhytrrffffgggggggggggggGhhhhhgggfffgggghhjjhytrrffffggggggggggggg
Ghhhhhgggfffgggghhjjhytrrffffggggggggggggg
LaraibIrshad8
 

Recently uploaded (20)

Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
How to Buy Verified Payoneer Account in 5 Easy Steps
How to Buy Verified Payoneer Account in 5 Easy StepsHow to Buy Verified Payoneer Account in 5 Easy Steps
How to Buy Verified Payoneer Account in 5 Easy Steps
 
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
 
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
 
Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...
Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...
Female Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service An...
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
 
AI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdfAI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdf
 
Building Accessibility into your Design Systems
Building Accessibility into your Design SystemsBuilding Accessibility into your Design Systems
Building Accessibility into your Design Systems
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
 
Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...
Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...
Premium Girls Call Delhi 🎈🔥9711199171 🔥💋🎈 Provide Best And Top Girl Service A...
 
Ghhhhhgggfffgggghhjjhytrrffffggggggggggggg
GhhhhhgggfffgggghhjjhytrrffffgggggggggggggGhhhhhgggfffgggghhjjhytrrffffggggggggggggg
Ghhhhhgggfffgggghhjjhytrrffffggggggggggggg
 

Thinking Through Visualization Tools

  • 1. Thinking Through Visualization Tools Sam Pottinger UC Berkeley
  • 2. Purpose We are going to talk about different tools available for building visualizations and why we might want to use them in different contexts. We will also look at the same example dataset visualized using two different approaches. Background Tools Example
  • 3. Data visualization tools in function There are great functional frameworks out there like in prior work from Krist Wongsuphasawat which provides a great overview of function (effort, outcome, and API design). I’ll tie back into that framework but I want to provide another vantage point. High Effort High Expression Platform / Language Background Tools Example Low Effort Low Expression
  • 4. Tools in function and affordance. There’s some interesting philosophy around tools and thought but an easy example are a paint roller and a brush. Though their function is the same (they both paint), the experience of using them and the type of action they both afford are quite different. The way that they ask you think about painting is different. There’s a relationship between tools and the way that they let us think about a task. In other words, there’s the action we take through the tool and the action the tool takes on us. Background Tools Example
  • 5. Data visualization tools in affordance Visualization as language Visualization as representation Visualization as drawing The first way of seeing data visualization tools is in how they function (what action we take through them). The other approach is how they influence our thinking about a problem. We will look at tools in both perspectives. Background Tools Example
  • 6. A look at tools Background Tools Example Fast Slow Low High We will discuss the functional aspect of these them. How fast it typically is to run its course for common visualizations in made with them but also how much typical variation there is in work that they can produce. We will also discuss how they impact our way of thinking, including by looking at example work done in the type of tool. What is easy What is hard How it influences our thinking
  • 7. Visualization as language Background Tools Example Typically a set of pre-built chart types. There’s nouns: a menu to choose from that have options for configuration but the tool itself defines a basic set of strategies for how information is displayed and how the user is expected to interact with the chart. What is easy Getting something on the page easily in a standardized style. What is hard Customization of the structure in which data are displayed, user interaction, and deeply specific styling. How it influences our thinking Encourages us to think in specific formats (bar, scatter, doughnut, pie, line) and anything outside those formats becomes unreachable. Fast Slow Low High Chart.js
  • 8. Visualization as language in the world Background Tools Example You might recognize… Here’s an example for us to consider: https://startupoptionsbot.com Using Chart.js LibreOffice Chart Wizard
  • 9. Visualization as representation Background Tools Example “Mapping” different attributes of data like year to horizontal position or cost to vertical size. Tools are often provided for scales and animation. The tool doesn’t understand chart types like scatter and line but it is possible to make visual structures that can be difficult to achieve in visualization as language. What is easy Representing each data point (like a row in a spreadsheet) visually on a page in sometimes unique / novel visual structures. What is hard Morphing between different representations or “movements” (Jonathan Harris), highly customized interaction / animation or unusual drawing strategies. How it influences our thinking Allows exploration of unique structures and forces thought on how data map to “encoding mechanisms” but makes it difficult to re-contextualize the data. Fast Slow Low High
  • 10. Visualization as representation in the world Background Tools Example You might recognize… Here’s an example for us to consider: Income Gaps Using D3 Tableau (thanks official docs)
  • 11. Visualization as drawing Background Tools Example The data guide some drawing process but the method of drawing is left up to the user. Even if there are tools for reading data, the tool doesn’t understand what a scale is or define how data are mapped to visual structures. It does however offer tools for drawing complex shapes. What is easy Very detailed control over drawing, animation, and interaction pattern. Allows for “movements” or multiple representations and elements not directly mapped from data. What is hard These tools often exist in code and it is difficult for non-developers to access these methods. How it influences our thinking Forces the designer to consider every aspect of the visualization in the problem’s context, making every action very intentional. Fast Slow Low High Inkscape Processing Raphaël
  • 12. Visualization as drawing in the world Background Tools Example You might recognize… Here’s an example for us to consider: Podcast Anthropology Using p5.js Feltron Annual Reports Processing
  • 13. What should I use when? Background Tools Example Visualization as language Don’t need it in a very specific format and a simple well established “chart type” is sufficient. Visualization as representation There’s time and space to explore alternative representations but there’s still a clear mapping from data to visual attribute. Visualization as drawing Highly specific animation, visual, and interaction design or complex / changing strategy for drawing data. Focus more on what level of depth do you want to provide to the data? How important are they? In general, nothing is “faster” except how quickly the process ends and where it lets you go. Tools can also be used outside their typical affordance.
  • 14. Example: Can I afford it? Background Tools Example We are going to look at the same dataset two ways: one using the visualization as language and the other using visualization as representation. What are your experiences of the two? Exploration in Matplotlib Exploration in D3
  • 15. Example reflection Background Tools Example ● How did your experience in the two tools differ? ● How would you continue your exploration in each? ● How do you feel about the dataset after having gone through each?
  • 16. What about React? Background Tools Example Visualization code often feels different than the other code on a front-end, especially in the drawing and representation philosophies. There are efforts however to make them more “regular” citizens in the broader codebase.