Meta Refresh 2014

On the construction of user interface on the web

Chirag Gehlot

@chiraggehlot

Engineering custom visualisations with advanced d3.js

Submitted Jan 4, 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)

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 > Work. You can follow him at @pykih.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more