VisJS Zooming Function - vis.js

I have a VisJS graph plotted on top of a map. I want to zoom both in and out in unity with a button. Unfortunately the visjs graph seems to have a weird way of scaling as it seems to be very slight around 1 and much further around 0.5 and 1.5.
I tried finding the function that makes the scaling in visjs but there is nothing in the documentation. There also seems to be no one who has had this problem before.
Any Ideas where I could find a function that fits the scaling to a linear scaling map?
Or a functiont that would doubles/halfs the current graph size?

Related

How to increase click radius in bokeh?

I'm doing some simple plotting and would like to increase the usability of my figure.
I have quite a lot of points on my graph and have issues with selecting the ones I want because the click radius is so tiny.
I can increase the circle radius of my point but the radius of the area which displays a tooltip is still only 1 dot. Can I increase the radius somehow without having to create additional points around which respond the same?
Would it be even possible to increase the click detection radius without increasing the actual circle radius?
in the current version (0.8.2) and in the upcoming version (0.9) this is not yet a tunable parameter. It would be a good feature to expose a click radius, so I have made an issue on our issue tracker, that you can follow, here:
https://github.com/bokeh/bokeh/issues/2230
In the short term, a possible workaround is to have a second, invisible set of glyphs that are used for hit testing. They would be at the same locations, but bigger, to provide a bigger hit area.

How to enable smooth zooming in Bokeh?

I have just starting looking into making my python graphs interactive. Bokeh seems to have a lot of functionality and I am currently trying it out. One thing that I find aesthetically pleasing with the mpld3 library is the smooth zooming after selecting a region with the zoom tool (like in this example). The default behavior in Bokeh seems to be to jump to the zoomed region without without any animation (example, 'wheel zoom' is smooth, but 'box zoom' is not).
Is the smooth zooming feature available in Bokeh and just disabled by default, or is this not implemented?
This is not implemented as of Bokeh 0.8.2, we do plan to add support for animation, key frames, etc. and smooth box zoom would probably best be implemented on top of that.

how to draw filled polygon in Google Maps SDK for iOS

I would like draw a filled polygon on iPhone with Google map (Version 1.1.1, the last one).
Anyone knows how to do like that on ios :
(My code on Android)
mMap.addPolygon(new PolygonOptions()
.addAll(latLngList)
.fillColor(Color.BLUE)
.strokeColor(Color.RED)
.strokeWidth(3));
Regards,
PS : If you have many solutions, keep in mind that I have many Polygon to draw.
The SDK currently doesn't support filled polygons, however there is a feature request to add them here:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5070
In the meantime, one option could be to draw your polygons into an image, and then add them as a ground overlay. This would be very limiting, but might work as a temporary workaround.
Another option is to add another view over the top of the map view and draw the polygons into it, and then update them whenever the map view moves. It isn't possible to perfectly synchronize another view with the map view, so your polygons will lag behind a bit as you pan/zoom around, but this might also be okay for you as a temporary workaround.
UPDATE
These are just some random ideas to try for the ground overlay approach, I'm not sure if they would work, but they might get you started:
I would suggest converting the lat/lon corners of the rectangle into MKMapPoint (using MKMapPointForCoordinate). These are equivalent to Google's coordinate system at zoom level 20.
You can then use the aspect ratio of the width/height of the rectangle in MKMapPoint coordinates to determine the aspect ratio of your ground overlay UIImage. Once you have the aspect ratio, you'll just need to experiment with actual sizes (ie guess a width, calculate the height from the aspect ratio) to find one which looks okay. The bigger it is, the finer the detail of your rectangle will be, but the more memory it will use, and probably the slower the performance will be. Also you might hit a hard limit at some size - I'm guessing the UIImage gets converted by the Google Maps SDK into a texture, and textures have a max size of 2048x2048 on iPhone 3GS+.
Then, use something similar to How to setRegion with google maps sdk for iOS? to calculate a zoom level and centre lat/lon. Instead of the map view width/height you would use your UIImage width/height, and you'd use the bounds of your rectangle instead of the bounds of the desired view. You also wouldn't need to calculate the scale from both the width and height (as the scale should be the same) - so just use one of them. Instead of creating a camera with the zoom level and centre lat/lon, set them on the GMSGroundOverlayOptions. Also set the ground overlay's anchor to the centre of the image (ie 0.5, 0.5).
The above describes how to add one GroundOverlay per rectangle. If you have lots of overlapping or nearby rectangles you could probably combine them into a single UIImage, but that would be a bit more complicated.

CSS: On-mouse-over functionality from plot covered by a 'sheen' layer

I have a javascript plot on my page with "data point highlighter" functionality: when the mouse hovers over the point, you can see the coordinates popup. I also want to place a semi-transparent "sheen" image layer over the plot to make it look glossy. I can achieve this with the z-index, but the on-mouse-over functionality of the js plot stops working. Is there a way to have the sheen layer on top and still have the on-mouse-over of the layer below (the plot layer)? Many thanks...
I can't think of a way to do that easily, apart from splitting apart the plot image and the area that reacts to the mouseover, and placing the latter above the sheen - which may be bothersome to do.
If it's semi-transparent, though, would it be an option to do the whole thing the other way round? Placing the "sheen" below the plot, and making the plot semi-transparent?
This is not possible. Shame.
Actually, I believe it is possible, but it's a bit of a messy workaround, and, in essence, involves capturing mouse/cursor position x/y location and mapping that to the plot layer -- not the easiest or optimal task, let alone completely inefficient. I realize this is an older question, but thought I'd point this out for future users.
Update: Firefox has a CSS property geared toward this in the 3.6: http://demos.hacks.mozilla.org/openweb/pointer-events/

Approaches / libraries for resize dragging

I'm currently working on a WYSISYG editor that allows the user to move, resize and rotate shapes by directly manipulating them. The resizing seems to be fairly complex when the shape is rotated. I got this working for non-rotated shapes, but it will take some trigonometric calculations to resize shapes that are rotated. The registration point is always is the middle of the rectangle because this makes rotating a lot easier.
Before I start implementing this, I was wondering if anyone knew of any libraries or sample source code that does this, or could share some tips and tricks to calculate the transformations.
I have the following parameters:
rotation (in degrees)
width, height
x, y
mouseX, mouseY
I attached a screenshot of what I'm trying to accomplish and another one that has some lines drawn onto it that should allow me to deduct the trigonometric calculations. The cross is the cursor.
alt text http://www.herrodius.com/images/resize.jpg
alt text http://www.herrodius.com/images/resize_lines.jpg
You might look at flex-object-handles, in particular the more recent version 2.
I recommend Transform Manager - http://www.greensock.com/transformmanageras3/
It's actually not that hard. Use the mouse coordinates (mouseX / mouseY)from the rotated display object and they will be transformed for you!

Resources