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.
- 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
Checkout the endresult.