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,

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,

• javascript
• backbone.js
• d3.js
• visualization

• This is very vague. You'll have to be more specific to get a good answer. – Lars Kotthoff Commented Jun 20, 2013 at 14:13
• What should go in the View, Model, Controller, and Collection shouldn't be any different than any other single page application. It has nothing to do with d3, bar chart, pie chart, and so on. – Rick Suggs Commented Jun 20, 2013 at 15:02
• stackoverflow.com/questions/17050921/… – Adam Pearce Commented Jun 20, 2013 at 15:03
• An interesting video talks specifically about marrying the 2: youtube.com/watch?v=kqSc9YAZUi8 – gimg1 Commented Jul 18, 2014 at 2:14

1 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.