Exhibit/Coordinators

Exhibit Reference Home »

A coordinator synchronizes selection and highlight among several views. Declare coordinators as follows:

 <div ex:role="coordinator" id="coordinator-a" ></div>
 
 <div ex:role="coordinator" id="coordinator-b" ></div>

Then, hook views into it, e.g.,

 <div ex:role="view" ex:viewClass="Timeline"
     ...
     ex:selectCoordinator="coordinator-a"
     ></div>
 
 <div ex:role="view" ex:viewClass="ScatterPlot" ex:label="Scatter plot 1"
     ...
     ex:selectCoordinator="coordinator-a"
     ex:hoverCoordinator="coordinator-b"
     ></div>
 
 <div ex:role="view" ex:viewClass="ScatterPlot" ex:label="Scatter plot 2"
     ...
     ex:selectCoordinator="coordinator-a"
     ex:hoverCoordinator="coordinator-b"
     ></div>

In this example, whenever the user selects a point on any one of the 3 views, the corresponding points in the other 2 views are also selected (by "select" we mean that, for example, a bubble pops up on that point). Furthermore, when the user hovers the mouse pointer on a point in either scatter plot, the corresponding points in the other scatter plot also react as if they are hovered (e.g., showing tooltips).