Visualizing a Globally Distributed Team Using Multiple APIs
Tags: api, tutorial, javascript, postman
Published: 2022-05-27 06:35:32

---
title: Visualizing a Globally Distributed Team Using Multiple APIs
published: true
date: 2022-05-26 16:48:01 UTC
tags: api, tutorial, javascript, postman 
canonical_url: https://blog.postman.com/visualizing-a-globally-distributed-team-using-multiple-apis/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1roj62iajppmzt17wkgl.png
---

If the 2020 pandemic has taught us anything, remote-first work culture is the way of the future. As a new developer advocate at Postman, I’m excited to be working remotely for a globally distributed developer relations team supporting Postman’s community of more than [20 million users worldwide](https://dev.to/jansche/celebrating-20-million-postman-users-167d-temp-slug-1527784). With that said, I was inspired to build my first collection to highlight Postman’s global presence.

On [Day 17](https://www.postman.com/postman/workspace/30-days-of-postman-for-developers/documentation/1559645-0b4d01c7-25b5-4296-91e2-bad1baaf3c6d) of [30 Days of Postman,](https://www.postman.com/postman/workspace/30-days-of-postman-for-developers/overview) I became intrigued with the [Postman Visualizer](https://learning.postman.com/docs/sending-requests/visualizer/) feature. I knew it was going to be the heart of my project, so I set out to find a way to visualize my fantastic new Postman team members spanning the globe. In this blog post, I’ll show how I got started.

## Working with an image in mind

There are Postmanauts living in all corners of the world, with my team comprising seven members that work across various time zones. A map was going to be the best kind of visualization to showcase our global diversity. After exploring the [Postman API Network](https://www.postman.com/explore), I stumbled upon an [Earthquake Map Visualization](https://www.postman.com/marketplacetasik/workspace/marketplace-tasikmalaya-s-public-workspace/documentation/13110122-934b186e-0f2b-4c11-a435-6bc05894dbca), which used [D3.js](https://d3js.org/) libraries to map data against longitude and latitude coordinates.

![Map of earthquakes around the world](https://blog.postman.com/wp-content/uploads/2022/05/image3-1000x635.png)
_Map of earthquakes around the world_

I realized that I could visualize just about anything on this map as long as I had access to some longitude and latitude data.

Time to put this theory to the test. I built a sample POST request called `Random Users` using the [Postman Echo API](https://www.postman.com/postman/workspace/published-postman-templates/documentation/631643-f695cab7-6878-eb55-7943-ad88e1ccfd65?ctx=documentation). The idea behind this request was to echo back some sample dummy data for ten users with random names, longitudes, and latitudes using Postman’s [faker library](https://www.npmjs.com/package/@faker-js/faker).

```
let users = [];

for (var i=0; i<10; i++){
    let tempUsers = {
        name: pm.variables.replaceIn("{{$randomFullName}}"),
        latitude: pm.variables.replaceIn("{{$randomLatitude}}"),
        longitude: pm.variables.replaceIn("{{$randomLongitude}}")

    }
    users.push(tempUsers);
}
pm.collectionVariables.set('req_body', JSON.stringify(users));

```

In this pre-request script, I used [dynamic variables](https://learning.postman.com/docs/writing-scripts/script-references/variables-list/) to create objects for ten users with random names, latitudes, and longitudes. These objects are then pushed into an array and set into the request body using a collection variable and [JSON Serialization](https://dev.to/postman/when-and-how-to-use-json-serialization-in-postman-4bfi). Once this request is sent, I can get random users:

![Response that includes random users from Postman Echo Post Request](https://blog.postman.com/wp-content/uploads/2022/05/image4-1000x673.png)
_Response that includes random users from Postman Echo Post Request_

Now it’s time for the visualization. In the **Test** tab, I used the template from the [Earthquake example](https://www.postman.com/marketplacetasik/workspace/marketplace-tasikmalaya-s-public-workspace/request/13110122-dc7f1ab3-155c-48a3-8710-0201ac83e063) and modified a couple of interesting points:

```
var response = pm.response.json().data;
let parsedData = [];

//data parsing
for (let users of response){
    let tempEntry = {};
    tempEntry.name = users.name;
    tempEntry.lat = users.latitude;
    tempEntry.long = users.longitude;
    tempEntry.circleSize = 6;
    tempEntry.color = "#F09D51";
    parsedData.push(tempEntry);
}
// visualize 
pm.visualizer.set(template, {
    data: parsedData,
    title: "Map of Random Users"
} ); 

```

The Echo API’s response data is being parsed for each of the users, name, latitude, longitude, and circle size and color for each data point. The `pm.visualizer.set()` method is then used to visualize the parsed data, and the map’s title is returned from echo API. Here is what we get:

![Visualization of Random Users](https://blog.postman.com/wp-content/uploads/2022/05/image6-1000x561.png)
_Visualization of Random Users_

_Voilà_, the theory worked! This proved that with some longitude and latitude coordinates, I could use this visualizer to map random users. This was going to be my template to visualize, but now it was time to work with some real user data.

## Choosing the APIs

Getting data for real users can be tricky. I needed to find longitude and latitude data for my entire team, so I thought to use their location data from their Twitter profiles as a starting point.

The [Twitter API](https://developer.twitter.com/en/docs) is a really powerful API. To get a user’s data from a username, I specifically used the [Twitter API user by username](https://www.postman.com/twitter/workspace/twitter-s-public-workspace/request/9956214-288337e6-91e5-4297-bde2-cae96a549732) endpoint to retrieve location data for an individual username and the [Twitter API User by Usernames](https://www.postman.com/twitter/workspace/twitter-s-public-workspace/request/9956214-f116b1dc-0f6a-4b0b-8433-8b344654e67e) to retrieve location data from multiple usernames. In Postman, the query params for user.fields  is used to get all sorts of data from Twitter, such as:

```
Created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,url,username,verified,withheld

```

This request is forked from the [Twitter API v2 Postman Collection](https://www.postman.com/twitter/workspace/twitter-s-public-workspace/collection/9956214-784efcda-ed4c-4491-a4c0-a26470a67400?ctx=documentation), which allows anyone to access the wide plethora of Twitter endpoints with the right authorization from [Twitter’s Developer Dashboard](https://developer.twitter.com/en/portal/dashboard).

In my case, I used my Twitter handle, [@poojamakes](https://twitter.com/poojamakes), to get my location data, which is Washington, D.C.

![Twitter API V2 User by Username request](https://blog.postman.com/wp-content/uploads/2022/05/image7-1000x502.png)
_Twitter API V2 User by Username request_

Once I could get a high-level location for each of my team members using their profiles, I needed a geocoding API that could give me their longitude and latitudes based on their location.

The [PositionStack API](https://positionstack.com/)  was a perfect fit since it provided an accurate forward and reverse geocoding covering more than 2 billion places and addresses worldwide. To use this API, you will need to obtain an API key from PositionStack by clicking on [Get Free API Key](https://desktop.postman.com/?desktopVersion=9.16.0&userId=924366&teamId=1341338) and selecting the free option for personal use.

In this scenario, I used the [Forward Geocoding](https://positionstack.com/documentation) endpoint to make a forward geocoding request, using the API’s `forward` endpoint and specifying the `query` parameter with the location from Twitter.

![](https://blog.postman.com/wp-content/uploads/2022/05/image9-1000x153.png)

API results:

![Example of PositonStack Forward Geocoding endpoint](https://blog.postman.com/wp-content/uploads/2022/05/image1-1000x513.png)
_Example of PositonStack Forward Geocoding endpoint_

Now that I had the access to location using the Twitter API and was able to  convert that location into longitude and latitude data using PositionStack API, I was well on my way to creating my map visualization.

I decided to get a little creative and also capture the weather data for each team member by using the [Open Weather API](https://home.openweathermap.org/users/sign_up) using the [Current Weather Data](https://openweathermap.org/current) endpoint, which allows you to get current weather data for any location on Earth, including over 200,000 cities, by using geographical coordinates (lat, lon).

![](https://blog.postman.com/wp-content/uploads/2022/05/image8-1000x209.png)

At this point I have all the pieces of the puzzle:

- User’s Location data from [Twitter User Look Up APIs](https://www.postman.com/twitter/workspace/twitter-s-public-workspace/folder/9956214-7358bba6-04d0-4edf-adda-309a900e0569?ctx=documentation)
- Longitude and latitude data from [PositionStack API](https://positionstack.com/documentation)
- Weather data from [Open Weather API](https://openweathermap.org/current)
- Map visualization with [Postman Echo](https://www.postman.com/postman/workspace/published-postman-templates/documentation/631643-f695cab7-6878-eb55-7943-ad88e1ccfd65?ctx=documentation)

Now it’s time to build out  a single workflow (or maybe many) to put all of these pieces together.

## Building workflows

One thing I learned while working on this project was that there are so many different ways to build request workflows with Postman. In my case, I found three specific ways that I will be diving deeper into in my upcoming blog post. However, the common thread behind these workflows is the ability to create, set, and parse through data objects across each request using [serialization](https://dev.to/postman/when-and-how-to-use-json-serialization-in-postman-4bfi). My colleague [Ian Douglas](https://blog.postman.com/author/ian-douglas/) wrote a wonderful [blog post](https://dev.to/postman/when-and-how-to-use-json-serialization-in-postman-4bfi) on this topic which talks about the idea of “serializing” data to store and convert complex data types when writing and reading from memory.

For this case, I am storing this data into object environment variables. [Variables](https://learning.postman.com/docs/sending-requests/variables/) in general are necessary when working with multiple APIs and requests. In this scenario, I used an environment variable to set all of the Twitter usernames that I will be using in the Twitter API to get the location data and name for each user. I was then able to create an object with that data using `pm.environment.set()` and set that serialized data into a string, using  `JSON.stringify()`, into another environment variable to be used in a query parameter for the PositionStack API to get each user’s longitude and latitude.

```
let response = pm.response.json();
// building users object 
let obj= { 
     name : response.data.name,
     location:response.data.location,
     latitude: null,
     longitude: null
}
pm.environment.set("user-object", JSON.stringify(obj));
```

Initially, this data is set as null, but as the data passes through another API and is deserialized and parsed using the `JSON.parse()`, more and more data can be added to each request.

```
var dataOut = pm.response.json().data[0];
let lat = dataOut.latitude;
let long = dataOut.longitude;

//add long and lat from object
var userObj = JSON.parse(pm.environment.get("user-object"));
userObj.latitude = lat
userObj.longitude = long

// set lat and long to main object
pm.environment.set("user-object", JSON.stringify(userObj));
```

We are getting the longitude and latitude data from the API’s response. Then the initial environment variable is parsed and the data is added to the object and finally set again to using `pm.environment.set()` to be used in another request.

Using these methods as a model for each scenario gives us the overall workflow:

1. Get user’s location from Twitter API.
2. Convert Location into longitude and latitude.
3. Use longitude and latitude to get weather data for each user based on their location.
4. Visualize all the data in the map.

Here’s a visual overview of everything in this workflow. The final POST request uses the  Postman Echo API which replaces the random data with real data for each user from the Twitter, PositionStack, and Open Weather APIs:

![API workflow](https://blog.postman.com/wp-content/uploads/2022/05/image2-1000x314.png)
_API workflow_

## Create your own team visualizations

Overall, this collection was created to showcase the magic of Postman’s versatility. Just knowing the basics of working with variables, objects, serialization, and visualizations can take you a long way.

Keep an eye out for my upcoming blog post about the  three ways to build Postman workflows, in which I’ll use this same example to dive deeper into working with individual Postman requests, [sending requests from scripts](https://learning.postman.com/docs/writing-scripts/script-references/postman-sandbox-api-reference/#sending-requests-from-scripts), and [building request workflows](https://learning.postman.com/docs/running-collections/building-workflows/).

If you are interested in playing around with this collection and visualizing your own teammates across the globe, be sure to [fork my collection](https://www.postman.com/postman/workspace/published-postman-templates/documentation/20021534-65df9ce8-b487-4618-8784-3caaf64e10c1).

![The seven Postman developer relations teammates that are mapped are: @iandouglas736, @poojamakes, @DevRelSean, @arlemi, @jansche, @PetuniaGray, @DevRelKev](https://blog.postman.com/wp-content/uploads/2022/05/image5-1000x615.png)
_The seven Postman developer relations teammates that are mapped are: [@iandouglas736](https://twitter.com/iandouglas736), [@poojamakes](https://twitter.com/poojamakes), [@DevRelSean](https://twitter.com/DevRelSean), [@arlemi](https://twitter.com/arlemi), [@jansche](https://twitter.com/jansche), [@PetuniaGray](https://twitter.com/PetuniaGray), [@DevRelKev](https://twitter.com/DevRelKev)_

Give us all a follow or or use this collection to find other Twitter users in your network to visualize.

To get started with this collection:

1. [Fork this collection](https://www.postman.com/postman/workspace/published-postman-templates/documentation/20021534-65df9ce8-b487-4618-8784-3caaf64e10c1) into your own workspace.
2. Get [Twitter bearer token](https://desktop.postman.com/?desktopVersion=9.16.0&userId=924366&teamId=1341338) and add `bearer_token` to current value in collection variable.
3. Get [PositionStack API key](https://desktop.postman.com/?desktopVersion=9.16.0&userId=924366&teamId=1341338) and add `api-access-key` to current value in the collection variable.
4. Get [Open Weather API key](https://desktop.postman.com/?desktopVersion=9.16.0&userId=924366&teamId=1341338) and add `weather_api_key` to current value in the collection variable.
5. Use collection runner to run through **Individual Postman Requests** and capture all objects as environment variables for each user.

Check out visualization in `Postmanauts - Visualize` request in all folders.


The post [Visualizing a Globally Distributed Team Using Multiple APIs](https://blog.postman.com/visualizing-a-globally-distributed-team-using-multiple-apis/) appeared first on [Postman Blog](https://blog.postman.com).