D3 interactive globe

D3 interactive globe


  • WordPress D3Globe
  • D3 Globe with Canvas, WebGL, and Three.js
  • Building a Map with React, SVG and D3.js
  • Mapping the World: Creating Beautiful Maps and Populating them with Data using D3.js
  • An interactive 3D globe of extremes - a DIY mapping guide
  • WordPress D3Globe

    There are 2 parts of data required to build this application. List of countries producing coffee Wikipedia World map shape information Natural Earth Data Basically, it is all about scraping and transforming these data into formats readable by our application. Then, wrapping it up with React. Nothing more, nothing less! The diagram below pretty much sums it all up. Getting Coffee Producing Countries Data We are going to highlight only countries that produce coffee in the world.

    We will be taking the data from Wikipedia. However, it is a web page and so, we need to do a little bit of web scraping to transform it into a JSON, that is consumable by our web application.

    Here, I chose to do the web scraping chore using Python, i. Jupyter Notebook in particular. It is actually my first few attempts in trying to use Python. Have heard so much about Python being a great scripting tool all these while.

    Finally, got my hand dirty with it just a lil bit though. Follow the instructions to install Jupyter Notebook. It is a nice Python client tool that runs on browser to execute scripts. As a Python noob, erherm..

    I mean Python beginner, I find it very intuitive and easy to use! After spinning up the Jupyter Notebook, I executed the following script to scrape the data from Wikipedia. You will hit some errors complaining that the modules required are not installed.

    Just Google that up a bit to install the modules required. After that, I transfer the file into my React project for later usage. It actually in the assets folder in my repository. Getting Map Shapefile Next, we need to download the Shapefiles of the world map. Large, Medium, Small. For the purpose of this experiment, the Small size will suffice. It is basically a json file with a specific structure to describe the geographical information.

    It is a very popular tool for viewing and editing geographical data. Also, it is open-source and well, free! Do consider to give them support for the wonderful works though. Next, unzip the Shapefile that you have downloaded from Natural Earth previously.

    You can configure your export filename at 1. For this experiment, I have included the following properties, i. I did not utilize all the properties exported here in the demo app, which brings us some food for thought.

    If you think about it, the less properties you exported here, the smaller the GeoJSON file will be exported. The smaller the file size, the lesser the time is required to download, which then translates to achieving higher performance on user end! So, only select properties that you really need for your application! I will only point out the gist of making this app happening.

    For the full code, head over and have a look at the GitHub repository. For that, we will need some help from D3. I have encapsulated all codes that handle coffee data into a custom hook — useCoffeeData. The source is here. Alright, here are some coverage on the main points. First, import geoEquirectangular and geoPath from d3-geo. Note that the import statement only import the functions that we need from the d3-geo package.

    This reduces the bundle size as opposed to import directly from d3 main package, which essentially import the whole of d3. There are also other projection type supported such as Mercator used in Google Map via geoMercator method.

    You can even write a custom projection method if you wish to! Below is the snippet. We can then use the generator function to help us generate the SVG path definitions required. And that is pretty much a React side of thing already. No more magic here on out! Here is a snippet of the WorldMap component. As you can see, we are just manipulating the svg and path tags here to populate the map and also handling the map hovering behaviors.

    Pretty much React alright! Of course, this depends on the usage needs as well. If you require the control over street data for things like navigations, etc. It would make perfect sense to work with only some SVGs to get things up and running. That way, you gain benefits like light weight, performance, controls, etc. It was a fun little experiment hacking up a map using SVG in web application context.

    Hey man, at least now I know some Python for real! See you on the next one! Time for some Moka pot coffee! Hahaha… Resources.

    D3 Globe with Canvas, WebGL, and Three.js

    Creating the Earth with D3. Stars Outer space is the inside of a sphere that is three times the size of the Earth itself. It is also another map projection, but instead of countries, there are randomly placed points of varying sizes. These points are supposed to look like stars and create the backdrop for the Earth.

    Polish In order to make this look more like the Earth, there is a single SVG circle element behind all of the map data.

    The circle uses a SVG linearGradient and filter for a little bit of a 3D spherical look and the fuzzily defined edge caused by the atmosphere. That works great for those projections because it allows the scrollwheel to zoom in on the mouse pointer as it does in Google Maps.

    Until then, I am using a custom version with my change already merged. Now that panning and zooming are separated, the move function will calculate the origin and scale based on the mouse event and change the projections for the map and outer space accordingly. Then, the map will be redrawn using the new projections. This creates a smooth experience that allows your to pan and zoom around the Earth. Feel free to play with the demo above and look through the code below or fork it on GitHub.

    This entry was posted in D3. Bookmark the permalink. I am drawing dots onto the globe, got that all working fine. The only problem I am facing is that when zoomed in, the map pans too fast. The pan distance does not scale as the user zooms in.

    Do you have any suggestions on how to compensate for the zoom? I tried messing around with the origin in move , which fixed it, but then the globe would rotate as I zoomed in.

    Building a Map with React, SVG and D3.js

    Setting up the map There are plenty of great tutorials out there in the world about setting up maps with D3, so we'll skip the basics. Here's the basic javascript I've used to initially set up the map. Step 2: Defining our Grid So, to get us going, we need to first define what our grid looks like.

    For our map, I've chosen to create a 45 by 45 grid. Image Here's what that looks like from a code perspective. Like I mentioned before, we want to add our data to a quadtree in order to make it faster to search. D3 has a great implementation built in, and adding our data to the quadtree is pretty straightforward. In addition, I'm adding the index of the individual feature to the data structure so that we can reference the original data if we need to later on.

    Mapping the World: Creating Beautiful Maps and Populating them with Data using D3.js

    The last line of code creates the actual quadtree. From there, we need to actually generate the clustered points and drop them on the map. To do this, we're going to borrow liberally from this great example of how to use quadtrees in D3. The next set of for loops that start on line 20 loop through each grid element on the graphic. Lines finds the average location of all the points that have been found in that particular grid item and adds the actual point to an extra element in the array for later lookup.

    Lines adds a point to a running list if we have a valid point. In this particular implementation, this happens when there are no points in a particular grid item. Here's what this looks like so far, along with a visualization of the underlying quadtree. Image Step 4: Adjust the size At this point, we're pretty close, but we can do better. It is also another map projection, but instead of countries, there are randomly placed points of varying sizes.

    These points are supposed to look like stars and create the backdrop for the Earth. Polish In order to make this look more like the Earth, there is a single SVG circle element behind all of the map data.

    The circle uses a SVG linearGradient and filter for a little bit of a 3D spherical look and the fuzzily defined edge caused by the atmosphere.

    That works great for those projections because it allows the scrollwheel to zoom in on the mouse pointer as it does in Google Maps. Until then, I am using a custom version with my change already merged. For polygons, returns the perimeter of the exterior ring plus that of any interior rings. The returned interpolator function takes a single argument t, where t is a number ranging from 0 to 1; a value of 0 returns the point a, while a value of 1 returns the point b.

    Intermediate values interpolate from a to b along the great arc that passes through both a and b. If a and b are antipodes, an arbitrary great arc is chosen. The point must be specified as a two-element array [longitude, latitude] in degrees. For Point and MultiPoint geometries, an exact test is used; for a Sphere, true is always returned; for other geometries, an epsilon threshold is applied.

    These correspond to yaw, pitch and roll. If the rotation angle gamma is omitted, it defaults to 0. See also projection. Any arguments are passed to the accessors.

    An interactive 3D globe of extremes - a DIY mapping guide

    The center may also be specified as a function; this function will be invoked whenever a circle is generatedbeing passed any arguments passed to the circle generator. The radius may also be specified as a function; this function will be invoked whenever a circle is generatedbeing passed any arguments passed to the circle generator. The precision may also be specified as a function; this function will be invoked whenever a circle is generatedbeing passed any arguments passed to the circle generator.

    Specifying a smaller precision angle improves the accuracy of the approximate polygon, but also increase the cost to generate and render it. If precision is not specified, returns the current precision, which defaults to 2. Streams must implement several methods to receive input geometry. Streams are inherently stateful; the meaning of a point depends on whether the point is inside of a lineand likewise a line is distinguished from a ring by a polygon.

    While both features and geometry objects are supported as input, the stream interface only describes the geometry, and thus additional feature properties are not visible to streams.

    The coordinate system is unspecified and implementation-dependent; for example, projection streams require spherical coordinates in degrees as input. Outside the context of a polygon or line, a point indicates a point geometry object Point or MultiPoint. Within a line or polygon ring, the point indicates a control point.

    Within a polygon, indicates the start of a ring. The first ring of a polygon is the exterior ring, and is typically clockwise. Any subsequent rings indicate holes in the polygon, and are typically counterclockwise. Within a polygon, indicates the end of a ring. Unlike GeoJSON, the redundant closing coordinate of a ring is not indicated via pointand instead is implied via lineEnd within a polygon.

    The first line of a polygon indicates the exterior ring, and any subsequent lines indicate interior holes.


    thoughts on “D3 interactive globe

    Leave a Reply

    Your email address will not be published. Required fields are marked *