Strategy for aligning graphs vertically and horizontally using javascript

Question

I would like to align different views of the same data set using javascript ( d3.js in particular). This will eventually be interactive, but I am including a static example to show what I mean. The contour plot and the two slices/projections (corresponding to the cursor in the contour plot) need to remain aligned/in register.

I'm in need of a suggestion about a strategy to accomplish this, or perhaps a pointer to an example. The majority of the examples I have studied have graphs which are loosely related and don't need to be aligned, and those that do align do so in the vertical direction. The horizontal direction seems much more challenging. I saw this SO question which may be relevant, but I was hoping there was a pure javascript means of ensuring the alignment.

I wish I could give you some sample code I already tried but I'm really so early in this process I'm not even sure which way to go. Vote me down if you must but I'd sure appreciate some suggestions.

Answer 1

While its not a complete solution to your problem, I thought I would help you get started with an overview and simple (if a bit contrived) example:

http://jsfiddle.net/TxZK3/3/

In this example, I've taken a contour plot--straight from the D3 examples page--and placed it side-by-side with a copy of itself. The CSS doesn't reflect how you would implement this exactly, but rather illustrates that such a thing can be done and further that maintaining the same scaling for the SVG viewspace is how you can properly line things up. In short:

1. Create 2 SVG's with the same width and height
2. Use CSS to move them next to each other

That setup is exemplified by the following snippet:

var margin = {top: 20, right: 20, bottom: 30, left: 30},
    width = 960/500 * 150 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom;

These values are shared by both SVGs in my example and thus mean they draw into the same sized space.

After that, it will be a matter of creating a different visualization within each SVG space. When you create axis' and draw things into each SVG, D3 will scale them appropriately. Once the base graphs are setup the last piece of the puzzle will be making sure that each graph has the appropriate corresponding data to match each visualization. In your situation that would entail computing partial x or y over the same available axis as the main graph.