Hi

Data Visualization &HTML5

Chris Bannon

Agenda

1.Types of Data Visualization2.Best Practices3.Common Mistakes4.HTML5 Tools

I’m Chris Bannon

Slightly more bearded

I started as a Designer

Va fan(Please don’t tell

anyone)

But I got tired of not getting what I wanted

from Devs…

So I became a Developer

I learned JavaScript

I learned VisualBasic

Va fan

Then I finally learned a real programming

language

C#

Just kidding, I actually love JavaScript

Yada, yada, yada… Now I am a Product

Manager

Va fan

“[Chris Bannon] is someone who is

probably an excellent developer…”

John Goodall, Research Scientist

“…but someone who does not really know

what 'data visualization' means.”

John Goodall, Research Scientist

Va fan

Why am I talking about Data Visualization?

Because I work with it a lot

And I see a lot of bad visualizations

I work for a company called

We know Controls(Since 1987)

On all Microsoft platforms

FlexGrid, Sizer, Spread, ActiveReports, etc...

Focus on HTML5

Enough about us...

Let’s look at examples of Data Visualization in

HTML5…

What is Data Visualization?

“Communicate information clearly and effectively through

graphical means”

Vitaly Friedman

“Data visualization takes the burden of effort off brain and

puts it on the eyes.“

Stephen Few

Simplify

Summarize

Tell a story

Important now more than ever

We are inundated with data Today

Big Data

90% of world's data generated over last two

yearsSINTEF

Va fan

How do we decipher Signal vs Noise

Address something that matters

Stephen Few

Promote understanding

Stephen Few

Provide opportunity to take action

Stephen Few

Your visualizations will be used to make

important decisions

How do we visualize data?

Numbers

[apple,orange,banana,strawberry]

4 Fruits

Size

LargeSmall

Colors

GoodNormal

Bad

Charts

Wijmo Bar Chart

Wijmo Area Chart

Wijmo Column Chart

Wijmo Line Chart

Wijmo Candlestick Chart

Gauges

Wijmo Gauges

Grids & Tables

Wijmo Grid

Wijmo SpreadJS

And anything else that *works*...

What are some best practices?

The data should define the design

Color palettes

Stephen Few

Format data by type and context

1538120.23001,538,120.23$1,538,120.23$1,538,120$1.5MM

Keep lines to a minimum

Remove background noise

Ensure important data is in focus

What are some common mistakes?

Pie Charts

Walter Hickey

Va fan

3D Effects

Stephen Few

Va fan

Manipulated Axis

NPR

Va fan

Distraction from data

Edward Tufte

Va fan

Omission of data

Wikipedia

Va fan

Putting it all together...

Dark Horse Analytics

What tools can help me visualize data?

Past

Static Images

Plugins like Flash & Silverlight

Then came mobile

Present

HTML & CSS

SVG

Vector

Markup defined graphic

DOM-friendly

Very efficient

Ideal for interactive graphics

My favorite

Canvas

Raster

2D drawing surface

JavaScript API

Ideal for graphical applications (requiring

pixel painting)

How do we bind data?

Make binding to live data easy

Focus on the data model

Let the library update the UI

What about power tools?

D3.jsRaphael.jsSnapSVG

JavaScript libraries for drawing SVG

Powerful

Flexible

Steep learning curve

What if we don’t want to write our own charts?

Use ready-made JavaScript Controls

DataGrid, Charts, etc...

Properties, Methods & Events

<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

Save time

Spend more time focusing on good Data

Visualization

Let’s look at using Controls…

Now, go make beautiful data visualizations!

Test your IQhttp://www.perceptualedge.com/files/GraphDesignIQ.html

Thank you very much

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