Create an Interactive Globe Visualization With Svelte + D3.js

An interactive, rotating globe visualizing the world's population

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Better Data Visualizations with Svelte course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Better Data Visualizations with Svelte, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Better Data Visualizations with Svelte

  • [00:00 - 00:14] Hey everyone, in this lesson we're going to be building a rotating globe that moves on its own and responds to user interaction via click and pan. So it looks like this, I think it's kind of cool, it's like dark mode, so very cool feature there.

    [00:15 - 00:25] And we're going to be learning about geographic visualization, right? So we'll learn about some D3 modules that permit geographic visualization and we'll integrate them in disfelt using our declarative markup.

    [00:26 - 00:34] So we're going to learn about geographic visualization like projections and paths. We're going to learn about timers and intervals and D3 for this auto rotation and user interaction with momentum.

    [00:35 - 00:40] So there's actually some like inertia as I complete the drag here. So let's go ahead and get set up.

    [00:41 - 00:48] Again, we're going to go back into our terminal just like previous lessons. So I'm going to open up terminal and make sure you're in spelt course.

    [00:49 - 01:00] So you might be in our B swarm module. If you are, be sure to do cd dot dot, make sure you're in spelt course, which should include my first felt app, simple scatter plot and be swam.

    [01:01 - 01:04] We're just going to scaffold the project template once again. So you can go ahead and copy this.

    [01:05 - 01:11] And then the last command here is globe, because that's what I want the name of my folder to be. So I'll paste this hit enter.

    [01:12 - 01:16] If it succeeds, you should be able to type code period. This will open in VS code.

    [01:17 - 01:21] Oops, I did something wrong. This is a good lesson, right?

    [01:22 - 01:27] I cloned it, but then I accidentally did code period in spelt course. So be sure to cd into it.

    [01:28 - 01:31] So cd into globe. Now that I'm here, you see these files, which is what we expect.

    [01:32 - 01:35] Now I can do code period. It will open this up.

    [01:36 - 01:51] And then there will be an integrated terminal either already visible or you can make it visible by hitting new terminal up in your in your toolbar, hit new terminal, right? NPM install, which will install the relevant dependencies, NPN run dev to get it up and running.

    [01:52 - 01:54] If it's up and running, you should see this, in which case we're ready to get started.