indicthreads-pune12-grammar of graphicsa new approach to visualization-karan
TRANSCRIPT
Grammar of Graphics: A New Approach To VisualizationKaranbir Singh GujralIBM, India Software Labs
2
Why visualization?“Visualization & Data Discovery” market is the
fastest growing segment of Business Analytics. Our customers need a solution that provides:• High definition (HD) visualizations• In-market flexibility – new novel visualizations
without a new release• Portable (across the full mobile landscape)• Scalable• Extensible• Interactive
Data Rich & Information Poor (DRIP)
Dealing with DRIP: Visualization
Human visual system has evolved over time to spot patterns, outliers and trend
Gain insight, by visually assessing data first, perform deeper analysis afterward
Visualization is not just about reporting and “business graphics”
Visualization is the ‘face’ of analysis & knowledge
Visualization
Analytics “A great visualization is worth a million data points”
Visualization is a force multiplier, not a stand-alone technology
Anscombe's Quartet
Visualization by example
Month Y1998 Y20080 13880 173081 10484 205962 9847 161833 6952 103554 9393 62295 12870 109316 9330 105987 14726 98358 11893 99139 7815 3249
10 6419 445811 9900 17779
• DATA: Basic functionality by any system for analyzing data is to filter, slice and dice to create a view of the data you want
• TABLE: Presenting the data in the simplest form
• CHART: Standard recommendation: To compare two categories of counts, use a clustered bar chart
Visualization by example• Adapt the layout to the data:
Months are cyclical; use a polar axis. This allows the user to spot seasonal effects more easily
• Bars are not good for comparisons: Change to aligned points. This allows the years to be compared directly
• Engage the user: Use a custom symbol appropriate for the domain
Grammar of GraphicsGrammar not Types
Not a prescribed “Library of Charts”
A highly adaptive framework that allows each integrator to quickly create and customize their own library of interactive visualizations
Language is flexible enough to:
describe our known chart types
describe unknown chart types
Platform native visualizations
Common Visualization Framework
Visualization “Description”Visualization “Description”
Old Way: Charts are Types
Fixed Set of “supported charts”• If it isn’t in the list, you can’t have it
Expensive and slow to innovate• Each new chart is a new development effort
“Ad hoc” features tightly coupled to type• E.g. “Animation only implemented for Hans Rosling-
style bubble charts, not for all charts”Adding a new feature to 20 charts is a large effort
Kills creativity
New Way: Grammar of Graphics
A language-based specification of a chart
In terms of features, not “types”, e.g.• “bar chart” = basic 2D coordinates, categorical x numeric
displayed with intervals dropped from locations• “line chart” = basic 2D coordinates, any x numeric
displayed with lines connecting locations • “histogram” = basic 2D coordinates, numeric x statistic
binned counts, displayed with
Orthogonal set of features describes all common charts, virtually all uncommon charts, and most cutting-edge research charts
Art of the possible
Visual Analytics
Switching chart types
Workload Analytics
Live Social AnalyticsExtensible
Where is it available?Books
• Grammar of Graphics by Leland Wilkinson
Open Source• Javascript libraries: ProtoVis and D3
• Ggplot2 in ‘R’: Statistical computing
• Bokeh in Python
Commercial• IBM RAVE (Rapidly Adaptive Visualization Engine)
• Tableau software
GoG: Composable Set of Chart Features
Element Type•Point, line, area, interval (bar), polygon, schema, text•Each element can be used with any data (numeric, category, time …)•As many elements on a chart as you like
Element Type•Point, line, area, interval (bar), polygon, schema, text•Each element can be used with any data (numeric, category, time …)•As many elements on a chart as you like
Coordinates•Any number of dimensions can be defined, with a chain of transformations•Clustering and stacking•Polar•Transpose•Map projections
Coordinates•Any number of dimensions can be defined, with a chain of transformations•Clustering and stacking•Polar•Transpose•Map projections
Aesthetics•Map Data to Graphic Attributes.•Works on all elements•Color (exterior, interior, works with gradients)•Size (width/height/both)•Symbol•Dashing, General Styles•Label, Tooltip, Meta
Aesthetics•Map Data to Graphic Attributes.•Works on all elements•Color (exterior, interior, works with gradients)•Size (width/height/both)•Symbol•Dashing, General Styles•Label, Tooltip, Meta
Guides•Simple Axis•Nested Axis•Facet Axis•Legend
Guides•Simple Axis•Nested Axis•Facet Axis•Legend
Layouts•Graph Layouts (Network, Treelike)•Treemaps•Custom Layouts
Layouts•Graph Layouts (Network, Treelike)•Treemaps•Custom Layouts
Faceting•Chart-in-chart•Paneling
Faceting•Chart-in-chart•Paneling
This CFO Dashboard Visualization uses chart-in-chart faceting:•The outer chart uses a graph layout, with an integrator-designed schema element for the nodes and standard edge element links. The schema element has multiple parts and five different aesthetics set symbol type and color for each part. •The inner chart uses an interval element with 2D coordinates and two axes: a standard bar chart.
Faceting
•Chart-in-chart•Paneling
Faceting
•Chart-in-chart•Paneling
Layouts•Graph Layouts (Network, Treelike)•Treemaps•Custom Layouts
Layouts•Graph Layouts (Network, Treelike)•Treemaps•Custom Layouts
Aesthetics•Map Data to Graphic Attributes.•Works on all elements•Color (exterior, interior, works with gradients)•Size (width/height/both)•Symbol•Dashing, General Styles•Label, Tooltip, Meta
Aesthetics•Map Data to Graphic Attributes.•Works on all elements•Color (exterior, interior, works with gradients)•Size (width/height/both)•Symbol•Dashing, General Styles•Label, Tooltip, Meta
Coordinates•Any number of dimensions can be defined, with a chain of transformations•Clustering and stacking•Polar•Transpose•Map projections
Coordinates•Any number of dimensions can be defined, with a chain of transformations•Clustering and stacking•Polar•Transpose•Map projections
Guides•Simple Axis•Nested Axis•Facet Axis•Legend
Guides•Simple Axis•Nested Axis•Facet Axis•Legend
Element Type• Point, line, area, interval (bar), polygon, schema, text• Each element can be used with any data (numeric, category, time …)• As many elements on a chart as you like
Element Type• Point, line, area, interval (bar), polygon, schema, text• Each element can be used with any data (numeric, category, time …)• As many elements on a chart as you like
"grammar": [ {
"coordinates": {
"dimensions": [ {"axis": {}}, {"axis": {}} ],
"transforms": [ {"type": "transpose"} ]
},
"elements": [ {
"type": "interval",
"position": [
{"field": {"$ref": "pop2010"}},
{"field": {"$ref": "name"}} ], Position (how we place elements in the coordinate system) shows state names by current populationAesthetics (how to color it): Color uses the population data for 1960Layouts , Faceting - NonePop2010, pop1960, name are references to parts of the data
The Grammar of a Bar Chart
Coordinates: 2D chart flipped (transpose) - bars run horizontally
Guides: "axis“ for both x and y dimensions
Element Types (go inside the data area):
Uses a single interval (e.g. bar)
Style for a thin border (e.g. 0.25 width)
"color": [ {"field": {"$ref": "pop1960"}} ],
"style": {"stroke": {"width": 0.25}}
}
],
"style": {"fill": "#bbf", "padding": 5}
} This is the completegrammar VizJSON
Simple Changes: Power of Composition
Before:
{
"type": "interval",
"position": [
{"field": {"$ref": "pop2010"}},
{"field": {"$ref": "name"}} ],
After:
{
"type": "interval",
"position": [
{"field": {"$ref": "pop1960"}},
{"field": {"$ref": "pop2010"}},
{"field": {"$ref": "name"}} ],
Add a position field to make it a range chart with start at
1960, end at 2010
Add a position field to make it a range chart with start at
1960, end at 2010
Before
After
Simple Changes: Power of Composition
{ "type": "interval",
"position": [
{"field": {"$ref": "pop1960"}},
{"field": {"$ref": "pop2010"}},
{"field": {"$ref": "name"}} ],
"color": [ {"field": {"$ref": "pop1960"}} ],
"style": {"stroke": {"width": 0.25}} },
{
"type": "point",
"position": [
{"field": {"$ref": "pop1980"}},
{"field": {"$ref": "name"}} ],
"style": {"fill": "navy", "size": 8} }
Add a point element for 1980 populations
Add a point element for 1980 populations
Maps are just another element { "coordinates": {
"dimensions": [ {}, {} ],
"transforms": [
{
"type": "projection",
"projectionParams":
{"name": "mercator"} } ] },
"elements": [ {
"type": "polygon",
"label": [
{"content": [ {"$ref": "abbr"} ]} ],
"color": [{"field": {"$ref": "pop2010"}}],
"style": {"stroke": {"width": 0.25}}
} ],
"style": {"fill": "#bbf", "padding": 5} }
Use a projection type of transform, specifically with a Mercator coordinate system.
Data set already has the geographic
Aesthetics, labels, style are all as usual.
Map layers correspond well to elements.
Demo: Showcase each feature
Element TypeElement Type
CoordinatesCoordinates
AestheticsAestheticsGuidesGuides
LayoutsLayouts
FacetingFaceting
Anything is possible
Rangoli built with a GoG toolkit - Nitin Chaturvedi
Thank You
Slide authors: Greg Adams (IBM)Graham Wills (IBM)Karan Gujral (IBM)