Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Taxonomy of Charts
The data and visuals behind data visualisations.
Let’s explore the humble pie chart…
Party Percentage
E 38%
D 25%
C 20%
B 15%
A 2%
Break the whole into parts.
Let’s explore the humble pie chart…
Party Percentage
E 38%
D 25%
C 20%
B 15%
A 2%
Break the whole into parts.
Data: One di...
New Terms
• Dimension: Columns by which you group data.
• Facts: Numbers that you can count, sum, average, etc.
• Examples...
One-dimensional Charts
PIE is a one-dimensional chart
One-dimensional Charts …
A pie could have been a random shape broken by percentage
One-dimensional Charts …
Pie
Amoeba
Percentage
Rectangle Donut
Percentage
Triangle
Bubble
Election Donut
Funnel
Percentage...
One-dimensional Charts …
Source: thehindu.com
What is wrong here?
One-dimensional Charts …
What is wrong here?
Problems:
• Colour communicates no data
• 3D communicates no data
Source: the...
One-dimensional Charts …
Source: thehindu.com
#2 - Your goal is to communicate data. Wrong use of visual encoding confuses...
One-dimensional Charts …
Source: firstpost.com
What is wrong here?
One-dimensional Charts …
What is wrong here?
Problems:
• Colour
• Too many values. Too
cluttered.
Source: firstpost.com
One-dimensional Charts …
Problems:
• Colour
• Too many values. Too
cluttered.
#3 - AREA encoding is useful for only few va...
One-dimensional Charts …
Solution to problem of restricted space? Create a custom chart.
New Data Set
One dimensional:
Seat count by party
Grouped One dimensional:
Seat count by party grouped by alliance
Grouped One-dimensional Charts
Party Alliance Percentage
A NDA 38%
B NDA 25%
C NDA 20%
D UPA 15%
E Others 2%
Grouped One-dimensional Charts
Group various bubbles by colours
Party Alliance Percentage
A NDA 38%
B NDA 25%
C NDA 20%
D ...
Grouped One-dimensional Charts
Group various bubbles by colours
Party Alliance Percentage
A NDA 38%
B NDA 25%
C NDA 20%
D ...
New Data Set
One dimensional:
Seat count by party
Grouped One dimensional:
Seat count by party grouped by alliance
Two dim...
Two-dimensional Charts
Plot two data points
Party Constituency
A Z
B Y
C X
D V
E W
20Visual encoding: Position, Length
Two-dimensional Charts…
Connect the dots and you get a line chart.
Two-dimensional Charts…
Scatter Line Area
Bar Column Spider
All these charts require the same data.#5 - Number of dimensio...
New Data Set
One dimensional:
Seat count by party
Grouped One dimensional:
Seat count by party grouped by alliance
Two dim...
Weighted Two-dimensional Charts
This is a 2d chart.
Weighted Two-dimensional Charts …
Let’s add weight to it, hence now we have three data points
X axis Y axis Weight
A Z 40
...
Weighted Two-dimensional Charts …
Weighted Scatter Circle Comparison
All these charts require the same data.#6 - You can a...
New Data Set
One dimensional:
Seat count by party
Grouped One dimensional:
Seat count by party grouped by alliance
Two dim...
Grouped Weighted Two-dimensional Charts
Grouped Weighted Scatter Grouped Circle Comparison
28Visual encoding: Position, Le...
Multi-series Two-dimensional Charts …
RangeGanttMulti-series Line
Group Column Stack Column Group Stack Column
Stack Area ...
Multi-series Two-dimensional Charts …
What is right and wrong here?
Source: livemint.com
Is the equities rally percolating...
Multi-series Two-dimensional Charts …
What is right and wrong here?
Source: livemint.com
Is the equities rally percolating...
Multi-series Two-dimensional Charts …
What is right and wrong here?
Good parts:
• Y axis from 97 instead of 0
Source: live...
Multi-series Two-dimensional Charts …
What is wrong here?
Source: livemint.com
Does IMF wear rose-tinted glasses?
Multi-series Two-dimensional Charts …
What is wrong here?
Source: livemint.com
Problems:
• Cannot find the IMF line.
Does I...
Multi-series Two-dimensional Charts …
What is wrong here?
Source: livemint.com
Does IMF wear rose-tinted glasses?
Problems...
New Data Set
All the data we encountered so far was RDBMS i.e. could fit in a SpreadSheet.
(rows and columns).
Sometimes da...
Tree Charts
{
"name": "root",
"children": [
{
"name": "A",
"children": [
{"name": "A1"},
{"name": "A2"},
{"name": "A3"},
{...
Tree Charts
Dendrogram Circular Dendrogram
Grouped Weighted Tree Charts
Packed Circle
Sunburst Tree Rectangle
Tree Bar
Grouped Weighted Tree
39Visual encoding: Posit...
Grouped Weighted Tree Charts
Sunburst
40Visual encoding: Position, Size, Colour
Grouped Multi-level Relationship Charts
{
“nodes”: [
{“name”: “A”, “group”: “G1”},
{“name”: “B”, “group”: “G2”},
…
],
"rel...
Grouped Multi-level Relationship Charts
Graph
Collapsible Graph
Hive
#9 - Look for relationships across data sets.
Weighted Grouped Multi-level Relationship Charts
Sankey
43Visual encoding: Position, Color, Size
Case: Mumbai Local Fare Chart
A fare exists for travel between station "A" and “B”. Hence, it is a relationship
chart.
Case: Mumbai Local Fare Chart
Matrix
Half Matrix
[
{"node1": "A", "node2": "B", "weight": 300},
{"node1": "A", "node2": "C...
Case: Mumbai Local Fare Chart
46
#9 - Look for limitations. They can help you improve design.
Weighted Two-level Relationship Charts …
Chord
Number of people travel between various stations
The same data can be visualised in many (MANY!)
ways. Without exploring the data, you will end up
visualising all your dat...
We are at @pykih
Fun fact: The word pykih came to us in a
CAPTCHA. That’s the day we decided that till we
do good work it ...
Upcoming SlideShare
Loading in …5
×

Taxonomy of charts

4,988 views

Published on

Input Data Resuability in PykCharts.js

Published in: Data & Analytics
  • Be the first to comment

Taxonomy of charts

  1. 1. Taxonomy of Charts The data and visuals behind data visualisations.
  2. 2. Let’s explore the humble pie chart… Party Percentage E 38% D 25% C 20% B 15% A 2% Break the whole into parts.
  3. 3. Let’s explore the humble pie chart… Party Percentage E 38% D 25% C 20% B 15% A 2% Break the whole into parts. Data: One dimensional Visual Encoding: Area
  4. 4. New Terms • Dimension: Columns by which you group data. • Facts: Numbers that you can count, sum, average, etc. • Examples: • Seat count by party • Seat count by party and state • Visual Encoding: Area, Position, Colour, Length, Thickness, etc.
  5. 5. One-dimensional Charts PIE is a one-dimensional chart
  6. 6. One-dimensional Charts … A pie could have been a random shape broken by percentage
  7. 7. One-dimensional Charts … Pie Amoeba Percentage Rectangle Donut Percentage Triangle Bubble Election Donut Funnel Percentage Bar Percentage Column #1 - The same data can be Visualized in many (MANY!) different ways.
  8. 8. One-dimensional Charts … Source: thehindu.com What is wrong here?
  9. 9. One-dimensional Charts … What is wrong here? Problems: • Colour communicates no data • 3D communicates no data Source: thehindu.com
  10. 10. One-dimensional Charts … Source: thehindu.com #2 - Your goal is to communicate data. Wrong use of visual encoding confuses. Problems: • Colour communicates no data • 3D communicates no data
  11. 11. One-dimensional Charts … Source: firstpost.com What is wrong here?
  12. 12. One-dimensional Charts … What is wrong here? Problems: • Colour • Too many values. Too cluttered. Source: firstpost.com
  13. 13. One-dimensional Charts … Problems: • Colour • Too many values. Too cluttered. #3 - AREA encoding is useful for only few values after which it is unreadable. Source: firstpost.com
  14. 14. One-dimensional Charts … Solution to problem of restricted space? Create a custom chart.
  15. 15. New Data Set One dimensional: Seat count by party Grouped One dimensional: Seat count by party grouped by alliance
  16. 16. Grouped One-dimensional Charts Party Alliance Percentage A NDA 38% B NDA 25% C NDA 20% D UPA 15% E Others 2%
  17. 17. Grouped One-dimensional Charts Group various bubbles by colours Party Alliance Percentage A NDA 38% B NDA 25% C NDA 20% D UPA 15% E Others 2%
  18. 18. Grouped One-dimensional Charts Group various bubbles by colours Party Alliance Percentage A NDA 38% B NDA 25% C NDA 20% D UPA 15% E Others 2% #4 - You can always fit in an extra dimension (GROUP) in charts using colour.
  19. 19. New Data Set One dimensional: Seat count by party Grouped One dimensional: Seat count by party grouped by alliance Two dimensional: Which party won in which year
  20. 20. Two-dimensional Charts Plot two data points Party Constituency A Z B Y C X D V E W 20Visual encoding: Position, Length
  21. 21. Two-dimensional Charts… Connect the dots and you get a line chart.
  22. 22. Two-dimensional Charts… Scatter Line Area Bar Column Spider All these charts require the same data.#5 - Number of dimensions in data determines which chart to use
  23. 23. New Data Set One dimensional: Seat count by party Grouped One dimensional: Seat count by party grouped by alliance Two dimensional: Which party won in which constituency Weighted Two dimensional: Which party won in which constituency by what vote margin
  24. 24. Weighted Two-dimensional Charts This is a 2d chart.
  25. 25. Weighted Two-dimensional Charts … Let’s add weight to it, hence now we have three data points X axis Y axis Weight A Z 40 B Y 20 C X 1 D V 300 E W 60 25Visual encoding: Position, Length, Area
  26. 26. Weighted Two-dimensional Charts … Weighted Scatter Circle Comparison All these charts require the same data.#6 - You can always fit in an extra fact (WEIGHT) in charts using size.
  27. 27. New Data Set One dimensional: Seat count by party Grouped One dimensional: Seat count by party grouped by alliance Two dimensional: Which party won in which constituency Weighted Two dimensional: Which party won in which constituency by what vote margin Grouped Weighted Two dimensional: Which party won in which constituency by what vote margin grouped by alliance
  28. 28. Grouped Weighted Two-dimensional Charts Grouped Weighted Scatter Grouped Circle Comparison 28Visual encoding: Position, Length, Area, Colour
  29. 29. Multi-series Two-dimensional Charts … RangeGanttMulti-series Line Group Column Stack Column Group Stack Column Stack Area Stack Percentage Area Add more dimensions in creative ways.
  30. 30. Multi-series Two-dimensional Charts … What is right and wrong here? Source: livemint.com Is the equities rally percolating into the broader market?
  31. 31. Multi-series Two-dimensional Charts … What is right and wrong here? Source: livemint.com Is the equities rally percolating into the broader market? Bad parts: • BSE Small-cap lines is not visible and that’s the story.
  32. 32. Multi-series Two-dimensional Charts … What is right and wrong here? Good parts: • Y axis from 97 instead of 0 Source: livemint.com Is the equities rally percolating into the broader market? Bad parts: • BSE Small-cap lines is not visible and that’s the story. #7 - Purpose of line chart is to show trend. Focus on it.
  33. 33. Multi-series Two-dimensional Charts … What is wrong here? Source: livemint.com Does IMF wear rose-tinted glasses?
  34. 34. Multi-series Two-dimensional Charts … What is wrong here? Source: livemint.com Problems: • Cannot find the IMF line. Does IMF wear rose-tinted glasses?
  35. 35. Multi-series Two-dimensional Charts … What is wrong here? Source: livemint.com Does IMF wear rose-tinted glasses? Problems: • Cannot find the IMF line. #8 - Highlight the story for the user. Use color to highlight, not confuse.
  36. 36. New Data Set All the data we encountered so far was RDBMS i.e. could fit in a SpreadSheet. (rows and columns). Sometimes data is more complex. It can have“relationships”. Types of relationships: • Hierarchy / Tree • Multi-level relationships
  37. 37. Tree Charts { "name": "root", "children": [ { "name": "A", "children": [ {"name": "A1"}, {"name": "A2"}, {"name": "A3"}, {"name": "A4"} ] 37Visual encoding: Position
  38. 38. Tree Charts Dendrogram Circular Dendrogram
  39. 39. Grouped Weighted Tree Charts Packed Circle Sunburst Tree Rectangle Tree Bar Grouped Weighted Tree 39Visual encoding: Position, Size, Colour
  40. 40. Grouped Weighted Tree Charts Sunburst 40Visual encoding: Position, Size, Colour
  41. 41. Grouped Multi-level Relationship Charts { “nodes”: [ {“name”: “A”, “group”: “G1”}, {“name”: “B”, “group”: “G2”}, … ], "relations": [ {"from": “A”, "to": “B”}, {"from": “A”, "to": “C”}, … ] 41Visual encoding: Position
  42. 42. Grouped Multi-level Relationship Charts Graph Collapsible Graph Hive #9 - Look for relationships across data sets.
  43. 43. Weighted Grouped Multi-level Relationship Charts Sankey 43Visual encoding: Position, Color, Size
  44. 44. Case: Mumbai Local Fare Chart A fare exists for travel between station "A" and “B”. Hence, it is a relationship chart.
  45. 45. Case: Mumbai Local Fare Chart Matrix Half Matrix [ {"node1": "A", "node2": "B", "weight": 300}, {"node1": "A", "node2": "C", "weight": 900}, … ]
  46. 46. Case: Mumbai Local Fare Chart 46 #9 - Look for limitations. They can help you improve design.
  47. 47. Weighted Two-level Relationship Charts … Chord Number of people travel between various stations
  48. 48. The same data can be visualised in many (MANY!) ways. Without exploring the data, you will end up visualising all your data in pies, lines and bars. Most Imp. Lesson
  49. 49. We are at @pykih Fun fact: The word pykih came to us in a CAPTCHA. That’s the day we decided that till we do good work it does not matter what we are called.

×