Input Data Resuability in PykCharts.js

1. Taxonomy of Charts
The data and visuals behind data visualisations.

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. 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. 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. One-dimensional Charts
PIE is a one-dimensional chart

6. One-dimensional Charts …
A pie could have been a random shape broken by percentage

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. One-dimensional Charts …
Source: thehindu.com
What is wrong here?

9. One-dimensional Charts …
What is wrong here?
Problems:
• Colour communicates no data
• 3D communicates no data
Source: thehindu.com

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. One-dimensional Charts …
Source: firstpost.com
What is wrong here?

12. One-dimensional Charts …
What is wrong here?
Problems:
• Colour
• Too many values. Too
cluttered.
Source: firstpost.com

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. One-dimensional Charts …
Solution to problem of restricted space? Create a custom chart.

15. New Data Set
One dimensional:
Seat count by party
Grouped One dimensional:
Seat count by party grouped by alliance

16. Grouped One-dimensional Charts
Party Alliance Percentage
A NDA 38%
B NDA 25%
C NDA 20%
D UPA 15%
E Others 2%

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. 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. 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. Two-dimensional Charts
Plot two data points
Party Constituency
A Z
B Y
C X
D V
E W
20Visual encoding: Position, Length

21. Two-dimensional Charts…
Connect the dots and you get a line chart.

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. 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. Weighted Two-dimensional Charts
This is a 2d chart.

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. 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. 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. Grouped Weighted Two-dimensional Charts
Grouped Weighted Scatter Grouped Circle Comparison
28Visual encoding: Position, Length, Area, Colour

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. Multi-series Two-dimensional Charts …
What is right and wrong here?
Source: livemint.com
Is the equities rally percolating into the broader market?

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. 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. Multi-series Two-dimensional Charts …
What is wrong here?
Source: livemint.com
Does IMF wear rose-tinted glasses?

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. 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. 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. Tree Charts
{
"name": "root",
"children": [
{
"name": "A",
"children": [
{"name": "A1"},
{"name": "A2"},
{"name": "A3"},
{"name": "A4"}
]
37Visual encoding: Position

38. Tree Charts
Dendrogram Circular Dendrogram

39. Grouped Weighted Tree Charts
Packed Circle
Sunburst Tree Rectangle
Tree Bar
Grouped Weighted Tree
39Visual encoding: Position, Size, Colour

40. Grouped Weighted Tree Charts
Sunburst
40Visual encoding: Position, Size, Colour

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. Grouped Multi-level Relationship Charts
Graph
Collapsible Graph
Hive
#9 - Look for relationships across data sets.

43. Weighted Grouped Multi-level Relationship Charts
Sankey
43Visual encoding: Position, Color, Size

44. Case: Mumbai Local Fare Chart
A fare exists for travel between station "A" and “B”. Hence, it is a relationship
chart.

45. Case: Mumbai Local Fare Chart
Matrix
Half Matrix
[
{"node1": "A", "node2": "B", "weight": 300},
{"node1": "A", "node2": "C", "weight": 900},
…
]

46. Case: Mumbai Local Fare Chart
46
#9 - Look for limitations. They can help you improve design.

47. Weighted Two-level Relationship Charts …
Chord
Number of people travel between various stations

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. 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.