We Keep Coding

Adding a transition effect in EventDrops D3

I am using EventDrops for displaying an event series.
I am new to D3 and I am having tough time understanding the code.
Using Eventdrops we can zoom in and out in the time series.
Now I want to add a transition that on load the events should be fully zoomed in and then slowly zoom out.
How can I do that?
I am not able to trigger the zoom effect on the SVG element.

drawing circles on a map while the user is scrolling

I would like to build a very similar (duplicate) as this one. Just the first part where circles show up on the map. Any ideas where I can start? Any jquery plugins that do this?
https://www.airbnb.com/annual
If there aren't any plugins can you give guidance where I should start? Any examples are greatly appriciated.

Just bind an event handler to the scroll event. Get your position from $(window).scrollTop(), and with this information draw and/or resize your array of circles as needed.
There are ways to get the effect on the site without Canvas. You can use position:fixed divs with high border-radius to create circles, and you can resize them and reposition them with JQuery. You can also use SVG, with which you can create an array of all the circle objects at radius 0 initially and increase or decrease the radius with the scrolling effect (or your data set). If you do use canvas, you may need to be prepared to re-render the entire canvas on every scroll tick, since it will be difficult to get the circles to "shrink" otherwise. This will probably make your scrolling choppy, just as it is for me on the site.

Animating div on top of Highcharts very slow

I am writing an app that uses Highcharts, and in one instance I want to have a "slider" at the bottom of the chart that extends up vertically over the chart. Moving the slider will update other parts of the page based on where the user moves the slider on the chart.
The problem is that when drawing anything on top of the Highchart (image or a div) the performance becomes absolutely unacceptable. The slider simply cannot keep up with the mouse movements See a jsfiddle here. Note - this only happens when working with a large number of data points (which is absolutely unavoidable in my case).
Is there anything that I can do, short of not drawing on top of the chart?

I suspect the slowness is because the browser has to redraw the chart (either the whole thing or parts of it) as the div slides over it. With a large data set to redraw the chart from, this becomes annoyingly slow.
There are solutions, but not all of them are always acceptable:
You can try reducing the number of points in your data set by sampling it at a lower rate.
You can try windowing, so that the viewer only shows a range within the entire set. For example, if you have 10,000 data points your window can slide along the data set, showing only 1,500 points at a time as opposed to all 10,000 points.
Move to a different technology such as Flash or Silverlight.
Like I said, though, not all of these or even any of them will work for you.

I noticed that when you drag the slider over the graph it still highlights the datapoints. You probably should set pointer-events:none on that part of your chart while dragging the slider, that will allow browsers to not check pointer-events in that subtree (which if you have a lot of datapoints can be somewhat expensive, especially if you update these elements on hover).

Can a canvas within a canvas easily be cleared from the main canvas?

I'm currently working on an interface where I have a primary canvas that is 800x800 in size. At the top I've generated a bunch of icons. When a user mouses over the icons at the top, it matches his mouse's x and y coordinates to determine if he is currently hovering over any of the icons. If he is, I want to have a hover effect where a label appears next to the mouse with the name of the icon. As he moves, the label follows the mouse. If he leaves the icon or moves to a different one, the last one is cleared, and either there is no label displayed (if the user moved off all icons), or another label is displayed next to the mouse in the last one's place (if he hovers over another icon, the width of the label is a variable length depending upon the width of the text).
The process of ordering and displaying these icons all occurs within a separate object from the rest of the canvas renderings, thus I wouldn't exactly want to re-render that entire object to display the icons every time a mousemove event triggers, so I'm wondering if there's a way to draw to another "temporary" canvas' context and whether or not that could be easily cleared. as the mouse moves so there isn't any trails left behind on the primary canvas? Can anyone point me in the direction of an example like this or advise me on how I should go about accomplishing this sort of task?

Yes you can certainly draw it onto a temporary (in-memory) canvas. This is done a lot of various reasons, and yours may be valid (especially if you don't have any background that changes). But it may not be the easiest to implement, its hard to say without knowing more about your app.
There's a decent alternative you should consider: you could have two canvases that are 800x800 in size overlaid atop each-other. This can be useful for some applications (like games) where there is a background, foreground, and middle-ground that all have different moving parts (but the background parts move rarely, and foreground isn't always present, etc)
In the same way, you could "layer" your canvas app, with the icons being on one canvas, and the background and other parts of the app being on the other canvas.

Implementing zoom buttons using d3

I am trying to develop a graph visualization webpage using d3, and I
need to provide basic zoom and pan functionality over the graph.
I saw the d3.behaviour.js file to see how the zoom functionality
works. It is fine as far as the default behavior goes. But is there
any way by which the zoom function can be called manually, lets say by
attaching it to zoom it and zoom out buttons.

Zoom behavior in d3 seems very tied to the mouse events.
A workaround you can do is manually firing 'mousewheel' (ie/webkit) and 'DOMMouseScroll' (firefox) events when you click a button.
You can see an example on how to register and dispatch these events here: http://jsfiddle.net/6nnMV/

I think you just need to get the current scale, increase/decrease by one, and then set it back https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-scale.
After that, employ https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-event to update the visualization with the new scale.