Marrying Backbone.js and D3.js

Shirley Wu

(@shirleyxywu)










Slides exist here: sxywu.github.io/backbone-d3

So a year ago, I gave a talk:

And someone came up after, and said

Maybe I'm missing something,

but it just doesn't seem that difficult.

And I was like,

Yup, I totally agree.

It's really not that difficult.

But what I do think is challenging (and interesting) is to use them together well.

And there's two reasons for that:

  1. Backbone is object-oriented, while D3 is functional.

  2. They're both opinionated about how data should be
    fetched
    ,
    rendered
    , and
    updated

Let me set up an example :

Fake data acquired from our past parties

Real app visualizing the flow of our fake party

Here's the code with Backbone
in Concise mode!
:

And the code with D3
in Concise mode!
:

Some more examples of D3:


Backbone.js

D3.js

Data may change through user input.

Data may need to be persisted across sessions.

Visualize data, transition between different states of data.

User input doesn't usually affect the data displayed.

Models and Collections for managing data: fetch, save, destroy

d3.xhr.get, d3.json, d3.csv, etc. to fetch.

d3.xhr.post to persist (but I very rarely see it used).

Views wrap around DOM elements

d3.select or d3.selectAll for selecting DOM elements

.data to bind data to selected elements

.enter to create elements from bound data

Views subscribe to Model change events, which usually trigger re-render

re-fetch data, or render next set of data

enter-update-exit

Backbone + D3: complex web app where user input effects the data visualized

Attempt #1: Injecting D3 into Backbone
in Concise mode!

submit reset

For more details: shirley.quora.com

Attempt #2: Reusable D3 Charts
in Concise mode!

submit reset

Some Reusable D3 examples (of mine):




For more details: shirley.quora.com

Attempt #3
in Concise mode!
:

submit reset

And finally, thank you for having me


Tweet