I cannot seem to find any support forums for his plugin...
I have a button which I want to focus on Europe when clicked.
I can focus on regions for example, at the moment I have
$('#map1').vectorMap('set', 'focus', 'GB');
How do I change this to focus on europe?
If you use standard map with miller projection it would be:
$('#map1').vectorMap('set', 'focus', 4.3, 0.5, 0.3);
where 4.3 is a scale, 0.5 horizontal coordinate and 0.3 is a vertical coordinate. You can adjust this values to get the desired result.
Related
Hope everyone is having a good day. I recently built a filter with a camera effect over it but i’d also like to add a plane tracker on top of it (a company slogan texture image). I added in my Facetracker > Plane > add Material and it shows up on my preview screen (the development grid) but it doesn’t appear on a preview of the filter (mockup screen with my face). I am not sure why this is happening and I don’t know how to fix it.
If anyone has any has any solutions it would be very helpful. I am open all suggestions.
Thanks so much!
Face Tracker shows up on my grid but not my actual effect/filter
Use this: Facetracker > Canvas> Rectangle > add Material
Click on Rectangle and on the right panel, click on the 100% on the Width and select Fill Width & the same on height but Fill Height
It isn't appearing as planes are for 3D materials for positioning these 3D materials anywhere in the scene
A rectangle provides a space to apply 2D materials and must be a child of a Canvas
Also, You can't have a plane tracker under a face tracker as the plane is an infinite horizontal tool
This is the standard MKT expression (here also translated to Proj.4 string) of Albers conicEqualArea for official Statistical Grid of Brazil:
PROJCS["Conica_Equivalente_de_Albers_Brasil",
GEOGCS["GCS_SIRGAS2000",
DATUM["D_SIRGAS2000",
SPHEROID["Geodetic_Reference_System_of_1980",6378137,298.2572221009113]],
PRIMEM["Greenwich",0],
UNIT["Degree",0.017453292519943295]],
PROJECTION["Albers"],
PARAMETER["standard_parallel_1",-2],
PARAMETER["standard_parallel_2",-22],
PARAMETER["latitude_of_origin",-12],
PARAMETER["central_meridian",-54],
PARAMETER["false_easting",5000000],
PARAMETER["false_northing",10000000],
UNIT["Meter",1]]
The DATUM is the WGS 84 ("SIRGAS2000" is a alias for it).
How to translate all details to the D3.js v5 parametrization?
I try the obvious, as center and parallels, but it was not sufficient
var projection = d3.geoConicEqualArea()
.parallels([-2,-22]) // IS IT?
.scale(815)
//.rotate([??,??]) // HERE THE PROBLEM...
.center([-54, -12]) // IS IT?
PS: where the D3 documentation for it? The D3 source-code of geoConicEqualArea() have no clues.
The parts that translate to a d3 Albers projection are as follows:
PROJECTION["Albers"],
PARAMETER["standard_parallel_1",-2],
PARAMETER["standard_parallel_2",-22],
PARAMETER["latitude_of_origin",-12],
PARAMETER["central_meridian",-54],
You have the parallels, now you need to rotate. Also note, for any D3 projection, the rotation is applied to the centering coordinates. Generally, you'll want to rotate on the x and center on the y:
d3.geoAlbers()
.parallels([-2,-22])
.center([0,-12])
.rotate([54,0])
.translate([width/2,height/2])
.scale(k)
I've rotated in the opposite direction along the x axis (rotated the earth under me so that I'm overtop of the central meridian, hence my rotation by -x). I've then centered on the y. Lastly I translate so that the intersection of the central longitude and meridian is centered in the map and apply a scale value that is appropriate.
If I want to center on a different area but keep the projection the same, I can modify projection.center(), but keep in mind that the coordinates provided here are relative to the rotation. I can also use projection.fitSize() or projection.fitExtent(), both of which set 'translate' and 'scale' values for the projection. None of center/scale/translate change the distortion in the D3 projection.
Of course this isn't a true replication of your projection as the coordinate space units are pixels, you will remain unable to measure distances in meters directly without some extra work.
See also
I am working on THREE.js orthographic camera, I am using 'OrbitalControls.js' for controls.
I want to zoom in the direction of mouse in 3D world. Hoping to get solution in JS. I know this one is not easy solution like perspective camera.(where we add in camera direction)
There is a .zoom parameter on the orthographic camera.
Try setting increasing/decreasing it.
This can be solved by figuring out the difference between your current zoom level and the next one, and then by panning in the direction of the mouse.
Your OrthographicCamera has a width and hight in world units camera.right - camera.left and camera.top - camera.bottom. Say you're at zoom level 1, and you zoom to 2, you divide these by two and get the new width and height in world units.
You need to figure out the difference in X Y and pan the camera in that direction.
I'm trying to build a stock chart with zooming functionality using D3.js
I'm looking to start with this example here and attempt to make the zoom feel more natural for a stock chart. A perfect example is this. So the difference as far as I understand is that zoomng and panning are both locked on the Y-axis, and the only way the Y-axis moves is to autmatically fill the price range of the currently visible data.
Another noticeable difference is that zooming does not zoom into the current position of the mouse like it does in the first example.
How can the example be adjusted to work more closely as the other chart? What is the pertitent code, how should it be changed?
Setting the zoom behaviour to not affect the y-axis is simple: just don't attach your y-scale to the zoom behaviour.
In the sample code you linked to, the zoom functionality is added in this line:
this.plot.call(d3.behavior.zoom()
.x(this.x)
.y(this.y)
.on("zoom", this.redraw() )
);
That creates a zoom behaviour object/function, links it to the graphs x and y scales, and tells it to call the function returned by this.redraw() after every zoom event. The zoom behaviour automatically changes the domain of the scales on zoom, and then the redraw function uses the modified zoom. If you don't give it a y scale to modify, then zooming won't affect the y domain.
Getting the y scale to automatically adjust to the given extent of the data is a little trickier. However, remember that the zoom behaviour will have automatically adjusted the domain of the x scale to represent the extent of visible data horizontally. You'll then have to get the corresponding slice of your data array and figure out the extent of y values from it, set your y domain accordingly, and then call the redraw function (remembering that this.redraw() just returns the redraw function, to call it within another function you'll need to use this.redraw()() ).
To have the zoom be independent of the mouse position, set a center point for the zoom behaviour.
I'm working on a project to generate world map projections and manipulate them. You can see a beta version here : http://ansichtssache-n.ch/en/personas/daVinci
I'm trying to get the drag event correctly interpreted, so that for example when you drag Australia up, it actually moves Australia up and not the center of the projection (causing Australia to move down in a Miller projection).
I've been trying to find the correct rotation angles to apply to the 3 axis as shown here http://bl.ocks.org/mbostock/4282586 .
I can get the x/y position on the canvas from the start and end of the mouse drag, I can get the geo-coordinates of these points too, and I can get the x/y of the current center as well as its geo-coordinates, but honestly I'm stuck now...
Any idea ?
I had a similar problem here Compose two rotations in D3 geo projection?
I came up with a way to compose the trackball rotation with the existing projection rotation so that you get intuitive control regardless of the original globe orientation.