PERGOLA LOGO

Multiple D3 documents

This example shows how you can load multiple D3 examples wrapped in windows, using Pergola with the d3.js library plugged in.

Using theme "lightslategray" with skin "rubber", as defined in config file.

View as standalone SVG

Showing the code for the “stream” example with some interactivity. For this example we defined the helper function streamWin.contents. The D3 example script is the body of the function. The property contains of the window object, which can get a Node or a function, executes the call.

// Define a Window instance
var streamWin = new pergola.Window("D3 Stream");

// Define the helper function containing the D3 example script
streamWin.contents = function() {
  var n = 20, // number of layers
      m = 200, // number of samples per layer
      w = 960,
      h = 500,
      o = this,
      color = d3.interpolateRgb("#aad", "#556");

  this.data0 = d3.layout.stack().offset("wiggle")(stream_layers(n, m));
  this.data1 = d3.layout.stack().offset("wiggle")(stream_layers(n, m));
  this.data2 = d3.layout.stack().offset("wiggle")(stream_waves(n, m));

  this.transitFrom = this.data0;
  this.transitTo = this.data1;

  var mx = m - 1,
      my = d3.max(this.data0.concat(this.data1), function(d) {
        return d3.max(d, function(d) {
          return d.y0 + d.y;
        });
      });

  var area = d3.svg.area()
    .x(function(d) { return d.x * w / mx; })
    .y0(function(d) { return h - d.y0 * h / my; })
    .y1(function(d) { return h - (d.y + d.y0) * h / my; });

/* 
 * The childDoc.transformable group has DOM Events listeners.
 * Defer appending the group. 
*/
//  var vis = d3.select(this.childDoc.transformable)
//    .append("svg:g")
//    .attr("transform", "translate(" + 10 + "," + 40 + ")");
  var vis = d3.select($C({element : "g", transform : "translate(" + 10 + "," + 40 + ")"}));

  vis.selectAll()
    .data(this.data0)
    .enter().append("svg:path")
    .attr("fill", function() { return color(Math.random()); })
    .attr("d", area);

  this.childDoc.transformable.appendChild(vis.node());

  this.transition = function (destination, fill) {
    color = fill ? d3.interpolateRgb(fill, fill.darken()) : color;
    vis.selectAll("path")
      .data(function() {
        o.transitTo = o.transitFrom;
        return o.transitFrom = destination;
      })
    .transition()
    .duration(2500)
    .attr("fill", function() { return color(Math.random()); })
    .attr("d", area);
  }
};

// Build the window with its menu and additional tool
streamWin.build({
  x : 100,
  y : 100,
  width : 600,
  height : 420,
  menu : {
    transitions : {
      title : "Transitions",
      items : {
        streamLayers : {
          string : "Stream Layers",
          active : true,
          check : true,
          exclusive : true,
          fn : function () {
            streamWin.transitTo = (streamWin.transitFrom == streamWin.data0) ? streamWin.data1 : streamWin.data0;
          }
        },
        streamWaves : {
          string : "Stream Waves",
          active : true,
          check : false,
          exclusive : true,
          fn : function () {streamWin.transitTo = streamWin.data2;}
        }
      }
    }
  },
  tools : {
    streamGroup : {
      separator : true,
      transition : {
        symbol : {
          symbol : pergola.symbols.transition,
          x : 6,
          y : 11
        },
        quickTip : {tip : "Apply transition"},
        ev : "mouseup",
        fn : function () {this.owner.transition(this.owner.transitTo);}
      }
    }
  },
  contains : function () {this.contents()}
});