Download - D3 meetup (Backbone and D3)
+
Josh Lewis AYASDI
bind data to the DOM
events
REST
model/view pattern
routing
templating
scales
behaviors
collection rendering
transitions
formatting
bind data to the DOM
events
REST
model/view pattern
routing
templating
scales
behaviors
collection rendering
transitions
formatting
Jyri Tuulos — BAD3UG May 2013 http://jtuulos.github.io/bayd3-may2013
data
datadatadatadata
dom els
data model dataviews
d3.select(el) dom el + data
view.$el
view.model
dom el
data
d3.selectAll(els) dom els + data
view.$el.find(els)
view.collection
dom els
data
{ "id": "-‐2979845603908848503", "name": "Quick Analysis 1", "row_count": 145, "edge_count": 1062, "node_count": 232, "metric": "Norm Correlation", "lenses": ["PCA coord 1", "PCA coord 2”], ! "colorings": [{ "id": "2", "name": "Num Edges", "values": [8.0, 9.0, 10.0, ...] }, ...], ! "node_groups": [{ "id": "6714001173272531614", "name": "Island", "node_ids": [193, 192, 183, ...] }, ...] }
} metadata
} collections
parent el
data datadatadatadata
dom els
datadata
subviewscollection
model view
datadata
dom elscollection
model view
render: function () { d3.selectAll(‘li’) .data(this.model.collection.models) .enter().append(‘li’)… }
bind data to the DOM
events
REST
model/view pattern
routing
templating
scales
behaviors
collection rendering
transitions
formatting
Demo
4
1
2
3
Tracking interaction state
• the DOM
• widget-specific closures
• Backbone views
• Backbone models
Store state in
Our approach
interactions model
view or model object
dependentsdependentsdependentsdependentsdependentsdependents
listen to interaction events set & get interaction state
trigger events create getter and setterregister a named interaction
network
colorings
node groups
interactions
models views
networkVisualization
networkGraph
networkHistogram
networkColorings
networkNodeGroups
selectedNodes
transform
Wins
• Undo/redo for free
• Uniform representation
• Less boilerplate
• Potential to persist interaction state between sessions
events
REST
model/view pattern
routing
templating
scales
behaviors
collection rendering
transitions
formatting
♥
Thank You !Ian Johnson & BAD3UG Danny Cochran, Cindy Zhang, Diana Suvorova & Ayasdi Engineering
♥ ♥
We’re hiring! [email protected]