I have a line graph in d3, and we need to implement specific zoom levels, similar to Google maps. I want a mouse wheel zoom in action to snap/transition to the next possible inward zoom level, and a mouse wheel zoom out action to snap/transition to the next possible outward zoom level.
My setup for the zoom method is similar to everyone else's:
self.plot.call(d3.behavior.zoom().x(self.x).y(self.y).on("zoom", self.redraw()));
But I don't know enough about d3 (nor do I have tons of time left...) to know how to set this. Any tips/help?
You can change your zoom event listener to interject the event and adjust the scale as you like (e.g. round to the next integer). There's a blog post that explains a bit more here.
This is a bit more work than simply attaching the zoom behaviour to an axis, but d3 doesn't offer anything to restrict the zoom levels out of the box.
Related
I'm using plotly.js to plot real time data. I'm using the extendTraces method to do so. As can be seen, as new data comes in, the number of points on screen increases, and the graph condenses. I'd like to have the graph pan automatically to the right at a certain point (say 20 points). I was looking at the possible events for this in the documentation, it would seem after_plot would be my best bet though I don't know if extendTraces creates an after_plot event. Either way, is there a function to automatically pan the chart? I can't seem to find this information anywhere.
It was not intuitive for me to find this so I can see why you had trouble finding the answer. But it appears that zoom and pan are controlled by the range attribute of one of the axes attributes. If you want to zoom or pan on the x axis, you need to change the range attribute on the xaxis attribute of the layout.
I have problems with a multitouch library, in this case Interact.js, which e.g. generates a pinch / rotate for a target although one of the two pointer events is outside the target when the gesture is started. That doesn't do me any good.
I wonder if it makes sense to rely on a library or to create the 2 gestures, drag and rotate, myself.
In order not to start all over, there is an example for this, i.e. to determine the mathematics of the rotation from the movement of 2 points, I have managed the relevant pointers so far.
Many thanks in advance.
I've been searching for hours for a tutorial on how to re-create the map/chart functionality displayed on this page.
When you hover your cursor over the histogram chart at different points (which shows elevation) it moves a pin/cursor on the google map to indicate what point on the map the elevation relates to.
Hard to explain but easier if you click on the link and see for yourself.
https://www.greaterhobarttrails.com.au/track/north-south-track/
map & chart
Any guidance is appreciated.
Thank you for your time.
John.
Below are just some guiding points, how to approach this task(probably not the best solution, but should work).
As the first requirement in your path array each point should have three properties - latitude, longitude, elevation.
To build the chart you need to use some of the chart libraries - it should support the mouseover event (here are some examples for chart libraries - https://www.sitepoint.com/15-best-javascript-charting-libraries/). Y-axis is elevation, X-axis can be distance from the beginning of the path(distance should be calculated for each point beforehand).
As the third step you need to show your path on the map - to do that you can use google maps api (https://developers.google.com/maps/).
In the end you need to connect chart and map, you need to subscribe for mouseover event from the chart. When handling that, you're interested in which path point is currently hovered by user. Afterwards you can take coordinates from it and add a marker on the map based on these coordinates.
I can point you to the right direction with some helping methods from my own plugin pathAnimator:
You need to attach a mousemove event on the bottom element (in your specific example) so you can get the x percentage (from 0 to 100).
using the above value, use pathAnimatorm or any of it's methods, to position your marker element on the path of the map at the right point.
you can use pointAt method for that, check the demo at the link above and you'll understand how it's done.
Was wondering if there is a way in the dygraphs to enable draggable points in the sense that when a graph has been generated the user can drag (down or up) a specific point in the graph and the graph will adjust accordingly ?
Is there a way to emulate such a behaviour in Dygraphs ? Haven't found any information about that.
This is possible, but there's no out-of-the-box support for it. You'd have to write your own interaction model to catch the initial mousedown event and subsequent mousemove and mouseup events. You'd probably implement this by changing the underlying chart data during the drag.
Note that click+drag already has a meaning in dygraphs: it zooms the chart.
I'm new to leaflet, looking for some advice.
I'd like to create an animation of a marker of some sort (for example, an html5 filled arc or shape) to replay GPS tracks on a map. I may want several animated markers and I want to stay flexible with the behavior and performance. Can anyone recommend a good way to go about creating this type of animation?
It looks like I could create a canvas layer (L.TileLayer.Canvas) and draw on it using a technique for linear animation (e.g. http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/), but I'm not yet sure if this works, or if I need to call redraw() and how the performance would be. Or I could try and make customer markers and move them by setting the lat/lon on them at some interval.
Has anyone come across this and can recommend a solution (above ideas or other)? Ideally as I change zoom levels, the animation will "scale" and have good performance. Thanks!
The RaphaelLayer plugin lets you create some pretty fancy animations:
http://dynmeth.github.com/RaphaelLayer/
yes there are a couple of ways to approach the problem...
drawing onto an interactive map is challenging because you need to recalculate your position on pan and zoom events; in addition to managing your actual animation.
This is an excellent example using the D3 library to manage the animation in a continuous loop, you may be a able to modify the code for multiple animations.
http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/
If you want a little more of the knuts and bolts of how the drawing process works then this project might be a better starting point
http://bl.ocks.org/Sumbera/11114288#L.CanvasOverlay.js
This grabs the overlay pane (a leaflet canvas which you can draw on) and... draws on it...
and you will absolutely want to check out this link which describes the drawing process for an interactive map