Canvas implementation of Circle Packing is jittery when zooming - javascript

I'm trying to learn canvas (to improve a visualization I made a few weeks ago in D3.js which is very slow due to many DOM elements: http://nbremer.github.io/occupations/). I managed to make a canvas based circle packing in which you can zoom, but it's rather jittery while zooming: http://bl.ocks.org/nbremer/667e4df76848e72f250b
Does anybody have any suggestions on how I can improve this? I tried d3.timer and am now using requestAnimationFrame, but that doesn't seem to make a difference. (Once I manage to get this working, I still want to add the small bar charts that are packed in each white circle as in the original example)
Thank you!

Related

Fabric.js / canvas infinite background grid like miro

Cheers community,
finally, I got my first question here on StackOverflow and it's all about "infinite grid" with fabric.js - if you have any feedback on my question pls hit me up!
The Project:
I try to develop a little drawing tool with fabric.js and wondering how I can implement an infinite background grid like miro has.
My requirements or personal goals to this project/question:
Zooming in and out - resize the grid like miro
Panning also affects the background grid like miro
Dynamic Canvas size -> if I resize the browser, the grid is also fitted canvas with /height
Found a lot of useful links but without zooming, panning, resizing or with a bad performance. If you have any "best practice" hints, links or ideas pls share with me :-)
Thx for your time and help!

How do I use collision detection to fix overlapping images with d3.js?

I'm trying to display a large number of images on a d3 display using T-SNE. The x and y coordinates are pre-calculated, the location on the svg area is adjusted using using translate/zoom.
At the moment they all display using the precalculated coordinates.
and they remain in place as zooming/panning.
I'm looking to use collision detection (like this example) to adjust the images locations slightly so that they don't overlap, but as much as possible maintain the rough global structure.
Here's my attempt so far
https://gist.github.com/GerHarte/329af8ee5ffd8a1f87c5
With this it loads as in the image above, but as soon as I pan or zoom, all the points expand out hugely to a completely different location on the canvas and look like this, they don't seem to overlap, but they're extremely far apart.
Is there something wrong in my code or is there a better way to approach this?
Update:
I followed Lar's answer here, with the slight addition of setting the raw data points to where Lar's code settles since the points are translated when zooming or panning. The results look great (see below), but for a larger number of points (5000+) it seems to crash before converging on a final result.
Are there any suggestions to improve the efficiency with this approach? Going to try the Multi-Foci Forced Directed approach.

Profiling Threejs app

I have a webgl application, I've written using threejs. But the FPS is not good enough on some of my test machines. I've tried to profile my application using Chrome's about:tracing with the help from this article : http://www.html5rocks.com/en/tutorials/games/abouttracing/‎
It appears that the gpu is being overloaded. I also found out that my FPS falls drastically when I have my entire scene in the camera's view. The scene contains about 17 meshes and a single directional light source. Its not really a heavy scene. I've seen much heavier scenes get render flawlessly on the same GPU.
So, what changes can I make in the scene to make it less heavy, without completely changing it? I've already tried removing the textures? But that doesn't seem to fix the problem.
Is there a way to figure out what computation threejs is pushing on to the GPU? Or would this be breaking the basic abstraction threejs gives?
What are general tips for profiling GPU webgl-threejs apps?
There are various things to try.
Are you draw bound?
Change your canvas to 1x1 pixel big. Does your framerate go way up? If so you're drawing too many pixels or your fragment shaders are too complex.
To see if simplifying your fragment shader would help use a simpler shader. I don't know three.js that well. Maybe the Basic Material?
Do you have shadows? Turn them off. Does it go faster? Can you use simpler shadows? For example the shadows in this sample are fake. They are just planes with a circle texture.
Are you using any postprocessing effects? Post processing effects are expensive, specially on mobile GPUs.
Are you drawing lots of opaque stuff? If so can you sort your drawing order so you draw front to back (close to far). Not sure if three.js has an option to do this or not. I know it can sort transparent stuff back to front so it should be simple to reverse the test. This will make rendering go quicker assuming you're drawing with the depth test on because pixels in the back will be rejected by the DEPTH_TEST and so won't have the fragment shader run for them.
Another thing you can do to save bandwidth is draw to a smaller canvas and have it be stretched using CSS to cover the area you want it to appear. Lots of games do this.
Are you geometry bound?
You say you're only drawing 17 meshes but how big are those meshes? 17 12 triangle cubes or 17 one million triangle meshes?
If you're geometry bound can use simplify? If the geometry goes far into the distance can you split it and use lods? see lod sample.

Draw Zoomable Time Line With Scroll Bars On Html5 Canvas

I need a Time Line For My Web Project.
Something like this - I read the code of this Time Line but did not understand it because it is not documented enough.
My problem is the math behind all of this (not the interaction with the canvas).
I have read several articles about the math of the scroll bars, but none of them talk about zoom.
Some
articles suggest to hold canvas element with very large width value - and to display just the
View Port.
I don't think that's the right way to do it - I want to draw just the correct viewport.
In my project, I have array of n points.
Each point holds time value represented in seconds, but not all of the points are within the Viewp Port.
Considering the current zoom level, how do I calculate:
What points should be drawn and where to draw them?
What is the size and position of the thumb?
Any articles / tutorials about such a thing?
You might be able to use something like Flot which handles the placement of points, as well as zooming and panning. Here's an example of that.
There are a bunch of other drawing libraries, here a good list.
You always have Raphealjs.com , one of the most used library to play with SVG, with this you can write your own js to generate the timeline.

What Javascript graphing package will let me plot points against a user-selected coordinate system?

My customer has some specific requirements for a graph to show in our web app. We use HighCharts elsewhere in the app for more traditional graphing, but it doesn't seem to work for this situation. Their requirements:
Allow the user to select a background image, set the scale and origin of the coordinate system. We'll graph our points against the user-defined coordinates.
Points can be color coded
Mouse-over boxes show more detail about the points
Support for zooming and panning, scaling the background appropriately
Less importantly:
Support for drawing vectors off the points
Some of this seems basic, but looking around at different graph packages, I was unable to find any with an example of this kind of usage.
I've entertained the thought of just hacking it together in canvas myself, but I've never worked with canvas before so I don't think it would be cost effective. The basics of plotting points with a scaled coordinate system against an image background wouldn't be too hard, but the mouse-over details, zooming and panning sound much more daunting to me.
More info: Right now we use jQuery, HighCharts, and ExtJS for our app. We tried flot in the past but switched to HighCharts after flot didn't meet our needs.
this looks promising:
http://danvk.org/dygraphs/
And this seems to have what You need, but it's not free:
http://www.ejschart.com/

Categories