After last week’s post things have been moving around in the modules we published… I will try to explain the changes here more in depth and hopefully that, in conjunction with the updated readme files, will clarify the new functionalities and decisions.

Name changes

The easiest part of the refactorings is the name changes, nothing very fancy: baseTimeline now is simply called timeline. The segment visualiser module is now segmentVis and the segment editor is called segmentEdit.

New modules

This module might be subject to change

During the refactoring the common editing capabilities such as layer event handling and convenience css classes have been abstracted to an external module called for the moment make-editable (working title).

API changes

As you perhaps noticed some of our APIs where slightly inconsistent, specially if you are coming from the d3 world. Some of the modules config was being passed on “instantiation” and other handled via accessors, we’ve tried to clean that a little and stick to a more uniform, so none of the parameters are passed in at “instantiation” time but only through the almost standardised and widely adopted by d3’s community combined accessors.

1
2
3
4
5
6
7
8
9
10

// Before !!! BREAKS
var seg = createSegVis({name: 'segments', data: collection.models});

// Today
var seg = segmentVis()
  // .dataView(view)
  .name('segments')
  .top(0)
  .opacity(0.60);
…

Ok, what the heck is this adapter? and where did the data go? Well, the current development is moving towards passing the data into the timeline rather than in a per-layer basis, so we can represent more complex multi-layer data types easily. I will explain that and the idea of views next.

The data and dataViews

So, some of the more important changes has been cleaning up the visualisers from any data-specific aspect, the first version was based on backbone models/collections, and that comes with a lot of advantages, but we don’t want to be tied to a specific data format/container, so we have introduced a new piece of the puzzle, a kind of model/model manager/model adapter we call dataView.

The idea is completely based upon binary dataViews where our raw data would be like the ArrayBuffer and we provide the means to access and manipulate that data.

In the case of a segment this is how your adapter would look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var view = {

  // tell d3 which is our key for sorting
  sortIndex: function(d) {
    return d.get('begin');
  },

  // how to retrieve or set the value used as the start of the segment
  start: function(d, v) {
    // no value, we retrieve
    if(!v) return +d.get('begin');
    // yesvalue we set :)
    d.set('begin', v);
  },

  // how to retrieve or set the value used as the length of the segment
  length: function(d, v) {
    if(!v) return +d.get('duration');
    d.set('duration', v);
  },

  // how to retrieve or set the value used for the color of the segment
  color: function(d, v) {
    if(!v) return d.get('color');
    d.set('color', v);
  }

};

This simple yet powerful idea allows us to pass in any type of data and the means for our visualisation to represent and edit it no matter what format it comes in, even actual ArrayBuffers !

Last but not least

You can find the updated repositories here:

• timeLine
• segment-vis
• segment-edit
• make-editable