Looking for Cartesian Fisheye Heatmap example

[John]

I would like to create a heat-map grid that distorts based on mouse position like the (bottom) Cartesian fish-eye example shown here: Fish-eye Distortion
Here's a mockup of what I'm attempting to do.

Is there such an example floating around, and if not, are there any technical challenges preventing such a thing from existing?
I am hoping that adding the colored boxes (and adding a text value) per "cell" would still be performant on say a 20x20 grid.
 

[Ian Johnson]

here's another example of a fisheye, this one manipulating squares:

http://tributary.io/inlet/6198373

it would need a little work to make it match your mockup, but its just about positioning and sizing rectangles properly. you can assign data and color them to make a heatmap.

here is my literal interpretation of fisheye: http://tributary.io/inlet/4102812/

i made a video a while back about the fisheye plugin:

http://www.youtube.com/watch?v=dKmIv7JlyVo&list=PLI_sHchSmdCC2Yg2IXzhGUc2V6dfZK_dV&index=9

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Ian Johnson - 周彦

http://enja.org

[John]

Hey Ian, 

Sorry about the SF weather, and thanks for the examples. I was able to cobble together something from your example, and the one on Mikes page that at least shows performance is not a problem. I switched to jsbin for testing. It doesn't allow you to add a separate js file, so I stuffed the fisheye plugin at the top of the JS file. Just skip below it for my code.

http://jsbin.com/ojodaj/6/edit

The graph still doesn't work exactly right. I attached the positioning to the x and y values of the rectangles, but now realize that I should have positioned using transform on the groups and then just offset the rects so they would stay centered. 

thanks for pointing me in the right direction.

[John]

OK, I got it to work (with one caveat)
 
It is AWESOME in Chrome and IE10, but Firefox updates so slowly it's painful.

http://cdpn.io/nIKHB


I'm hoping this is not a Firefox SVG rendering issue.
Anyone know a good tool for troubleshooting the slowdown?
Otherwise, I'm reluctantly considering re-implementing with d3 and canvas.

[John]

I got to thinking about the performance discrepancy, and wondered if Firefox just had really bad SVG performance, so to test this, I rewired the example to use colored divs:

http://cdpn.io/thpwH

Surprisingly, the performance sans SVG is the same. e.g., Chrome and IE update very quickly and Firefox lags so bad, it's unusable.
I tried profiling the code using Firebug, but since everything is inside a closure, it's not much help. Any thoughts on speeding this up?

thanks,
-J

On Friday, August 9, 2013 6:06:10 PM UTC-7, Ian Johnson wrote:

[Ian Johnson]

you could quickly see if its a rendering issue by not actually updating any rendering code and only calculating the fisheye.

from there you could add back rendering code piece by piece.

you can turn it into a standalone example and cut/paste the fisheye code into your main scope pretty quickly as well for easier profiling no?