Some patterns are starting to come together more coherently as I flesh out a few more components and watch them interact. Here is a good example of where I am headed with respect to chart cross communication:
In this example, brushing the scatter plot will automatically update the line chart. The two are loosely coupled in the sense that they do not know about each other until the user configures an event listener.
The scatterplot is configured and rendered via:
Here we are adding it as a child of our svg with dimensions of 400×400. Unselected nodes will be blue with a radius of 2. Selected nodes will take the default color of red with a slightly larger radius of 4.
The line chart is configured via:
Here we are configuring the line chart to be 400×330 within the same SVG as the scatterplot only offset to the right by 500 pixels.
Connecting The Two Together
Now for the interesting part.
Here we add a listener to the scatterplot plot1. We are listening for events of type “brushend”. When this event occurs, the component generating the event will create an object which will contain the event payload.
In this event handler we simply wipe out the previous chart, update our chart data with the data from the brush event, then update the line chart.
This loose coupling and modular design should make multi-component dashboard design in D3 much easier.
Miscellaneous Other Stuff
Here are a few more examples of reusable components. It’s all pretty rough, but the ideas are really starting to take form now:
- Legends (Vertical and Horizontal) – Demonstrates horizontal and vertical legends.
- LineChart Demo #1 – Demonstrates reuse of a legend.
- LineChart Demo #2 – Demonstrates LineCharts communicating with themselves.
- ScatterPlot Demo#1
- ScatterPlot and LineChart Demo
That’s it for now…