I find it immensely useful to develop [d3](http://d3js.org/) 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:

1. I start a [gist](http://gist.github.com) with a `README.md` file to describe the requirements along with any sample design mockups as an embedded image for a reference.
2. I then clone that gist locally.
3. I add a simple `index.html` and a `chart.js` to the repo
4. I start a skeleton of a function as described in [Towards Reusable Charts](http://bost.ocks.org/mike/chart/)
5. I add some sample data in a `data.csv` file.
6. Make an initial commit to mark my starting point.

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](http://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 `g` or `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: `tooltip.attr('pointer-events', 'none')`.