Post on 05-Aug-2015
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!