I find it immensely useful to develop d3 visualizations as simple stand alone functions / documents before attempting to integrate them into a site.
I have started using the following workflow and it's been working out great:
README.mdfile to describe the requirements along with any sample design mockups as an embedded image for a reference.
chart.jsto the repo
From here, I just start building out the visualization I want. To preview things locally, I run:
python -m SimpleHTTPServer 8888
Once I am satisfied with progress, I commit, and then push to the gist. The nice thing about hosting in this format in a GitHub gist is that you can use the bl.ocks.org service to get a nice preview of your visualization.
When you are creating layers in your visualization, you add the top most objects last, like an upside down stack.
This stacking can create problems when you have overlapping elements that might not be visible all the time.
Example: A tooltip
rect that has an
opacity: 0 that should only appear when hovering over a certain part of your visualization. The part where the tooltip is will catch the
mouseover (and other) mouse events blocking an area of your visualization.
You can avoid this behavior by setting
pointer-events="none" on your tooltip object like so: