My company currently has an SVG graphing library an in-house engineer has developed (following the spec laid out in Wilkinson's Grammar of Graphics), which they are keen on reusing in a browser-based data exploration tool. The only thing is that this library serves up static SVG images without any support for interactions.
I'm looking to replace some of the home-baked code with Apache Batik, and augment the graphs with a javascript library to supply interactivity through d3.
For example, a scatter plot would generate on the server side with known css classes, and be included in an html page the user would access, which in turn would utilize d3.js and our javascript library. On load we would select the graph and add the proper mouseover/click/zoom/etc. handlers.
This seems like it will work in theory, but I'm wondering if we're overlooking something. Is this is a valid/reliable way of doing things, or should we be focusing on one library for creating interactive graphs rather than two?
The area I think might become problematic is with streaming data. It seems to me that we could start with a static graph, but once you start dynamically creating points/lines/etc., you really need to know what rules the graphic abides by (e.g. which variables actually map to a graphed line, its color, etc.), which makes it seem like redundant definitions are needed on both server and client side.
So...what do you think?
There's nothing in D3 that assumes or requires you to start with an empty page/SVG. It is perfectly valid to start with existing elements and modify them. In essence, the only difference is that you're omitting the initial step in most examples where the elements are created.
The only thing to worry about is that the right data gets bound to the right elements, which, depending on how complex the assignment of data to DOM elements is, may or may not be problematic. In principle, your code would like this.
var selection = d3.select("#existingSVG").selectAll("text").data(dataForText);
This gives you your standard D3 selection with enter, update and exit parts which can be operated on like you would do normally. You may need to specify a key function to .data() if your data binding is complex. The procedure is the same for streaming data.