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.

1. DATA VISUALIZATION
IN VUE
DATA VUESUALIZATION:

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. THE RULES OF
CHART CLUB

4. 1. PLEASE TALK ABOUT
DATA VIZ CLUB

5. 2. GET A GRIP ON
YOUR DATA TYPES

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. 3. NO CHART
JUNK

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. 4. KEEP CARDINALITY
AND RANGE IN MIND

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

12. BRINGING IT ALL
TOGETHER: CHARTING IN
VUE

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

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

18. LETS MAKE THINGS MORE
INTERESTING: CHANGING
THE CHART TYPE

21. RESPONSIVE
CHARTS

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

24. QUESTIONS?

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

26. EXAMPLE CODE:
HTTPS://GITHUB.COM/TOASTKING/
DATA-VUESUALIZATION