Reusable D3 Charting: Part 2

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:

ScatterplotAndLineChart

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.

ScatterPlot

The scatterplot is configured and rendered via:

ScatterPlotSetup

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.

Line Chart

The line chart is configured via:

LineChartSetup

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.

ConnectionSetup

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:

That’s it for now…

– Pat

Advertisements

About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s