I'm trying to recreate a map of the Netherlands from Mike Bostock's tutorial. I get the first step done and actually see the smaller map. But when I go to the second step and try to change the projection everything is blank. Is it possible that this is caused by the data including the Dutch Antilles? They are so far it apart that I might be looking at the ocean?
My files
It seems to me that setting the center attribute on the projection was messing things up, it might be because your data was crossing date line? I notice the the bounding box stretch way off to the south and west.
My approach was to set the scale and translation based on one of the centrally located provinces. The scale and translation were automatically calculated based on Mike's code in this stack overflow question. The idea is to use a unit projection and then to calculate the bounds of a given feature. These bounds are then used to calculate appropriate scale and translation (avoiding using the center attribute). The projection is then updated using the recalculated scale and transform.
The relevant code is:
//select a province to center on
var l = topojson.feature(nld, nld.objects.subunits).features[8],
//calculate the bounds
b = path.bounds(l),
//calculate the scale based on the bounds (note that I've set the proportion to
//less than one so you can see all of the Netherlands)
s = .125 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
//calculate the translation based on the bounds
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
//update the projection
projection
.scale(s)
.translate(t);
And you can find an example here
Related
I'm working on an educational map project in which different map projections are displayed. I'd like to implement a morph transition between choosing different projections.
I've found a great example how to implement it, and I've had not much troubles to recreate it. Unfortunately, I also need the capability to clip the projections. This works flawlessly with the target states, but not when morphing the projections.
You can see it in this example when choosing "orthographic" as first projection and for example "equirectangular" as second one:
https://bl.ocks.org/alexmacy/082cb12c8f4d5c0d5c4445c16a3db383
The clipping path follows the darker line instead of the current map extent. Is there a way to implement it correctly?
This is a lot trickier to implement than appears, I remember looking at this a few years back. The cleanest solution is to create a new preclipping function that determines which portions of the projected earth should be behind/covered by portions closer to the origin. But it turns out this is relatively hard to define - at least my me - and also hard to use in a new preclipping function.
Instead we could cheat. There are a couple ways, I'll propose one that nearly does the trick - you can still see some overlap though. We'll use d3's antimeridian preclipping to make sure no features stretch over the antimeridian, then we'll use a clip angle to remove portions of the earth that need to be removed.
Setting Clip Angle
When the hybrid projection is purely orthographic, clipping angle is great: the clip angle is the same in all directions. Here it should be 90 degrees.
When the equirectangular is dominant in the hybrid projection, the clipping angle is not needed (I use an angle of 180 degrees, which doesn't clip anything below). This is because the entire earth should still be visible.
But otherwise, the hybrid clip angle is not the same in all directions - this is why this is not a perfect solution. However, it does remove nearly all the overlap. So as we go from the projection being mostly equirectangular to wholly orthogrpahic, we slowly reduce the clip angle.
Example
Starting with an equirectangular projection and transitioning to an orthographic, we'll start transitioning the clipAngle from 180 degrees to 90 degrees only once we get 40 percent of the way trough the transition:
function getProjection(d) {
var clip = Math.PI; // Starting with 180 degrees: don't clip anything.
var projection = d3.geoProjection(project)
.rotate([posX, posY])
.fitExtent([[10, 10], [width - 10, height - 10]], {
type: "Sphere"
})
// Apply the two pre clipping functions:
.preclip( function(stream){
stream = d3.geoClipAntimeridian(stream) // cut antimeridian
return d3.geoClipCircle(clip)(stream) // apply clip angle
})
var path = d3.geoPath(projection);
function project(λ, φ) {
λ *= 180 / Math.PI,
φ *= 180 / Math.PI;
var p0 = projections[0]([λ, φ]),
p1 = projections[1]([λ, φ]);
// Don't actually clip anything until t == 0.4
if(t > 0.4) {
clip = Math.PI/2 + (0.60-(t-0.4)) * Math.PI/2
}
return [
(1 - t) * p0[0] + t * p1[0],
(1 - t) * -p0[1] + t * -p1[1]
];
}
return path(d)
}
Here's an example.
Great answer Andrew Reid! I just made one small change. I removed the t > 0.4 if statement and used this clip for transitioning into an orthogrpahic projection:
clip = Math.PI/2 + (1 - t) * Math.PI/2
.. and this clip for transitioning out of an orthogrpahic projection:
clip = Math.PI/2 + t * Math.PI/2
I like this because it's slightly cleaner, is a 'catch-all' for any t value and having the reverse is also useful.
Is there any way that I can focus into d3 world Map around a specific latitude and longitude on load of file.
Here is working plunker in which I can zoom around a d3 world Map.
plunker
Below code is used to zoom in for click.
function clicked() {
currScale2 = projection.scale();
if(beforeClickValue == 0)
beforeClickValue = 150;
beforeClickValue = beforeClickValue + 100;
projection.scale(beforeClickValue);
g.selectAll("path").attr("d", path);
}
I need to zoom in near or around Kenya, if I provide a particular location in Kenya, eg:
Latitude 0.55378653650984688
Longitude 35.661578039749543
If your centering point is determined by a feature
If your point is a feature centroid, then you can automatically center your map using that feature:
There are a few ways to achieve this, one would be to set your projection to be centered on your features:
projection.fitSize([width,height],geoJSONKenyaTurkana);
fitSize takes the width and height of a bounding box - your svg - and sets the scale and translate of the projection to maximize the size of the features within that bounding box. .fitExtent will allow a bit more flexibility regarding margins:
projection.fitExtent([[10,10],[width-10,height-10]],geoJSONKenyaTurkana);
This will provide margins of 10 pixels: the first coordinate is the top left of the bounding box, while the second coordinate is the bottom right.
After setting your projection to be centered with either method, then you can append the features - your zoom constraints, however, will be relative to this starting point - as you have zoomed in on the projection. Here's a plunkr with this approach (using fitSize):
https://plnkr.co/edit/E7vqcwwISmmxUarCsWvw?p=preview
I've used your featureCollection as the feature, but you could center it on an individual feature in the feature collection.
Alternatively, and possibly more in line with your title, you can use a zoom identity to set the intitial zoom factor with d3.zoom, this manipulates the svg rather than the projection and uses your zoom function:
var bounds = path.bounds(geoJSONKenyaTurkana),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
svg.call(_zoom.transform, d3.zoomIdentity
.scale(scale)
.translate(translate[0]/scale,translate[1]/scale)
);
This gives us something that looks like this:
https://plnkr.co/edit/CpL4EDUntz853WzrjtU0?p=preview
If you want to manually set a centering point
If however, you want to set your map to be centered according to a manually set point, you can accomplish this much the same way as above: modifying the projection, or modifying the zoom:
To modify the projection, you can use .center() which takes a coordinate and centers the map on this point:
projection.center([longitude,latitude])
Of course, points don't have area, so you will have to set the scale factor yourself, the value will depend on what you want to show:
projection.center([longitude,latitude]).scale(k);
Larger values are more zoomed in.
Alternatively, to manipulate the zoom function, we can use something like:
var x = projection([35.661578039749543,0.55])[0],
y = projection([35.661578039749543,0.55])[1],
scale = 20,
translate = [width / 2 - scale * x, height / 2 - scale * y];
svg.call(_zoom.transform, d3.zoomIdentity
.scale(scale)
.translate(translate[0]/scale,translate[1]/scale)
);
As with setting the projection to center on a specific point, you'll need to set a scale value manually. Here I've arbitrarily chosen 20.
I'm using d3.js to create a bubble chart, which I'm then trying to wrap partially around a sphere in three.js. I'd like the end result to look like a dandelion, as pictured here:
The bubble chart on a 2d plane looks like this. I'm trying to wrap it half-way around a sphere to create that dandelion effect.
I have three semi-working solutions, yet none exactly follow the curve of a sphere when viewed from the side
Example A - zCoord = new THREE.Vector2(xCoord, yCoord).length();
This gives a linear looking cone effect, not a curved effect. I think I somehow need to calculate a quadratic curves instead of a linear line but I'm stuck trying to figure it out.
Example B - zCoord = (diameter / 2 ) * Math.cos(phi);
This uses code from the periodic table of elements and spirals the data along the z axis.
Example C - Close to what I want, but it doesn't wrap around sphere enough, and everything seems to bunch up together. I'd like to preserve the padding or space around the mini-spheres
zCoord = (diameter / 2 );
var vector = new THREE.Vector3(xCoord, yCoord, zCoord).normalize().multiplyScalar(diameter / 2);
jsfiddle link to try out the methods
May not be the most efficient solution, but I did get pretty close using Mercator Projection. It's almost like I'm UV wrapping, but with Vector2 points.
My solution involved mapping X,Y coords to latitude and longitude, then projecting them onto a sphere using mercator projection.
var latitude = data[i].position.x / R;
var longitude = (2 * Math.atan(Math.exp(data[i].position.y / R))) - (Math.PI / 2);
xCoord = R * Math.cos(latitude) * Math.cos(longitude);
yCoord = R * Math.cos(latitude) * Math.sin(longitude);
zCoord = R * Math.sin(latitude);
link to jsfiddle showing tweening from 2d > 3d
I have a d3.js graph that is a forced layout design. I have allowed for users to zoom in and out of the graph with bounds set so they can't zoom in past 1 and can't zoom out past 0.1. Right now, when I plot values on the graph, I automatically send them to the center of the graph (based on the height and width of the SVG container). This works fine until I zoom out then zoom in to some where else and plot a new node. The new node will end up back at the original center and not my new relative center.
How I scale when zooming right now:
function onZoom() {
graph.attr("transform", "translate(" + zoom.translate() + ")" + " scale(" + zoom.scale() + ")");
}
I was unable to find any calls to get the current visible coordinates of the graph, but even with those, how would I use them to calculate the relative center of the graph if my SVG graph size always remains static?
I know this post is very old but I found it useful. Below is the update for d3 v5.
var el = d3.select('#canvas').node().getBoundingClientRect();
var z = d3.zoomTransform(svg.node());
var w = el.width;
var h = el.height;
var center = {
x: (z.x / z.k * -1) + (w / z.k * 0.5),
y: (z.y / z.k * -1) + (h / z.k * 0.5)
};
One thing of note, however... is that I found I also needed to divide the pan x/y by the scale factor z.k. Which, you did not do in your formula.
For simple geometric zoom, it's fairly straightforward to figure out the visible area from the visible area dimensions plus the translation and scale settings. Just remember that the translation setting is the position of the (0,0) origin relative to the top left corner of your display, so if translation is (-100,50), that means that top left corner is at (+100,-50) in your coordinate system. Likewise, if the scale is 2, that means that the visible area covers 1/2 as many units as the original width and height.
How to access the current transformation? graph.attr("transform") will give you the most recently set transform attribute string, but then you'll need to use regular expressions to access the numbers. Easier to query the zoom behaviour directly using zoom.translate() and zoom.scale().
With those together, you get
var viewCenter = [];
viewCenter[0] = (-1)*zoom.translate()[0] + (0.5) * ( width/zoom.scale() );
viewCenter[1] = (-1)*zoom.translate()[1] + (0.5) * ( height/zoom.scale() );
I.e., the position of the center of the visible area is the position of the top-left corner of the visible area, plus half the visible width and height.
I am working on a geographic project in Java.
The input are coordinates : 24.4444 N etc
Output: a PLAIN map (not round) showing the point of the coordinates.
I don't know the algorithm to transform from coordinates to x,y on a JComponent, can somebody help me?
The map looks like this:
http://upload.wikimedia.org/wikipedia/commons/7/74/Mercator-projection.jpg
Thank you
Given your sparse example, the range of your inputs will be (90.0N - 90.0S) and (180W - 180E). It is easiest - and standard - if you convert South and West to negatives giving you latitudes of (90.0..-90.0) and longitudes of (180.0..-180.0).
Given the size of your canvas - let's say it is 140x120 pixels - you get:
x = (latitude * canvas_height / 180.0) + (canvas_height / 2)
y = (longitude * canvas_width / 360.0) + (canvas_width / 2)
or:
x = (longitude * 120.0 / 180.0) + (120/2)
y = (latitude * 140.0 / 360.0) + (140/2)
where I have ordered the operations to minimize rounding error. This assumes the canvas has point (0,0) in the upper-left or, if not, that you are Australian.
Added: you just threw in the bit about Mercator projections making my simple answer incorrect (but possibly still usable by you if you don't actually care about projection)
MSW provided a good example. Ultimately the algorithm depends on the map projection used. Here are a couple of good resources I used in the past.
The following link is a good reference to a number of different map projections with enough math formulas to choke a horse.
http://www.remotesensing.org/geotiff/proj_list/
Here is a decent reference for doing this in PhP. While not Java, it should be straight forward enough to apply the principles outlined.
http://www.web-max.ca/PHP/article_1.php