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.

Visualizing your data in JavaScript

87 views

Published on

Visualizing your results accurately can reveal hidden insights, catch errors, and inspire your audience to investigate further. During this workshop, we’ll cover types of data visualizations and when they’re most effective, different JavaScript charting libraries such as D3, Google Charts, and Dygraphs, and how to get started on a simple dashboard.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Visualizing your data in JavaScript

  1. 1. Visualizing your data in JavaScript Mandi Cai BOSCC30 2018 16 November 2018
  2. 2. What are we talking about? 1. The power of data visualization 2. The chart 3. The libraries 4. Recap
  3. 3. What are we talking about? 1. The power of data visualization
  4. 4. A better way to learn & engage Sources: The Upshot (NYT), Rhythm of Food (Google News Lab/Truth & Beauty), WaitButWhy
  5. 5. 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
  6. 6. 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
  7. 7. What are we talking about? 1. The power of data visualization 2. The chart
  8. 8. Yay! You already have clean data!
  9. 9. What chart is compatible with my data? Source: Venngage ChangeCompare OrganizeInform Relationship
  10. 10. 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
  11. 11. What chart is compatible with my data? Source: Venngage What are my independent variables and dependent variables? ChangeCompare OrganizeInform Relationship
  12. 12. 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?
  13. 13. Designing the chart
  14. 14. Indicate directionality Source: The Pudding
  15. 15. Source: The Pudding Annotate important points
  16. 16. What are we talking about? 1. The power of data visualization 2. The chart 3. The libraries
  17. 17. Libraries - D3.js - Chart.js - Dygraphs - Google Charts
  18. 18. Anatomy of a chart We’ll dissect a Dygraphs example.
  19. 19. 1. Define a container for your chart.
  20. 20. 2. Load your charting library.
  21. 21. 3. Define or load your data.
  22. 22. 4. Script your chart.
  23. 23. 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?
  24. 24. Learning curve? D3.js Chart.jsDygraphs Google Charts SmallSmall SmallSteep
  25. 25. Lines of code for a basic line chart? 10-158 10-15100-130 D3.js Chart.jsDygraphs Google Charts
  26. 26. Active development? ActiveSporadic SporadicActive D3.js Chart.jsDygraphs Google Charts
  27. 27. 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
  28. 28. Level of customization? MediumLow MediumHigh D3.js Chart.jsDygraphs Google Charts
  29. 29. Interactivity? LowLow LowHigh D3.js Chart.jsDygraphs Google Charts
  30. 30. Interactivity is important
  31. 31. 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
  32. 32. 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
  33. 33. 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.
  34. 34. What are we talking about? 1. The power of data visualization 2. The chart 3. The libraries 4. Recap
  35. 35. 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!
  36. 36. Thanks! Twitter E-mail Website @MandiCai mandicai@gmail.com www.mandilicai.com Code for chart examples at github.com/mandicai

×