Successfully reported this slideshow.
Upcoming SlideShare
×

# Taxonomy of charts

4,988 views

Published on

Input Data Resuability in PykCharts.js

Published in: Data & Analytics
• Full Name
Comment goes here.

Are you sure you want to Yes No
• 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: ﬁrstpost.com What is wrong here?
12. 12. One-dimensional Charts … What is wrong here? Problems: • Colour • Too many values. Too cluttered. Source: ﬁrstpost.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: ﬁrstpost.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 ﬁt 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 ﬁt 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 ﬁnd 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 ﬁnd 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 ﬁt 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.