+

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! !joe@ayasdi.com