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!
Related
I am trying to figure out how to create different zoom factors on the X- and Y-axis in d3. It seems to be created with a single zoom-factor for both axis, and basically I would like to know if there is a way to separate them.
The basics is simple enough: There is excellent support in d3 for an even zoom-effect on x- and y-axises. It is also easy to turn off the zoom for one axis. But I cant find a way to create this intermediate effect. The goal is to have the y-axis zoom 10 times more than the x-axis for each mouse wheel zoom-event.
I have no actual code to show, since I dont know if it is possible. Perhaps a useful hint, is that I work with D3 version 5. The usual, more or less standardized zoom code is used.
Let's say I have a standard tiled map like this: http://bl.ocks.org/mbostock/4132797
How can I get the bounding box coordinates of the visible map?
In other words, how can I say exactly the extent of the map shown at any given time. I understand this as a bounding box but also as an extent.
Thank you.
I was able to find answers to similar but specific questions but am leaving this up in case someone is searching for the general case.
From Elijah Meeks's answer:
To find the bounding box of the visual area of your map on screen,
simply use the projection.invert() function and feed it the top-left
and bottom-right corners of your SVG. If you have a 500x500 SVG, then
that looks like this:
projection.invert([0,0]) projection.invert([500,500]) This is a
bounding box of your screen, in lat-long (or whatever coordinate
system you're using).
After that, you can get the bounds of your features and test to see if
they are fully-contained or intersecting or have their centroid within
those bounds. I'm not going to explain how to do that here, because
that's a different question with many different answers depending on
which definition of "within these bounds" you decide on.
So, plug in the width and heightof the visible area into the projection generator. Voila, you have the box.
I have a scatterplot created with d3. The circles/points are all the same size. The grid goes from 1-10 on both x and y axes. All points have x and y values of whole numbers (no decimals).
My problem is that I frequently have multiple data points with the same coordinates. Because the points are all the same size I can't tell how many points are at a single spot.
My points have tooltips, one for each data point. So, I was thinking that it's OK to show only a single point/circle if I can show a tooltip that contains information about all points with the same x/y coordinate. I can't think of a way to do that though because the tooltips seem to be generated for a single point, not "for all points at the same coordinate", or generated dynamically.
How can I do this?
As #LarsKotthoff mentioned, aggregating my data before rendering and adding a key function to identify each aggregate were the two steps needed to get everything working properly.
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.
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?