data visualization & html5 - swedish edition
DESCRIPTION
HTML5 offers rich, new options for Data Visualization like SVG and Canvas. We will look at the new technology available in HTML5 as well as tools to help leverage it. Wijmo is a jQuery library that makes cross-browser charting with SVG easy. We will use it to build some killer dashboards in HTML5. We’ll also take a look at some good (and bad) practices for properly visualizing data. This session will walk you through the basics of Data Visualization in HTML5.TRANSCRIPT
![Page 1: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/1.jpg)
Hi
![Page 2: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/2.jpg)
Data Visualization &HTML5
Chris Bannon
![Page 3: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/3.jpg)
Agenda
1.Types of Data Visualization2.Best Practices3.Common Mistakes4.HTML5 Tools
![Page 4: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/4.jpg)
I’m Chris Bannon
![Page 5: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/5.jpg)
Slightly more bearded
![Page 6: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/6.jpg)
![Page 7: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/7.jpg)
![Page 8: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/8.jpg)
I started as a Designer
![Page 9: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/9.jpg)
Va fan(Please don’t tell
anyone)
![Page 10: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/10.jpg)
But I got tired of not getting what I wanted
from Devs…
![Page 11: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/11.jpg)
So I became a Developer
![Page 12: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/12.jpg)
I learned JavaScript
![Page 13: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/13.jpg)
I learned VisualBasic
![Page 14: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/14.jpg)
Va fan
![Page 15: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/15.jpg)
Then I finally learned a real programming
language
![Page 16: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/16.jpg)
C#
![Page 17: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/17.jpg)
Just kidding, I actually love JavaScript
![Page 18: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/18.jpg)
Yada, yada, yada… Now I am a Product
Manager
![Page 19: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/19.jpg)
Va fan
![Page 20: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/20.jpg)
“[Chris Bannon] is someone who is
probably an excellent developer…”
John Goodall, Research Scientist
![Page 21: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/21.jpg)
“…but someone who does not really know
what 'data visualization' means.”
John Goodall, Research Scientist
![Page 22: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/22.jpg)
Va fan
![Page 23: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/23.jpg)
Why am I talking about Data Visualization?
![Page 24: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/24.jpg)
Because I work with it a lot
![Page 25: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/25.jpg)
And I see a lot of bad visualizations
![Page 26: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/26.jpg)
I work for a company called
![Page 27: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/27.jpg)
![Page 28: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/28.jpg)
We know Controls(Since 1987)
![Page 29: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/29.jpg)
On all Microsoft platforms
![Page 30: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/30.jpg)
FlexGrid, Sizer, Spread, ActiveReports, etc...
![Page 31: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/31.jpg)
![Page 32: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/32.jpg)
Focus on HTML5
![Page 33: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/33.jpg)
![Page 34: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/34.jpg)
Enough about us...
![Page 35: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/35.jpg)
Let’s look at examples of Data Visualization in
HTML5…
![Page 36: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/36.jpg)
What is Data Visualization?
![Page 37: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/37.jpg)
“Communicate information clearly and effectively through
graphical means”
Vitaly Friedman
![Page 38: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/38.jpg)
“Data visualization takes the burden of effort off brain and
puts it on the eyes.“
Stephen Few
![Page 39: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/39.jpg)
![Page 40: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/40.jpg)
Simplify
![Page 41: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/41.jpg)
Summarize
![Page 42: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/42.jpg)
Tell a story
![Page 43: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/43.jpg)
Important now more than ever
![Page 44: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/44.jpg)
We are inundated with data Today
![Page 45: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/45.jpg)
Big Data
![Page 46: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/46.jpg)
90% of world's data generated over last two
yearsSINTEF
![Page 47: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/47.jpg)
Va fan
![Page 48: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/48.jpg)
How do we decipher Signal vs Noise
![Page 49: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/49.jpg)
Address something that matters
Stephen Few
![Page 50: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/50.jpg)
Promote understanding
Stephen Few
![Page 51: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/51.jpg)
Provide opportunity to take action
Stephen Few
![Page 52: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/52.jpg)
Your visualizations will be used to make
important decisions
![Page 53: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/53.jpg)
How do we visualize data?
![Page 54: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/54.jpg)
Numbers
![Page 55: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/55.jpg)
[apple,orange,banana,strawberry]
4 Fruits
![Page 56: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/56.jpg)
Size
![Page 57: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/57.jpg)
LargeSmall
![Page 58: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/58.jpg)
Colors
![Page 59: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/59.jpg)
GoodNormal
Bad
![Page 60: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/60.jpg)
Charts
![Page 61: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/61.jpg)
Wijmo Bar Chart
![Page 62: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/62.jpg)
Wijmo Area Chart
![Page 63: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/63.jpg)
Wijmo Column Chart
![Page 64: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/64.jpg)
Wijmo Line Chart
![Page 65: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/65.jpg)
Wijmo Candlestick Chart
![Page 66: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/66.jpg)
Gauges
![Page 67: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/67.jpg)
Wijmo Gauges
![Page 68: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/68.jpg)
Grids & Tables
![Page 69: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/69.jpg)
Wijmo Grid
![Page 70: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/70.jpg)
Wijmo SpreadJS
![Page 71: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/71.jpg)
And anything else that *works*...
![Page 72: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/72.jpg)
What are some best practices?
![Page 73: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/73.jpg)
The data should define the design
![Page 74: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/74.jpg)
Color palettes
![Page 75: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/75.jpg)
Stephen Few
![Page 76: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/76.jpg)
Format data by type and context
![Page 77: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/77.jpg)
1538120.23001,538,120.23$1,538,120.23$1,538,120$1.5MM
![Page 78: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/78.jpg)
Keep lines to a minimum
![Page 79: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/79.jpg)
Remove background noise
![Page 80: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/80.jpg)
Ensure important data is in focus
![Page 81: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/81.jpg)
What are some common mistakes?
![Page 82: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/82.jpg)
Pie Charts
![Page 83: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/83.jpg)
Walter Hickey
![Page 84: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/84.jpg)
Va fan
![Page 85: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/85.jpg)
3D Effects
![Page 86: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/86.jpg)
Stephen Few
![Page 87: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/87.jpg)
Va fan
![Page 88: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/88.jpg)
Manipulated Axis
![Page 89: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/89.jpg)
NPR
![Page 90: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/90.jpg)
Va fan
![Page 91: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/91.jpg)
Distraction from data
![Page 92: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/92.jpg)
Edward Tufte
![Page 93: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/93.jpg)
Va fan
![Page 94: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/94.jpg)
Omission of data
![Page 95: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/95.jpg)
Wikipedia
![Page 96: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/96.jpg)
Va fan
![Page 97: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/97.jpg)
Putting it all together...
![Page 98: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/98.jpg)
Dark Horse Analytics
![Page 99: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/99.jpg)
What tools can help me visualize data?
![Page 100: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/100.jpg)
Past
![Page 101: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/101.jpg)
Static Images
![Page 102: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/102.jpg)
Plugins like Flash & Silverlight
![Page 103: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/103.jpg)
Then came mobile
![Page 104: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/104.jpg)
Present
![Page 105: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/105.jpg)
HTML & CSS
![Page 106: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/106.jpg)
SVG
![Page 107: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/107.jpg)
![Page 108: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/108.jpg)
Vector
![Page 109: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/109.jpg)
Markup defined graphic
![Page 110: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/110.jpg)
DOM-friendly
![Page 111: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/111.jpg)
![Page 112: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/112.jpg)
Very efficient
![Page 113: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/113.jpg)
Ideal for interactive graphics
![Page 114: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/114.jpg)
My favorite
![Page 115: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/115.jpg)
Canvas
![Page 116: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/116.jpg)
![Page 117: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/117.jpg)
Raster
![Page 118: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/118.jpg)
2D drawing surface
![Page 119: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/119.jpg)
JavaScript API
![Page 120: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/120.jpg)
Ideal for graphical applications (requiring
pixel painting)
![Page 121: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/121.jpg)
How do we bind data?
![Page 122: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/122.jpg)
![Page 123: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/123.jpg)
![Page 124: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/124.jpg)
Make binding to live data easy
![Page 125: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/125.jpg)
Focus on the data model
![Page 126: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/126.jpg)
Let the library update the UI
![Page 127: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/127.jpg)
What about power tools?
![Page 128: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/128.jpg)
D3.jsRaphael.jsSnapSVG
![Page 129: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/129.jpg)
JavaScript libraries for drawing SVG
![Page 130: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/130.jpg)
Powerful
![Page 131: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/131.jpg)
Flexible
![Page 132: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/132.jpg)
Steep learning curve
![Page 133: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/133.jpg)
What if we don’t want to write our own charts?
![Page 134: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/134.jpg)
Use ready-made JavaScript Controls
![Page 135: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/135.jpg)
![Page 136: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/136.jpg)
DataGrid, Charts, etc...
![Page 137: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/137.jpg)
Properties, Methods & Events
![Page 138: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/138.jpg)
<wij-barchart dataSource="list"> <series-list> <series label="Sales"> <data> <x bind="Name" ></x> <y bind="Sales"></y> </data> </series> </series-list></wij-barchart>
AngularJS & Wijmo Directive Markup
![Page 139: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/139.jpg)
Save time
![Page 140: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/140.jpg)
Spend more time focusing on good Data
Visualization
![Page 141: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/141.jpg)
Let’s look at using Controls…
![Page 142: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/142.jpg)
Now, go make beautiful data visualizations!
![Page 143: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/143.jpg)
Test your IQhttp://www.perceptualedge.com/files/GraphDesignIQ.html
![Page 144: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/144.jpg)
Thank you very much
![Page 145: Data Visualization & HTML5 - Swedish Edition](https://reader036.vdocuments.net/reader036/viewer/2022081412/53edd4508d7f7289708b5eaa/html5/thumbnails/145.jpg)
References• John Goodall http://jgoodall.me/posts/2012/03/25/wijmo/ • Vitaly Friedman
http://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-visualization-and-infographics/
• Stephen Few http://www.perceptualedge.com • SINTEF http://www.sintef.no/home/Press-Room/Research-News/Big-Data--for-better-or-worse/ • Google https://support.google.com/drive/answer/1047428?hl=en • NPR
http://www.npr.org/blogs/itsallpolitics/2013/02/13/171935151/chart-check-did-obama-s-graphics-enhance-his-big-speech
• Edward Tufte http://www.edwardtufte.com/tufte/ • Walter Hickey http://www.businessinsider.com/pie-charts-are-the-worst-2013-6 • Wikipedia http://en.wikipedia.org/wiki/Misleading_graph • Dark Horse Analytics http://darkhorseanalytics.com/ • D3 http://d3js.org • Wijmo http://wijmo.com • IQ Test http://www.perceptualedge.com/files/GraphDesignIQ.html