1. The document discusses the power of data visualization and different charting libraries for JavaScript including D3.js, Chart.js, Dygraphs, and Google Charts. 2. It provides information on each library's learning curve, lines of code needed for basic charts, level of customization, interactivity, and best uses. 3. The recap emphasizes defining the chart purpose, choosing a chart type based on data, designing the chart, selecting a library, and iterating the process to effectively communicate with data visualization.

1. Visualizing your data
in JavaScript
Mandi Cai
BOSCC30 2018
16 November 2018

2. What are we talking about?
1. The power of data visualization
2. The chart
3. The libraries
4. Recap

3. What are we talking about?
1. The power of data visualization

4. A better way to learn & engage
Sources: The Upshot (NYT), Rhythm of Food (Google News Lab/Truth & Beauty), WaitButWhy

6. ID Unemployment
Rate (%)
1001 5.1
1003 4.9
1005 8.6
1007 6.2
1009 5.1
1011 7.1
1013 6.7
1015 6.1
1017 5
1019 5
1021 5.2
1023 7.9
1025 11.1
1027 5.9
1029 5.5
1031 5.6
1033 6.5
ID Unemployment
Rate (%)
1133 7
2013 1.9
2016 2.2
2020 5
2050 14.1
2060 5.6
2068 3.2
2070 8.1
2090 4.9
2100 5.9
2105 7.3
2110 3.6
2122 6.9
2130 4.4
2150 4.8
2158 21.7
2164 9.2
ID Unemployment
Rate (%)
5043 5.7
5045 3.7
5047 3.9
5049 3.9
5051 4
5053 3.2
5055 4
5057 3.7
5059 3.6
5061 3.4
5063 5
5065 5.3
5067 5.9
5069 5.9
5071 4.8
5073 6.2
5075 4.5
ID Unemployment
Rate (%)
5119 3.5
5121 4.6
5123 5
5125 3
5127 3.7
5129 4.3
5131 3.5
5133 4.8
5135 5.2
5137 4.8
5139 5.6
5141 6.4
5143 2.6
5145 4.8
5147 5.3
5149 4.4
6001 4.6

7. State
ID
Unemployment
Rate(%)
1001 5.1
1003 4.9
1005 8.6
1007 6.2
1009 5.1
1011 7.1
1013 6.7
1015 6.1
1017 5
1019 5
1021 5.2
1023 7.9
1025 11.1
1027 5.9
1029 5.5
1031 5.6
1033 6.5
State
ID
Unemployment
Rate(%)
1133 7
2013 1.9
2016 2.2
2020 5
2050 14.1
2060 5.6
2068 3.2
2070 8.1
2090 4.9
2100 5.9
2105 7.3
2110 3.6
2122 6.9
2130 4.4
2150 4.8
2158 21.7
2164 9.2
State
ID
Unemployment
Rate(%)
5043 5.7
5045 3.7
5047 3.9
5049 3.9
5051 4
5053 3.2
5055 4
5057 3.7
5059 3.6
5061 3.4
5063 5
5065 5.3
5067 5.9
5069 5.9
5071 4.8
5073 6.2
5075 4.5
State
ID
Unemployment
Rate(%)
5119 3.5
5121 4.6
5123 5
5125 3
5127 3.7
5129 4.3
5131 3.5
5133 4.8
5135 5.2
5137 4.8
5139 5.6
5141 6.4
5143 2.6
5145 4.8
5147 5.3
5149 4.4
6001 4.6
Source: Observable

8. What are we talking about?
1. The power of data visualization
2. The chart

9. Yay! You already have clean data!

10. What chart is compatible with my data?
Source: Venngage
ChangeCompare OrganizeInform Relationship

