indicthreads-pune12-grammar of graphicsa new approach to visualization-karan

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


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


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









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"}},


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"}},


"color": [ {"field": {"$ref": "pop1960"}} ],

"style": {"stroke": {"width": 0.25}} },

{

"type": "point",

"position": [

{"field": {"$ref": "pop1980"}},


"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)