I am pretty new to d3 data visualisation.
I am about to setup something similar like Emission Tracker to track European and Worldwide progress towards net 0 Greenhouse Gas Emissions for a pet project of mine.
I dig the style of the visualisation in the aforementioned site.
It’s a globe, but the map on it is shrunk, (scaled down?), so you have the impression of the earth’s round shape, but can still see all countries nicely in one go.
The countries still seem nicely snuggled to the shape of the globe and its graticule.
It’s obviously made up, but transports the message rather well, that when we talk about emmisions it’s not just some numbers on a scale on a random map, but something that rather touches us all, on a Global scale.
So, from studying the (minified) source code, visx is being used. So some d3 magic must be going on.
But i cannot find anything regarding such a custom projection/scale, nowhere on the entire www.
So i landed here.
Anyone an idea on how to go about this? Any little or big advice on how to reproduce such a rendering?
My question is specific only to the rendering of the states onto the globe.
(not about the rest like icons, pie-arcs … they don’t bother me for now)
ps. a starting point for me is this gist: World Map
it uses the current v6 d3
One projection with this feature is Lagrange sphere in a circle projection, seen as the default selection here:
But you can get other such projections by doing the same trick of mapping the sphere to a hemisphere first (either conformally as Lagrange did, or using some other method) and then applying any azimuthal projection you prefer. It seems plausible at first glance that the one on the linked site conformally mapped the sphere to a hemisphere, and then orthographically mapped the hemisphere to the plane, but they might have used some other method.
Personally I don’t like these projections because after thinking about it a little bit you realize that the impression of circularity is misleading. But YMMV.
Hi Jacob,
thank you for pointing me towards the Gilbert map and for the extra little details of explanation and the great links.
Much appreciated!
Now I found it, contained in the official documentation on github, too.
( For feature visitors → GitHub - d3/d3-geo-projection: Extended geographic projections for d3-geo. )
I have found that d3 source before, but was pretty intimidated by the sheer abundance of projections there, and i must have overlooked it. And it is hardly ever used, right?
From a quick check it really looks like Gilbert. So for my use case that’s fine and would perfectly do it. But: yepp, i get you, and in part i am hesitant, too. Not sure if i will include it in the final site.
The Projection looks and feels familiar at first, yet is so wrong. Just wrong.
I might prepare 2 different types of projections and let the first testers decide which way to go.
That said, is there any particular Course, Book, or Blog you found most helpful in picking up d3 ?
How are you using it? Vanilla JS, React, React+x ?