11. What chart is compatible with my data?
Movie Genre Production Budget (millions) Box Office (millions) ROI Rating IMDB
Avatar Action 237 2784 11.7 8
The Blind Side Drama 29 309 10.7 7.6
The Chronicles of Narnia: The Lion, the Witch and the Wardrobe Adventure 180 745 4.1 6.9
The Dark Knight Action 185 1005 5.4 9
ET: The Extra-Terrestrial Drama 11 793 75.5 7.9
Finding Nemo Adventure 94 940 10 8.1
Ghostbusters Comedy 144 229 1.6 7.8
The Hunger Games Thriller/Suspense 78 649 8.3 7.2
Iron Man 3 Action 178 1215 6.8 7.6
Jurassic Park Action 53 1030 19.4 8
King Kong Adventure 207 551 2.7 7.3
The Lion King Adventure 45 968 21.5 8.4
Monsters, Inc. Adventure 115 577 5 8

12. What chart is compatible with my data?
Source: Venngage
What are my independent variables and dependent variables?
ChangeCompare OrganizeInform Relationship

13. What chart is compatible with my data?
ChangeCompare OrganizeInform Relationship
Source: Venngage
What are my independent variables and dependent variables?
How many groups are being compared?

14. Designing the chart

15. Indicate directionality
Source: The Pudding

16. Source: The Pudding
Annotate important points

17. What are we talking about?
1. The power of data visualization
2. The chart
3. The libraries

18. Libraries
- D3.js
- Chart.js
- Dygraphs
- Google Charts

19. Anatomy
of a chart
We’ll dissect a
Dygraphs example.

20. 1. Define a container for your chart.

21. 2. Load your charting library.

22. 3. Define or load your data.

23. 4. Script your chart.

25. Libraries
- What’s the learning curve? (quality of documentation, code complexity)
- Is the library being actively supported?
- What types of data does this library take?
- How much can I customize my charts?
- What modes of interactivity are offered?
For large datasets: is it performant?

26. Learning curve?
D3.js Chart.jsDygraphs Google Charts
SmallSmall SmallSteep

28. Lines of code for a basic line chart?
10-158 10-15100-130
D3.js Chart.jsDygraphs Google Charts

29. Active development?
ActiveSporadic SporadicActive
D3.js Chart.jsDygraphs Google Charts

30. Types of data?
JSON, JavaScript
array
CSV, JavaScript
array, Google
DataTable
Google DataTable
CSV, JSON,
DSV, binary
file, image,
text, etc.
D3.js Chart.jsDygraphs Google Charts

31. Level of customization?
MediumLow MediumHigh
D3.js Chart.jsDygraphs Google Charts

32. Interactivity?
LowLow LowHigh
D3.js Chart.jsDygraphs Google Charts

33. Interactivity is important

34. Best used for?
Simple charts with
smooth initial
transitions
Time series from
CSVs
Creating a large
variety of charts
Any chart beyond a
simple chart, creating
custom interactivity
D3.js Chart.jsDygraphs Google Charts

35. Best used for?
Simple charts with
smooth initial
transitions
Time series from
CSVs
Creating a large
variety of charts
Any chart beyond a
simple chart, creating
custom interactivity
D3.js Chart.jsDygraphs Google Charts

36. D3.js Chart.jsDygraphs Google Charts
Best used for?
Simple charts with
smooth initial
transitions
Time series from
CSVs
Creating a large
variety of charts
Any chart beyond a
simple chart, creating
custom interactivity
The bottom line: invest time in D3 if you hit a wall with the other libraries.
Dygraphs, Chart.js, Google Charts are quick and useful for more simple charts.

37. What are we talking about?
1. The power of data visualization
2. The chart
3. The libraries
4. Recap

38. 3 … 2 … 1 … Recap!
❏ Data visualization is powerful.
❏ Define the purpose of your chart. Think about the # of groups compared,
independent, and dependent variables.
❏ Pick a chart.
❏ Design the chart.
❏ Choose a library based on your needs.
❏ Script the chart.
❏ Communicate and iterate!

40. Thanks!
Twitter
E-mail
Website
@MandiCai
mandicai@gmail.com
www.mandilicai.com
Code for chart examples at github.com/mandicai