Abstract Data Dereferencing

[jugglinmike]

Some users have expressed interest in defining charts with "abstract"
requirements on the shape of input data. If this were provided by d3.chart,
charts might be considered more "reusable". Any chart could be configured to
visualize data sets defined in many different ways.

In building version 0.2 of this library, we discussed the needs of such an API
(see issue #22), built a prototype implementation, and eventually encapsulated
this solution in a JavaScript module named DataMap. We introduced the basic API
and functionality in the roadmap for the v0.2 release.

Ultimately, though, we decided not to include this solution for two reasons:

1. General data transformation is outside of the scope of this library (see
   Miso DataSet and
   CrossFilter for existing solutions)
2. That particular solution was not complete, and incorporating it would cause
   more confusion than it was worth.

Again, you can read the roadmap for the v0.2 release to learn more.

I'm opening this issue to create a place for further discussion on this
decision. If you disagree with #1 above and believe that data transformation
is within the purview of this data visualization plugin, let us know why. If
would like to experiment with (and possibly extend) our original solution, you'll
find a commit on the HEAD of the data-attrs branch that re-introduces the feature.

[mgerring]

I have this problem, and I solved it by using the method shown in Towards Reusable Charts:

initialize: function() {
    var chart = this;

    chart.yValue = function(d){ return d[0] };
    chart.idValue = function(d){ return d[1] };
    chart.maxValue = function(data){ return d3.max(data,function(d){ return d[0] }) };

...

transform: function(data) {
    var chart = this;
    var newData = data.map( function(d,i) {
      return [chart.yValue.call(data, d, i), chart.idValue.call(data, d, i)];
    } );
    return newData;
  },

  y: function(func) {
    if (!arguments.length) return this.yValue;
    this.yValue = func;
    return this;
  },

  id: function(func) {
    if (!arguments.length) return this.idValue;
    this.idValue = func;
    return this;
  },

  max: function(func) {
    if (!arguments.length) return this.maxValue;
    this.maxValue = func;
    return this;
  }

Then, when you need to tell the chart what your data looks like, you can do this:

var myBarChart = selection
          .chart('barChart')
            .y(function(d){ return $parse(attrs.y)(d) })
            .id(function(d){ return $parse(attrs.id)(d) })
            .max(function(d){ return $parse(attrs.max)(d) });

In this case, $parse(attrs.y)(d) is using an attribute set on an angular.js directive to find a property in d, where d is raw data returned from an API.

What do people think about this approach?

[jugglinmike]

@mgerring I think that looks pretty good! The tricky thing about solving this
problem from within d3.chart itself is that the approach has to be very
generic before it can be justified, and the trade-offs between usefulness,
performance, and simplicity are very difficult to navigate.

I'm thinking of one change that might make your approach a little better still:

     chart.yValue = function(d){ return d[0] };
     chart.idValue = function(d){ return d[1] };
-    chart.maxValue = function(data){ return d3.max(data,function(d){ return d[0] }) };
+    chart.maxValue = function(data){ return d3.max(data,function(d){ return chart.yValue(d); }) };

This way, users who override yValue can still use the "default"
implementation of maxValue. What do you think?