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