Nested Composition

[curran]

Hybrid visualizations in which visual components are nested within other visual components should be trivial to assemble. This requirement may fundamentally shape how the library is constructed.

Examples:

• Facet (small multiples in X and/or Y)
• Scatter plot of pie charts
• Treemap of line charts

[curran]

Nested composition is a fundamental aspect. This could be done by adopting the "rubber stamp" idea from Towards Reusable Charts. Each visual component could be constructed in such a way that it exposes a "nesting" point, where another visual component could pick up the task of rendering marks. Maybe this could be called mark

As an example, a "Scatter Plot" could be a nested composition of two visual components "Scatter" and "Circle". The code that uses the components might look something like this:

var RV = require("reactive-vis");
var circle = RV.Circle();
var scatter = RV.Scatter()
  .mark(circle);

A prototype of this is implemented in Composable Visualization Test.

One implication of this is that the parameters for the "Scatter Plot" would actually be split up between the "Scatter" and "Circle" instances, like this:

var circle = RV.Circle();
var scatter = RV.Scatter()
  .mark(circle);

circle
  .colorScale(...)
  .colorColumn(...);

scatter
  .xColumn(...)
  .yColumn(...)
  .sizeColumn(...);

[curran]

Part of #12

[curran]

Tried an implementation that looks like this:

var circle = ReactiveVis.Circle();

var scatter = ReactiveVis.Scatter()
  .svg(createSVG())
  .data(exampleData);

scatter
  .xColumn("sepal_length")
  .yColumn("sepal_width")
  .sizeColumn("petal_length");

scatter(function (marks){
  marks.each(function (d){
    var size = marks.sizeLocal.get(this);

    circle
      .data([d])
      .width(size)
      .height(size)
      .svg(this);

    ReactiveVis.digest();
  });
  console.log(marks);
}, "marks");

ReactiveVis.digest();

It doesn't work because a digest within a digest is not currently supported.

Depends on datavis-tech/reactive-function#18

[curran]

This is what nested composition setup looks like now:

var svg = createSVG();
var circle = ReactiveVis.Circle();

var scatter = ReactiveVis.Scatter()
  .svg(svg)
  .data(exampleData);

scatter
  .xColumn("sepal_length")
  .yColumn("sepal_width")
  .sizeColumn("petal_length");

scatter(function (marks){
  marks.each(function (d){
    var size = marks.sizeLocal.get(this);
    circle
      .data([d])
      .width(size)
      .height(size)
      .svg(this)
      .digest();
  });
}, "marks");

ReactiveVis.digest();