Presentation for RefreshDC providing an overview of data visualization strategies and a variety of open source tools to accomplish your goals. The event was made possible by AARP and LivingSocial.
3. What I Do
Solutions Architect at Phase2 working on
•
• Requirements ElicitationUser Exp and Info Arch Customer Training
•
• Drupal Consulting • Content Migration Planning Stuff (QA)
• Break
#dcdataviz
8. The Challenge
Massive amounts of data becoming available, how do we
make sense of it all?
Semantic Web Open Better Methods
Government (i.e. APIs)
and Other
#dcdataviz
9. Data vs Display
“What” variables were measured vs “how” you
visually represent them
#dcdataviz
10. Types of Data
Quantitative and qualitative
#dcdataviz Data vs Display
11. Quantitative Data
Precise, standardized numerical
measurements
#dcdataviz Data vs Display
12. Quantitative Data
Precise, standardized numerical
measurements
3.75 mph 98° 17’ 15” N, 45° 9.85 mi
average 10’ 6” W
#dcdataviz Data vs Display
14. Qualitative Data
Categorical data with varying degrees of
precision
40% of Arlington
60% of 87% of DC
residents are
Arlington residents
satisfied with their
residents vote
living situation
#dcdataviz Data vs Display
15. Using Qualitative
Data
Establish a quantifiable spectrum for
collection and presentation
#dcdataviz Data vs Display
16. Using Qualitative
Data
Establish a quantifiable spectrum for
collection andhow satisfied are
On a 1 - 10 scale,
presentation
you with living in Arlington?
(1 = not satisfied, 5 = somewhat satisfied,
10 = extremely satisfied)
#dcdataviz Data vs Display
18. Display
“How” dimensions are visually represented (other than
text)
Width Position Color* Icons
Length Radius Opacity Shapes
#dcdataviz Data vs Display
24. “
The most
important consideration when
designing for efficiency is that
every bit of visual content will
make it take longer to find any
particular element in thefrom “Beautiful
- Noah Iliinsky, excerpted
visualization.
Visualization: How To Make it Efficient”
http://is.gd/Qc1BWF
#dcdataviz Visual Noise
29. “
You’re showing
me a lot, but what are you trying
to say?Your Brain, excerpted from “Why Should I
-
Care About What I’m Looking At?”
#dcdataviz Visual Noise
91. Tools
jqPlot - A plotting and charting plugin for the
jQuery Javascript framework
Highlighted Candlestick Chart Code Sample:
Features:
• Tool tip support
• Drag and drop of
data points in UI
• Computed trend
lines
Learn More:
#dcdataviz Open Source Charting
98. Tools Used
flot - jQuery-based Javascript library
Highlighted Learn More:
Features:
http://code.google.com/p/flot
• Drupal integration
via Flot module Development Seed Blog Post
http://is.gd/LvYXsM
• Interactive charts
with tooltip support
• Panning and
zooming capabilities
#dcdataviz Open Source Trending
103. Tools Used
Timeplot - DHTML/AJAX-based widget for
plotting time series and overlay time-based
Highlighted Code Sample:
Features:
• Timelines
• Graphing
• Layering of event
timelines with data
trending
Learn More:
#dcdataviz Open Source Timelines
111. Takeaways
• Know your audience and be realistic about
• Plan your presentation, THEN figure out what
tools you need to execute it.
#dcdataviz
112. Takeaways
• Know your audience and be realistic about
• Plan your presentation, THEN figure out what
tools you need to execute it.
• Attractive visuals are useless without clearly-
defined and executed goals
#dcdataviz
113. Takeaways
• Know your audience and be realistic about
• Plan your presentation, THEN figure out what
tools you need to execute it.
• Attractive visuals are useless without clearly-
defined and executed goals
• An abundance of highly-capable, open-source
tools is available for you to use and improve.
#dcdataviz
114. Thank You!
Thanks to all who attended, and to these
organizations who made this possible:
#dcdataviz
Editor's Notes
Welcome, and thanks for coming out this evening.\n\nI haven’t had the pleasure of meeting many of you, so I’d like to start off by introducing myself so that you have an idea of where I’m coming from.\n
My formal education was in biological engineering, but I’ve always had an interest in information technology. \n\nMy first job out of school was working at a DNA lab helping to build custom software used for automated sample tracking and profile extraction.\n\nMy current job primarily involves eliciting requirements, driving stakeholder consensus, exposing risks and dependencies, defining the nature of user interactions, laying the groundwork for information architecture, and generally laying the tracks out in front of our developers so that they can proceed unencumbered.\n
My formal education was in biological engineering, but I’ve always had an interest in information technology. \n\nMy first job out of school was working at a DNA lab helping to build custom software used for automated sample tracking and profile extraction.\n\nMy current job primarily involves eliciting requirements, driving stakeholder consensus, exposing risks and dependencies, defining the nature of user interactions, laying the groundwork for information architecture, and generally laying the tracks out in front of our developers so that they can proceed unencumbered.\n
My formal education was in biological engineering, but I’ve always had an interest in information technology. \n\nMy first job out of school was working at a DNA lab helping to build custom software used for automated sample tracking and profile extraction.\n\nMy current job primarily involves eliciting requirements, driving stakeholder consensus, exposing risks and dependencies, defining the nature of user interactions, laying the groundwork for information architecture, and generally laying the tracks out in front of our developers so that they can proceed unencumbered.\n
I’m not a developer, but I have a natural curiosity and want to know how things work on a conceptual level.\n\nI’m here to talk about things I’ve learned, trends I’m seeing, and experiences I’ve had.\n\nMy goal is to make sure that everyone here leaves with something tangible that they can use, or a perspective that helps them think about things a different way.\n
I’m not a developer, but I have a natural curiosity and want to know how things work on a conceptual level.\n\nI’m here to talk about things I’ve learned, trends I’m seeing, and experiences I’ve had.\n\nMy goal is to make sure that everyone here leaves with something tangible that they can use, or a perspective that helps them think about things a different way.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Degree of Satisfaction = Bar Color\nNumber of Respondents = Bar Width\n
Number of Drone Strikes ➔ Radius + Opacity\nPakistani Support for Drone Strikes ➔ Saturation\nPresident who Ordered Drone Strikes ➔ Color \n
\n
Don’t blame your data, blame your design.\n
Don’t blame your data, blame your design.\n
Don’t blame your data, blame your design.\n
Don’t blame your data, blame your design.\n
\n
\n
\n
\n
\n
\n
Here’s a resume that was done as an infographic. Pretty cool idea, right?\n\nApologies in advance to Michael, because I’m going to pick on him a bit.\n\nWhat are we trying to prove here? Maybe this is unintentionally revealing?\n
Here’s a resume that was done as an infographic. Pretty cool idea, right?\n\nApologies in advance to Michael, because I’m going to pick on him a bit.\n\nWhat are we trying to prove here? Maybe this is unintentionally revealing?\n
Here’s a resume that was done as an infographic. Pretty cool idea, right?\n\nApologies in advance to Michael, because I’m going to pick on him a bit.\n\nWhat are we trying to prove here? Maybe this is unintentionally revealing?\n
Here’s a resume that was done as an infographic. Pretty cool idea, right?\n\nApologies in advance to Michael, because I’m going to pick on him a bit.\n\nWhat are we trying to prove here? Maybe this is unintentionally revealing?\n
Here’s a resume that was done as an infographic. Pretty cool idea, right?\n\nApologies in advance to Michael, because I’m going to pick on him a bit.\n\nWhat are we trying to prove here? Maybe this is unintentionally revealing?\n
Is this Noise?\n\nDepends on the context of the audience and how the content is delivered.\n\nIf you are already in a particular station, you probably see a “you are here” symbol on the map.\n\nYou are being exposed to this because you need to figure out where you are going, thus the risk of losing the reader’s attention is relatively low.\n\nZoom in on a region\n\nThis map emphasizes the different lines as well as the stations on each line. Also important are the zones crossed, which are shown subtly as alternating gray and white regions.\n\nAn interactive version would allow for reduction of clutter. Thinks like bicycle parking and car ports would only be toggled on by those who need that information.\n
Is this Noise?\n\nDepends on the context of the audience and how the content is delivered.\n\nIf you are already in a particular station, you probably see a “you are here” symbol on the map.\n\nYou are being exposed to this because you need to figure out where you are going, thus the risk of losing the reader’s attention is relatively low.\n\nZoom in on a region\n\nThis map emphasizes the different lines as well as the stations on each line. Also important are the zones crossed, which are shown subtly as alternating gray and white regions.\n\nAn interactive version would allow for reduction of clutter. Thinks like bicycle parking and car ports would only be toggled on by those who need that information.\n
Is this Noise?\n\nDepends on the context of the audience and how the content is delivered.\n\nIf you are already in a particular station, you probably see a “you are here” symbol on the map.\n\nYou are being exposed to this because you need to figure out where you are going, thus the risk of losing the reader’s attention is relatively low.\n\nZoom in on a region\n\nThis map emphasizes the different lines as well as the stations on each line. Also important are the zones crossed, which are shown subtly as alternating gray and white regions.\n\nAn interactive version would allow for reduction of clutter. Thinks like bicycle parking and car ports would only be toggled on by those who need that information.\n
Is this Noise?\n\nDepends on the context of the audience and how the content is delivered.\n\nIf you are already in a particular station, you probably see a “you are here” symbol on the map.\n\nYou are being exposed to this because you need to figure out where you are going, thus the risk of losing the reader’s attention is relatively low.\n\nZoom in on a region\n\nThis map emphasizes the different lines as well as the stations on each line. Also important are the zones crossed, which are shown subtly as alternating gray and white regions.\n\nAn interactive version would allow for reduction of clutter. Thinks like bicycle parking and car ports would only be toggled on by those who need that information.\n
Is this Noise?\n\nDepends on the context of the audience and how the content is delivered.\n\nIf you are already in a particular station, you probably see a “you are here” symbol on the map.\n\nYou are being exposed to this because you need to figure out where you are going, thus the risk of losing the reader’s attention is relatively low.\n\nZoom in on a region\n\nThis map emphasizes the different lines as well as the stations on each line. Also important are the zones crossed, which are shown subtly as alternating gray and white regions.\n\nAn interactive version would allow for reduction of clutter. Thinks like bicycle parking and car ports would only be toggled on by those who need that information.\n
\n
\n
\n
\n
\n
\n
\n
\n
Daily Media Diet - Wired Magazine\nhttp://is.gd/IrRoHZ\n
Daily Media Diet - Wired Magazine\nhttp://is.gd/IrRoHZ\n
Daily Media Diet - Wired Magazine\nhttp://is.gd/IrRoHZ\n
Demonstrations can be interactive in a literal sense, in that you can touch/feel/use them.\n\nEuclidian solid geometry visualization shown in Tufte’s “Beautiful Evidence”\n
\n
Akamai Real-Time Global Network Traffic Monitorhttp://is.gd/1Oueyq\n\nAuthor doesn’t have a specific conclusion in mind beforehand (except maybe “there are a lot more attacks than you think there are) since this is real-time data. \n\nYou draw your own conclusions from it...for example “it looks like recent network attacks are most concentrated on the eastern seaboard.”\n
Akamai Real-Time Global Network Traffic Monitorhttp://is.gd/1Oueyq\n\nAuthor doesn’t have a specific conclusion in mind beforehand (except maybe “there are a lot more attacks than you think there are) since this is real-time data. \n\nYou draw your own conclusions from it...for example “it looks like recent network attacks are most concentrated on the eastern seaboard.”\n
Akamai Real-Time Global Network Traffic Monitorhttp://is.gd/1Oueyq\n\nAuthor doesn’t have a specific conclusion in mind beforehand (except maybe “there are a lot more attacks than you think there are) since this is real-time data. \n\nYou draw your own conclusions from it...for example “it looks like recent network attacks are most concentrated on the eastern seaboard.”\n
Akamai Real-Time Global Network Traffic Monitorhttp://is.gd/1Oueyq\n\nAuthor doesn’t have a specific conclusion in mind beforehand (except maybe “there are a lot more attacks than you think there are) since this is real-time data. \n\nYou draw your own conclusions from it...for example “it looks like recent network attacks are most concentrated on the eastern seaboard.”\n
Akamai Real-Time Global Network Traffic Monitorhttp://is.gd/1Oueyq\n\nAuthor doesn’t have a specific conclusion in mind beforehand (except maybe “there are a lot more attacks than you think there are) since this is real-time data. \n\nYou draw your own conclusions from it...for example “it looks like recent network attacks are most concentrated on the eastern seaboard.”\n
\n
\n
\n
How do you cater to the average attention span while still allowing those who are interested to really dive deep?\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Here are some screenshots from a chart editing UI that someone like myself might use to work with a client to design a chart to be implemented.\n
Here are some screenshots from a chart editing UI that someone like myself might use to work with a client to design a chart to be implemented.\n
Here are some screenshots from a chart editing UI that someone like myself might use to work with a client to design a chart to be implemented.\n
\n
\n
Pandemic Preparedness map for joint project of InterAction and USAID, showing public health programs in vulnerable areas.\n\nhttp://preparedness.interaction.org/\n\nMap created by Development Seed, an open source development company that focuses on building communication and visualization tools.\n\nWe work with Development Seed on several projects. I worked closely with them on the World Food Programme’s main site, wfp.org.\n\n\n\n\n
Pandemic Preparedness map for joint project of InterAction and USAID, showing public health programs in vulnerable areas.\n\nhttp://preparedness.interaction.org/\n\nMap created by Development Seed, an open source development company that focuses on building communication and visualization tools.\n\nWe work with Development Seed on several projects. I worked closely with them on the World Food Programme’s main site, wfp.org.\n\n\n\n\n
Pandemic Preparedness map for joint project of InterAction and USAID, showing public health programs in vulnerable areas.\n\nhttp://preparedness.interaction.org/\n\nMap created by Development Seed, an open source development company that focuses on building communication and visualization tools.\n\nWe work with Development Seed on several projects. I worked closely with them on the World Food Programme’s main site, wfp.org.\n\n\n\n\n
Pandemic Preparedness map for joint project of InterAction and USAID, showing public health programs in vulnerable areas.\n\nhttp://preparedness.interaction.org/\n\nMap created by Development Seed, an open source development company that focuses on building communication and visualization tools.\n\nWe work with Development Seed on several projects. I worked closely with them on the World Food Programme’s main site, wfp.org.\n\n\n\n\n
Pandemic Preparedness map for joint project of InterAction and USAID, showing public health programs in vulnerable areas.\n\nhttp://preparedness.interaction.org/\n\nMap created by Development Seed, an open source development company that focuses on building communication and visualization tools.\n\nWe work with Development Seed on several projects. I worked closely with them on the World Food Programme’s main site, wfp.org.\n\n\n\n\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
Aid Projects in Haiti\nhttp://preparedness.interaction.org/\n
MapBox provides a suite of open source tools and services for creating and using custom maps in the cloud.\n\n\nTileMill leverages OpenLayers, Carto, and Mapnik (C++ based mapping application toolkit)\n\nAt Phase2, I worked on a data visualization project with a high-profile federal agency that utilized MapBox and OpenLayers to display state-specific data related to job creation stemming from the Recovery Act legislation.\n\nWe automatically generated the locations of blog posts using natural language processing and semantic tagging provided by a freely-available service called Open Calais, provided by Thomson Reuters.\n\n
MapBox provides a suite of open source tools and services for creating and using custom maps in the cloud.\n\n\nTileMill leverages OpenLayers, Carto, and Mapnik (C++ based mapping application toolkit)\n\nAt Phase2, I worked on a data visualization project with a high-profile federal agency that utilized MapBox and OpenLayers to display state-specific data related to job creation stemming from the Recovery Act legislation.\n\nWe automatically generated the locations of blog posts using natural language processing and semantic tagging provided by a freely-available service called Open Calais, provided by Thomson Reuters.\n\n
MapBox provides a suite of open source tools and services for creating and using custom maps in the cloud.\n\n\nTileMill leverages OpenLayers, Carto, and Mapnik (C++ based mapping application toolkit)\n\nAt Phase2, I worked on a data visualization project with a high-profile federal agency that utilized MapBox and OpenLayers to display state-specific data related to job creation stemming from the Recovery Act legislation.\n\nWe automatically generated the locations of blog posts using natural language processing and semantic tagging provided by a freely-available service called Open Calais, provided by Thomson Reuters.\n\n
\n
Map from Japanearthquakerecovery.org, a project of the Business Civic Leadership Center.\n\nUses open data from USGS and tile designs built with TileMill, an open-source map tile design studio.\n
Map from Japanearthquakerecovery.org, a project of the Business Civic Leadership Center.\n\nUses open data from USGS and tile designs built with TileMill, an open-source map tile design studio.\n
Map from Japanearthquakerecovery.org, a project of the Business Civic Leadership Center.\n\nUses open data from USGS and tile designs built with TileMill, an open-source map tile design studio.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
This is a visualization tool that we’re considering using for an upcoming project for a client in the financial services industry.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
During World War 1, it became more difficult for people from Europe to emigrate.\n\nAfter World War 1, more restrictive legislation on immigration was put into place, which kept immigration levels lower moving forward.\n\nThey reached their lowest point during the Great Depression.\n
During World War 1, it became more difficult for people from Europe to emigrate.\n\nAfter World War 1, more restrictive legislation on immigration was put into place, which kept immigration levels lower moving forward.\n\nThey reached their lowest point during the Great Depression.\n
During World War 1, it became more difficult for people from Europe to emigrate.\n\nAfter World War 1, more restrictive legislation on immigration was put into place, which kept immigration levels lower moving forward.\n\nThey reached their lowest point during the Great Depression.\n
During World War 1, it became more difficult for people from Europe to emigrate.\n\nAfter World War 1, more restrictive legislation on immigration was put into place, which kept immigration levels lower moving forward.\n\nThey reached their lowest point during the Great Depression.\n
\n
\n
This is a guy who took a trip Zlatibor, a mountain in Serbia.\n\nhttp://www.brankovukelic.com/post/849444944/zlatibor-breathgiving-infographics\n\nInkscape - one of the leading open source SVG graphics editors\n
This is a guy who took a trip Zlatibor, a mountain in Serbia.\n\nhttp://www.brankovukelic.com/post/849444944/zlatibor-breathgiving-infographics\n\nInkscape - one of the leading open source SVG graphics editors\n