Combining d3.js and backbone.js

Question

I am working on a project which combines all the d3.js visualizations with backbone.js into a single page application. Since I have many visualizations such as bar chart, pie chart, and so on, i was wondering what the best approach to this problem is.

For instance, lets say I have a two bar charts, and a pie chart. Should I put all set margins, scales, render all data for all the charts together in a view? Since there are two different types of graphs, what should be the model?

What should go to View, Model, Controller, Collection, and so on?

Thanks in advance,

Answer 1

I've looked into combining D3 and Backbone a little and there are a few existing solutions out there:

Overview presentation

Short tutorial on combining Backbone & D3

Longer discussion on marrying Backbone and D3

A bunch of JS libraries for integrating with D3

I also found a library on GitHub but it didn't seem to be supported...

In the end, none of these really satisfied me so I developed my own Backbone models, collections & views. I set up:

ChartPoint Model - X & Y coordinate and a point label

ChartSeries Collection - Collection of ChartPoints that define the full chart

ChartBaseView - A view that interprets the data above, handles events, draws axes and other general functions

BarChartView, LineChartView, PieChartView, etc. - Specific views for rendering the type of charts you want. Most of your D3 code goes here.

Not saying this is the "right" way to do it... just my way.