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.

Data Vuesualization Data Visualization in VueJS

46 views

Published on

This was a talk I gave at Vue NYC on March 19th. This presentation goes over the basics of Data Visualization and then goes into how to create charts in Vue. It uses Vue and Chart.js.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Data Vuesualization Data Visualization in VueJS

  1. 1. DATA VISUALIZATION IN VUE DATA VUESUALIZATION:
  2. 2. WHY AM I ALLOWED TO TELL YOU HOW TO VISUALIZE DATA? WHO AM I? • I’m a UI Developer at 1010data • I specialize in our data visualization tools • I’ve worked on our client side and server side charting code • My website is mattdelsig.me or mattdelsig.dev if you’re feeling fancy
  3. 3. THE RULES OF CHART CLUB
  4. 4. 1. PLEASE TALK ABOUT DATA VIZ CLUB
  5. 5. 2. GET A GRIP ON YOUR DATA TYPES
  6. 6. Categorical: Bar, Dot, Pie* Continuous: Line, Scatter, Area Time Series: Line or Bar, depends on if you care about trends or outliers HOW TO HANDLE DIFFERENT DATA TYPES
  7. 7. 3. NO CHART JUNK
  8. 8. Avoid extra graphical elements that aren’t entirely necessary to the chart. They can distort the meaning of the chart. FANTASTIC CHART JUNK AND WHERE TO FIND IT Image from thedatalass.com
  9. 9. 4. KEEP CARDINALITY AND RANGE IN MIND
  10. 10. WORKING WITH A RANGE OF CARDINALS • Cardinality is the number of unique data items • Range is the difference between the min and max • If you have high cardinality and low range a bar chart isn’t good • If you have low cardinality and high range, a scatter plot may not be good Photo by Chris Chow on Unsplash
  11. 11. BRINGING IT ALL TOGETHER: CHARTING IN VUE
  12. 12. • We’re going to use Vue bindings for Chart.js called vue-chartjs • This library allows for reactive bindings for Chart.js • Chart.js is a canvas based, client side charting framework • It has basic chart types which can be imported and extended in your own Vue components • There’s a mixin for reactive properties CHARTING IN VUE
  13. 13. • Declarative data bindings and reactive props means changing the dataset can efficiently re- render the chart • We can also change the scales to be appropriate for the data type • This means having streaming data is no problem, the chart will live update as our data updates CHANGING DATASETS
  14. 14. LETS MAKE THINGS MORE INTERESTING: CHANGING THE CHART TYPE
  15. 15. RESPONSIVE CHARTS
  16. 16. • Chart.js can listen to window events and re render on resize • It does this by listening to events with a parent container then using those dimensions to resize the canvas • The vue-chartjs plugin also allows for this option and adds the correct container elements automatically RESPONSIVE CHARTS
  17. 17. QUESTIONS?
  18. 18. Data is Plural (https://tinyletter.com/data-is-plural) : Good source for Datasets Vue-ChartJs (https://vue-chartjs.org/) : Chart.js bindings for Vue Patternomaly (https://github.com/ashiguruma/ patternomaly) : Library to generate patterns to improve chart accessibility The Visual Display of Quantitative Information by Edward Tufte : The classic book on Data Visualization ADDITIONAL RESOURCES
  19. 19. EXAMPLE CODE: HTTPS://GITHUB.COM/TOASTKING/ DATA-VUESUALIZATION

×