Posted in backbone.js, d3.js, projects, grunt.js, require.js

Corelio annual report with backbonejs and reponsive d3js charts

I was asked by Johan from Wolf's Little Store to help creating some d3js charts for Corelio's 2012 Annual Report.

We ended up creating a backbone.js application to display the slides touching on different topics.

Some of the challenges

  • Display the chart axis on page load, but only start displaying the chart's content (graphs) when within the viewport.
  • Don't start showing the chart's content when the visitor is scrolling very fast over them.
  • Initially, the charts had a fixed width. We ended up making the charts responsive by adapting to the available width.
  • The visitor can scroll to specific slides using the menu.
  • Create a static one pager with a JavaScript application to make everything interactive.
  • Make parts of the d3.js charts reusable since we created several of them.

Some of the tools used

  • Backbone.js: to structure the application and keep us sane
  • D3.js: to create the different charts
  • jQuery waypoints: to decide when to display the chart's contents and figure out which menu link to activate
  • Gruntjs: to help us build the endresult, which is basically one static file
  • require.js: to load the different JavaScript files and divide the JavaScript application in different modules

Checkout the endresult.