https://thoughtstreams.io/paltman/developing-d3-visualizations/Developing d3 visualizationspaltman2014-06-16T19:24:09Zhttps://thoughtstreams.io/paltman/developing-d3-visualizations/#card-4922This stacking can create problems whe...2014-06-16T19:24:09Z2014-06-16T19:24:09Z
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')`.
https://thoughtstreams.io/paltman/developing-d3-visualizations/#card-4921When you are creating layers in your ...2014-06-16T19:21:31Z2014-06-16T19:21:31Z
When you are creating layers in your visualization, you add the top most objects last, like an upside down stack.
https://thoughtstreams.io/paltman/developing-d3-visualizations/#card-4800I have started using the following wo...2014-06-04T19:25:43Z2014-06-04T18:16:51Z
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.
https://thoughtstreams.io/paltman/developing-d3-visualizations/#card-4799I find it immensely useful to develop...2014-06-04T18:02:50Z2014-06-04T18:02:50Z
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.