Behind The Globe.

The globe on the D3VL homepage is a unique and eye-catching feature that showcases the power of cutting-edge web development technology. Using ThreeJS and a library called three-globe, this interactive globe rotates slowly and displays arc lines that represent the users of our software over the previous 24 hours. In this blog post, we'll walk you through the process of how we built this impressive feature, and explain the technologies that made it possible.

Conceptualizing the Globe

When we first set out to build the globe feature for the D3VL website, we had a clear vision in mind of what we wanted it to achieve. Our goal was to create a dynamic, eye-catching visualization that would showcase the reach of our software and highlight our commitment to providing innovative solutions to businesses all around the world, no matter where they are located. We wanted to create a globe that would be a unique and memorable feature of our website.

We wanted to create something that looked futuristic and eye-catching keeping in line with our brand identity. After some experimentation, we decided to visualize the countries as grids of hexagons with no borders in our signature color red. This gave the globe a unique and striking look, while still tying it back to our brand.

Choosing the Technology

When we first started thinking about the globe for the D3VL website, we knew we wanted it to be dynamic and show data in real-time. That meant we needed to find a technology that could handle the animation, data visualization, and interactivity we had in mind. After researching various options, we ultimately decided to use ThreeJS, a JavaScript library for 3D graphics, in combination with a library called three-globe that made it incredibly easy to create the 3D globe.

ThreeJS was a natural choice for us, it's widely used in the web development community and has a large and active user base. It is also very flexible, allowing us to create animations, render 3D graphics, and interact with the globe in real-time.

Displaying User Activity

Being a Privacy first company, we wanted to make sure that we were not collecting and storing any unnecessary personal data from our users. We also wanted to make sure that we were not displaying any data that could be used to identify individual users. We strongly believe that privacy is a fundamental human right, and we are committed to protecting our users' privacy at all times and as such felt tracking individual users locations was not an option.

To work around this, we instead opted to use aggregated data provided through the Cloudflare Analytics API. This allows us to retrieve the number of visitors that used our software over the previous 24 hours, grouped by country. However, presents us with a new challenge - We don't know where our users are located, only the country they are in.

To solve this we used the cities15000 dataset provided by geonames, this contains a list of all the major cities around the world with more than 15,000 occupants, by grouping this data into it's own set of country->city key pairs along with the population of each city, we are then able to use a weighted random algorithm to determine the most populous city in each country and use that as the location of the user with a random element. This proved to be a very effective solution, and allowed us to display the location of our users without breaching their privacy.

const weightedRandom = (options, weightField = 'weight') => {
    const weights = options.reduce((a, i)=> ([...a, i[weightField]]), [])
    const random = Math.random() * weights[weights.length - 1];

    for (let i = 0; i < weights.length; i++) {
        if (weights[i] > random) return options[i];
    }

    return options[options.length - 1];
}

We also wanted to add a touch of personalization to the globe, todo this we show the current visitor's location on the globe, and draw a big yellow arc terminating in a ring to their location. This allows the user to see where they are on the globe. To achieve this we used the Geo coordinates that are included when using CLoudflare Workers to get the user's location, this is then returned to the client as part of the larger API call.

const visitorLocation = {
    lat: request.cf?.latitude || 0.00,
    lon: request.cf?.longitude || 0.00
}

Conclusion

Building the interactive globe on the D3VL homepage was a challenging but exciting project that showcases the power of web development technology. By combining ThreeJS and the three-globe library, along with Cloudflare's services, we were able to bring our vision to life and create a dynamic, eye-catching visualization of our software's reach. With its real-time data visualization and privacy-focused approach, this globe serves as a testament to our commitment to innovation and user privacy and is a unique and memorable feature of our website.