The Fifth Elephant 2014

d3.js is a very complex library with a lot of functionality. That said, there are a lot of ready examples available on the Internet, which in turn promotes a culture of copy-paste-code. Hence, one ends up seeing recurring themes of the same charts - Sankey, Chord, Matrix, Force layout, etc. repeatedly. The objective of this workshop help a d3 developer truly harness the power of d3.js to make custom visualisations.

Example: One of our client came to us with a list of 20-30 data points that they wanted to visualise. Instead of trying to forcefully fit them into any existing d3 chart, we conceptualised, designed and developed a custom d3 chart called as River Chart.

Outline

The idea of the talk to take a business problem and build a custom visualization from scratch. It will include advanced topics like:

• Injecting real time data with KnockOut.js
• How to read complex JSONs with Underscore, D3.set and D3.nest
• SVG Path Generators: Area generator, Line generator, Arc generator, Bezier curve generator
• Introduction to various D3 layouts and how to create a custom d3 layout
• Using D3 components like Brush, Zoom, Drag, Context to improve interactivity
• Leveraging D3 plugins like Sankey, Fisheye, JsonP, Key binding
• Adding D3 transitions to introduce flash like animations
• Combine power of visualization with simplicity of spreadsheets (EXTJS)
• Building reusable charts with MISO project’s dataset, d3.chart and storyboard.

Requirements

• You should have basic knowledge of d3.js.
• A computer with a) Chrome Browser b) Python WEB server c) Text-editor (even notepad will do).

Speaker bio

Chirag works as a Data Artist at Pykih. He uses d3.js, along with other Javascript frameworks like Underscore, Backbone, etc. to build complex and interactive visualisations for enterprise clients. Chirag has also contributed to PykCharts, Pykih’s open-source, resusable d3 library. Prior to joining Pykih, Chirag ran his own boutique web development business. Some of his work is at Pykih. You can follow him at @pykih.