Charting in your browser with HTML5

and JavaScript

Who I am

• Maxime Rouiller

• ASP.NET/IIS MVP

• 10 years of experience doing web development

• Freelancer

• Twitter: @MaximRouiller

• Blog: http://blog.decayingcode.com

The Plan

• What are the use cases for charts?

• What tools are available today?

• Why do charts in JavaScript rather than [OTHER TECH]?

• What is d3.js?

• Exploring Dimple.js

Back to basics: What’s the uses of charts?

• Easily display information

• “An image is worth a 1000 words”

• Understanding what’s going on

With or without charts…

With or without charts…

What kind of tools are available?

• 100% online

• JavaScript libraries (100% HTML)

• SaaS-type of library

• Flash-based tool

Flash-Based tools

• I don’t know and I don’t care

• Why? Not mobile friendly, not tablet friendly, only IE6 friendly.

Online tool

• RAW by Density Design

• Other $$$ options

JavaScript libraries

• Chartist

• DimpleJS

• NVD3

• Rickshaw

• Polychart

• Google Charts

• …

JavaScript libraries

• All based on D3.JS

What is D3.js

What is D3.js

• JavaScript SVG manipulation

• JavaScript CSV/TSV/etc. manipulation

• All around “make data look pretty” kind of tool

Example of D3.js

Polar Clock

http://www.nytimes.com/interactive/2013/02/19/movies/awardsseason/oscar-trailers.html

OK… it’s amazing but… how hard is it?

• 305 lines of JavaScript code for the simplest example

RELAX!

DemoBeginning charts with DimpleJS

DemoMultiple Data source with DimpleJS

Questions?

• Contact me on Twitter: @MaximRouiller

• Blog: http://blog.DecayingCode.com

• Add me to LinkedIn

• www.MaximeRouiller.com

• Or speak to me at the break!