The globe is a physical embodiment of the orthographic project, a tool used in cartography. But what if we want to go digital with this? What if we want to create a virtual simulation of a rotating globe?
We want to take it a step further, and connect the globe projection to the Internet. This a user on the broadcast side to spin the globe, and that movement is reflected in realtime on the subscriber side, and coordinates are streamed.
This blog post will show you how to use some of D3.js’s visualization tools and build the broadcaster of coordinates location data. In our second part, we’ll show you how to receive the data and animate the visualization on the subscriber side.
Live working Demo
What is a Broadcast Design Pattern?
A broadcast pub/sub messaging design pattern is publishing data from one publisher (broadcaster) to multiple subscribers (listeners) in realtime. Updates are sent from the broadcaster, and are received on the subscriber simultaneously. For example, we can build sports statistics streaming apps, or change colors on a webpage in realtime.
The design pattern in its simplest form below:
So, onto the tutorial!
Creating an Application
The visual medium for this type of tool could be D3.js’s orthographic projection. Check out the interactive orthographic example, provided by Mike Bostock. This example gives us the groundwork to transmit coordinates in realtime. Create a file like d3_orthographic_send.html or use the copy provided.
Next you need some data. This is the world-110m.json. Go to this link. Copy everything. Paste it into an empty text file and name it world-110m.json. Direct the d3.json path to your file path. In the example the .html file and the .json are in the same folder.
Once this has been set-up, if you run the file you will be able to spin the globe.
At the bottom of our in-line script html you need to initialize PubNub and prepare the publish function.
To get your unique pub/sub keys, you’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Dashboard. Our free Sandbox tier should give you all the bandwidth you need to build and test your messaging app with the web messaging API.
Notice that you’re publishing messages to the orthoDemo channel. If you created a listener that subscribed to orthoDemo, the listener would be able to hear the messages.
Next you need to go back and have the app call the publish function for the coordinates.
Right click the globe, inspect element, and open the console tab. If you begin transmitting you will see a list of coordinates being transmitted. If you were transmitting before you opened this, you will see a list of Array objects.
You know it’s working because there are no errors. The console.log, which is printing the coordinates, is in the callback function of the pub method and this means the pub method is being called.
Next Step: Building the Subscriber to Receive the Data