Meta Refresh 2014

On the construction of user interface on the web

Prateek Saxena


Introduction to d3.js

Submitted Jan 3, 2014

To introduce the audience to d3.js, a data visualization library, and how and where to use it. In addition I’ll talk about re-usable (Miso Project) and interactive charts (dc.js and Crossfilter).


d3.js allows binding of data to the DOM allowing you to create dynamic visualisations on the web. The following topics will be covered in the talk -

  1. d3.js is a JavaScript library for manipulating documents based on data. It helps visualize data by binding data to the DOM, letting you make visualizations in HTML and SVG. I’ll be covering the different d3 layouts such as -

  2. Miso Project is a joint venture by the The Guardian and bocoup. It is an open source toolkit designed for creating visualizations. I’ll specifically be covering the d3.Chart component that provides a framework for building reusable d3.js charts.

  3. dc.js & Crossfilter allow you to create interactive charts. Crossfilter is used to query data while dc.js redraws the charts according to the resulting data.

Along with covering these technologies, the presentation will include demos and some code samples. By the end of the presentation the audience should -

  • Be comfortable with thinking in d3’s enter, update, exit framework

  • Be able to create simeple d3 charts

  • Understand how to make reusable & interactive visualizations

Speaker bio

Prateek Saxena is a hybrid of design and development. He likes building games and web applications. Currently working with Pykih helping them create and design visualizations using the above technologies.


{{ 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