Developing d3 visualizations

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:

1. I start a gist 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
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 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').