Multiple D3 documents

An in-depth analysis of this work can be found in the book “Building Web Applications with SVG” (Microsoft Press).

View as standalone SVG

View other D3 examples in windows: dragon-firefly.svg; ray.svg; phoenix.svg; worms.svg

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

An example of interactivity between the “Force” and “Stream” windows is also implemented: a click on any member of a particular group (of characters in Victor Hugo's “Les Misérables”) in the Force window triggers a new transition (with the group's color) in the Stream window, where the D3's types of transition “Layers” and “Waves” are selectable through the Transitions menu.


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