D3 meetup (Backbone and D3)

25
+ Josh Lewis AYASDI

Transcript of D3 meetup (Backbone and D3)

Page 1: D3 meetup (Backbone and D3)

+

Josh Lewis AYASDI

Page 2: D3 meetup (Backbone and D3)

bind data to the DOM

events

REST

model/view pattern

routing

templating

scales

behaviors

collection rendering

transitions

formatting

Page 3: D3 meetup (Backbone and D3)

bind data to the DOM

events

REST

model/view pattern

routing

templating

scales

behaviors

collection rendering

transitions

formatting

Page 4: D3 meetup (Backbone and D3)
Page 5: D3 meetup (Backbone and D3)
Page 6: D3 meetup (Backbone and D3)

Jyri Tuulos — BAD3UG May 2013 http://jtuulos.github.io/bayd3-may2013

Page 7: D3 meetup (Backbone and D3)

data

datadatadatadata

dom els

data model dataviews

Page 8: D3 meetup (Backbone and D3)

d3.select(el) dom el + data

view.$el

view.model

dom el

data

Page 9: D3 meetup (Backbone and D3)

d3.selectAll(els) dom els + data

view.$el.find(els)

view.collection

dom els

data

Page 10: D3 meetup (Backbone and D3)
Page 11: D3 meetup (Backbone and D3)

{      "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

Page 12: D3 meetup (Backbone and D3)

parent el

data datadatadatadata

dom els

datadata

subviewscollection

model view

Page 13: D3 meetup (Backbone and D3)

datadata

dom elscollection

model view

render: function () { d3.selectAll(‘li’) .data(this.model.collection.models) .enter().append(‘li’)… }

Page 14: D3 meetup (Backbone and D3)

bind data to the DOM

events

REST

model/view pattern

routing

templating

scales

behaviors

collection rendering

transitions

formatting

Page 15: D3 meetup (Backbone and D3)

Demo

Page 16: D3 meetup (Backbone and D3)

4

1

2

3

Page 17: D3 meetup (Backbone and D3)
Page 18: D3 meetup (Backbone and D3)

Tracking interaction state

Page 19: D3 meetup (Backbone and D3)

• the DOM

• widget-specific closures

• Backbone views

• Backbone models

Store state in

Page 20: D3 meetup (Backbone and D3)

Our approach

Page 21: D3 meetup (Backbone and D3)

interactions model

view or model object

dependentsdependentsdependentsdependentsdependentsdependents

listen to interaction events set & get interaction state

trigger events create getter and setterregister a named interaction

Page 22: D3 meetup (Backbone and D3)

network

colorings

node groups

interactions

models views

networkVisualization

networkGraph

networkHistogram

networkColorings

networkNodeGroups

selectedNodes

transform

Page 23: D3 meetup (Backbone and D3)

Wins

• Undo/redo for free

• Uniform representation

• Less boilerplate

• Potential to persist interaction state between sessions

Page 24: D3 meetup (Backbone and D3)

events

REST

model/view pattern

routing

templating

scales

behaviors

collection rendering

transitions

formatting

Page 25: D3 meetup (Backbone and D3)

Thank You !Ian Johnson & BAD3UG Danny Cochran, Cindy Zhang, Diana Suvorova & Ayasdi Engineering

♥ ♥

We’re hiring! [email protected]