D3: mouseover text changes within an area in sunburst - d3.js

I have a sunburst code here: http://plnkr.co/edit/EG0MzWEPB242g7VdSQQd?p=preview
When I click the orange area that corresponds to "from tumor cell" (see the caption below in the diagram), I get focussed diagram centered on "from tumor cells".
When I mouseover the area in the region marked "Liver or Pancreas", the texts in the caption box below changes while it should not. I suppose this problem is only in the second and third quadrant (90 degree to 270 degree). I couldn't find a way to solve this problem after spending so much time.
I hope some one has an answer to it.

The problem is that you're attaching the mouse over handlers to the g element, which isn't updated when you click on a segment. The easy way to fix this is to attach the handlers to the path elements, which do get updated, instead. In that case you probably also want to set the text elements to receive no pointer events so that there are no spurious mouse events when moving over them.
Complete demo here.

Related

Grow a Diagonal Arrow in Powerpoint

On my slide I have a map of the South during the Civil War. I want to place a thick arrow pointing to Atlanta from the Northwest. I then want to create an animation where the arrow moves Southeast towards Savannah over the period of a few seconds, with the rear of the arrow remaining where it started, and the head of arrow proceeding Southeast as I described. The point is to illustrate Sherman's March to the Sea.
I seem to be able to move the arrow using a motion path, but I seemingly can't grow the arrow in any other way than horizontal or vertical (not diagonally). I also tried adding a rectangle object, and adding a wipe entrance effect, but wipe seems again to only allow its effect to happen from 90 degree angles.
Can anybody help me figure out what should be a seemingly easy task? I am using Powerpoint 2013.
One way to do this would be to use multiple arrows with different lengths and the animation feature. First make all the arrows invisible.
1. Make the 1st arrow appear with a left click trigger. This becomes the *current* arrow.
2. After the required delay, make the *current* arrow disappear while making the *next* arrow appear.
3. Repeat step #2 above until done.
Depending on your background, this might work. Put a box over the diagonal arrow the same color as the background, without boarders. Now animate the box with a motion path to the southeast, allowing your arrow to be revealed. If the box is an issue, combine the motion path with a wipe disappear from west to east, on a 0.25 to 0.5 second delay.

Zoom on graph jumps to random point with d3js

I am learning d3js and trying to incorporate zooming/panning features on a graph, however on the initial zoom event it jumps to a random spot and zooms in. After that, the zooming and panning work as expected. Why is the initial event moving the starting point and adjusting the scale oddly?
Code and example here: bl.ocks.org/dbaileychess/7570631
This is because the zoom behaviour is attached to a different element than the one you're zooming. It determines the position of the mouse cursor relative to its own position and passes that information to the callback. If you're zooming a different element, the relative coordinates are no longer correct.
To fix, add the offset between the elements that the zoom behaviour is attached to and the elements you're zooming to the translation. This question has come up a number of times already, see e.g. here.

Custom shaped NSButton

I am trying to create eight custom buttons (NSButton) in Xcode 4.6.3. Those are the segments of a circle. I used a standard rectangular button for each of them, adding a custom image for each segment. However, when I put the pieces together in one circle, there is no way to click some of these buttons, as the rectangular areas around each of them overlap, and prevent from reaching the other half of the buttons.
I was wondering if there is any way to make the button shape at least triangular, such that I can click on all of these buttons?
From the documentation "View Programming Guide":
Note: For performance reasons, Cocoa does not enforce clipping among sibling views or guarantee correct invalidation and drawing behavior when sibling views overlap. If you want a view to be drawn in front of another view, you should make the front view a subview (or descendant) of the rear view.
In other words, you can't expect overlapping views to process mouse events properly. There's no way of getting around the fact that views occupy rectangular frames. You have to make a single view which performs the work of all of your circle segments (including drawing and event handling, and optionally mouse moved events). YOu will have to use trigonometry to calculate which segment a mouse click occurs in, and respond appropriately as though a button were pressed, by re-drawing the segment and invoking the desired action.

jqPlot axis with ticks labeled differently from underlying data

So I am using jqPlot to display distance (y-axis) over time (x-axis) in a simple line graph.
However, while I have actual distances as the underlying data used to position the points, I'm not interested in displaying those distances on the y-axis.
Instead, there are a series of landmarks at given distances, that I want to appear on the y-axis as a 'tick' next to the appropriate point for the distance to that landmark. That way the line appears to "pass" each landmark as it travels upward.
Currently I'm "faking" this by hiding the ticks and putting a manually-created series of labels next to the graph. This works well enough, but I had to disable vertical zooming because if the user chose to zoom in, the labels would not match up with the actual distances. My users would really like to zoom in vertically, however, and I want to allow them to.
Therefore, does anyone know of a way (a plugin or similar) that would allow me to associate custom labels with given tick marks in jqPlot, that will match up nicely and respond to zooming? It would be necessary to hide some of the landmarks if the graph is zoomed out too much, so that would have to be a feature.
Alternatively, if someone knows of a "zoom event" that passes in the min and max y values, I could probably recreate my manual labels with that data, so let me know if you know of a way to get that information. I haven't been able to find one.
I would need to see a bit of your code to customize it to the distance but to start with you could label the ticks and it will display over the size of the chart.
axes:{yaxis:{ticks:['DiscanceA','DiscanceB', 'DiscanceC', 'DiscanceD', 'DiscanceE'],
renderer: $.jqplot.CategoryAxisRenderer,},
Let me know how it goes and if you have any code lets see it!

Getting data from a graph via DataThief

DataThief is a nifty Shareware utility for extracting the coordinates from an image of a graph. After a plane is defined (by marking three coordinates on the picture), one can mouse over the graph to find the numerical coordinates of each points.
Can it be automated? Online documentation seems to be nil.
Follow the color method
First, open up the picture in DataThief.
I found it helpful to zoom in (Action Menu).
Next, I set the coordinates of some reference points on the graph, by moving the colored crosshairs.
The vertical red/green rectangle is a progress bar relating how fit, squared, orthogonal the reference points are.
I placed the Start, Color, and End markers, choose Trace (Action Menu), and then Export (File Menu).
The result was a tidy text file with my data points. Great! Now to capture some useful data.
Scatter plot method
Tracing a continuous graph appears to be just one (the upper right button) of DataThief's four data acquisition modes. Let's match the data points via the scatter plot option (lower right button). Drag the crosshairs from the gray box over each data point.
I am interested in automating this process for a graph with hundreds of data points?
I clicked on the Settings tab, fiddled with some options, and got the next graph via the Show button.
Good, the data are points can be isolated via color recognition.
The question
How do I automate the selection of an arbitrary number of points?

Resources