Chart annotations

[farrelld...@gmail.com]

Has anyone tried adding user annotation to charts, something roughly similar to this example, http://blacklib1969.swarthmore.edu/enrollment, but with the line pointing to a specific point on the chart?  The annotations would probably be in the CSV/JSON file.  This seems straightforward enough in pure D3, but I'm not sure how to manage it when adding crossfilter grouping and the abstraction of dc.js.  

Any ideas would be appreciated,

Thanks,

Dean

[Blair Nilsson]

I've been thinking about this after looking at mozillas charting library (they do annotations really well)

Here is how I would go about it (in general).

I'd build a reduce function for crossfilter, which gave you the value AND annotation.

init = function() {

  return {

    total:0,
    annotations:[]

  };
}

add = function(p,v) {
  p.total = p.total + v.value;
  p.annotations = p.annotations.concat(v.annotations)
  return p;

}

subtract = function(p,v) {

 p.total = p.total - v.value;

p.annotations = p.annotations.filter( function( el ) {  return v.annotations.indexOf( el ) < 0; } );  

}

mygroup = dim.group().reduce(add,subtract,init)

This will give you a group where each point has a list of annotations it was made up from (as long as the annotations are unique...)

You can then use a renderlet to draw a line up with some text at the top containing the annotation(s).

Does this make sense?