Previous proposalIntroducing PykCharts.js - opensource reusable charts in d3.js
Next proposalFlex your layouts and designs with CSS Flexbox
Engineering custom visualisations with advanced d3.js
Submitted by Chirag Gehlot (@chiraggehlot) on Saturday, 4 January 2014
Section: Workshops Technical level: Advanced
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.
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)
- 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).