Creating bar charts on a resizable panel. Several questions

[Gilbert Mizrahi]

I am developing a proof of concept to create a visualization that allows filtering data on multiple dimensions using D3 and Crossfilter.

Most dimension are represented by panels with a list of categories shown as bar charts. (see http://mylinerider.com/D3/ImportExport.html)

The current panels are made of SVGs, but I want to be able to drag the panels around (by dragging the panel title area) and I want to be able to rezise the panels as well.

So my questions are:

• How can I drag each panel only when dragging the tilte area? I have been trying adapting code from many places including:
  
• https://gist.github.com/biovisualize/1197731 but I have no idea how to handle nested elements.
  
• How I can resize the panels? And if the number of bars don't fit (heigth), manage the overflow by adding a scrollbar.
  I don't think this is possible if the panel is a svg file. I tried to make an HTML panel with divs and using jquery-ui libraries, but it doesn't work (the scrolling part when adding the svg bars via D3). Anyone has suggestions or code that I can try?
• If the number of categories per dimension is large and most of them are not visible on the panel witouth scrolling, is there a way to handle virtualization of the bar charts?
  What I mean hear is that the bar charts that are not visible will not be rendered at all. They will be renderend only when the user scrolls (or resizes the panel).
• Can I make a generic panel object that I can reuse depending on the number of dimension that I have in the application? Something similar to what enjalot has done with http://bl.ocks.org/enjalot/5754673 D3 sticker plugin, but for an HTML component

Thanks.