Download to read offline
Visualizing your data in JavaScript
- 1. Visualizing your data inJavaScript Mandi Cai BOSCC30 2018 16 November 2018
- 2. What are wetalking about? 1. The power of data visualization 2. The chart 3. The libraries 4. Recap
- 3. What are wetalking about? 1. The power of data visualization
- 4. A better wayto learn & engage Sources: The Upshot (NYT), Rhythm of Food (Google News Lab/Truth & Beauty), WaitButWhy
- 6. ID Unemployment Rate (%) 10015.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 10058.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 wetalking about? 1. The power of data visualization 2. The chart
- 9. Yay! You alreadyhave clean data!
- 10. What chart iscompatible with my data? Source: Venngage ChangeCompare OrganizeInform Relationship
- 11. What chart iscompatible 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 iscompatible with my data? Source: Venngage What are my independent variables and dependent variables? ChangeCompare OrganizeInform Relationship
- 13. What chart iscompatible with my data? ChangeCompare OrganizeInform Relationship Source: Venngage What are my independent variables and dependent variables? How many groups are being compared?
- 14.
- 15.
- 16. Source: The Pudding Annotateimportant points
- 17. What are wetalking 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’lldissect a Dygraphs example.
- 20. 1. Define acontainer for your chart.
- 21. 2. Load yourcharting library.
- 22. 3. Define orload your data.
- 23. 4. Script yourchart.
- 25. Libraries - What’s thelearning 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.jsDygraphsGoogle Charts SmallSmall SmallSteep
- 28. Lines of codefor a basic line chart? 10-158 10-15100-130 D3.js Chart.jsDygraphs Google Charts
- 29. Active development? ActiveSporadic SporadicActive D3.jsChart.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? MediumLowMediumHigh D3.js Chart.jsDygraphs Google Charts
- 32. Interactivity? LowLow LowHigh D3.js Chart.jsDygraphsGoogle Charts
- 33.
- 34. Best used for? Simplecharts 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? Simplecharts 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 GoogleCharts 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 wetalking 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 chartexamples at github.com/mandicai