VizDOM

Fluent data driven documents based selection and data-join API for HTML DOM

Examples

Selection

TBD

Transition

Control

void main() {
  final anim = new AnimationBuilder().duration(120000).fillForwards()
    ..createAt(0.0).translateX(0)
    ..createAt(1.0).translateX(1000);

  select('#root')
      .selectAll('div')
      .style('background-color', 'red')
      .transition('anim1')
      .animateWithBuilder(anim);

  querySelector('#btn-cancel').onClick.listen((_) {
    select('#root').selectAll('div').transition('anim1').cancel();
  });

  querySelector('#btn-start').onClick.listen((_) {
    select('#root')
        .selectAll('div')
        .transition('anim1')
        .animateWithBuilder(anim);
  });

  querySelector('#btn-reverse').onClick.listen((_) {
    select('#root').selectAll('div').transition('anim1').reverse();
  });

  querySelector('#btn-finish').onClick.listen((_) {
    select('#root').selectAll('div').transition('anim1').finish();
  });

  querySelector('#btn-pause').onClick.listen((_) {
    select('#root').selectAll('div').transition('anim1').pause();
  });

  querySelector('#btn-play').onClick.listen((_) {
    select('#root').selectAll('div').transition('anim1').play();
  });
}

TODO

Selection

  • Bound data must be separate for each group
  • insertBound in BoundSelection
  • Lower
  • Raise
  • forEach
  • filter
  • size
  • non-null size
  • Events

Transition

  • active
  • chain

SVG

  • svg
  • Line
  • Group

Libraries

grizzly.vizdom