We were inspired by different data visualization apps to create a new way to experience tweets. The team felt that giving tweets more context using their geolocation would give them more immersion and accessibility. We also were inspired by recent AR/VR apps that have been created that allow users to interact with their favorite media while exploring the world around them.

What it does

TweetMap360 takes trending Tweets from around the world and uses their geo locations to lay them out on a dynamic map view while clustering together tweets based on their proximity to certain global hotspots. The map view allows users to seamlessly zoom in/out of different parts of the world and see the most relevant tweets as well as play their embedded media or navigate directly to the tweet itself. Similar to some other map focused experiences, TweetMap360 also incorporates an interactive 360 experience allowing the user to be pulled down into different promoted locations and immersed in the respective 3D environment. Current promoted locations include Times Square (New York City), University of Central Florida (Orlando), and Rio de Janeiro. In this 360 experience, the trending tweets of the locations are rendered around the user and give the user the opportunity to hover over the tweets and focus on them in 3D space. This feature is available to desktop/mobile/and VR headset users alike.

How we built it

We built TweetMap360 using React as the foundation of the web app and incorporated A-Frame to provide the additional 3D experience. Leveraging Mapbox and their API, we integrated the main map view into the React App and marked out our compiled list of tweets. MapBox helped us mark the individual Tweets and clusters for the hotspots as well as give standard zooming and partial 3D perspectives. Using a library called aframe-react, we were able to combine the 3D/VR portion of our app directly into the React app itself. This allowed us to leverage the 3D rendering tools of three.js, the simple VR api of A-Frame, and state and prop management from React all in one package.

Challenges we ran into

Over the course of the project we ran into different challenges. The first came with the drawback of being unable to access the Twitter API due to developer application wait times. This made it harder for the team to access the data we wanted to populate the map and 360 view. Because of this, we had to source the Tweets ourselves but we were still able to apply them to the functionality we wanted. In terms of A-Frame development, the combination of A-Frame and React is somewhat sparsely documented so the team also had to put more effort into understanding A-Frame's API as well as how it translates over in React. It was also the team's first time working with technologies such as A-Frame and three.js so this presented a recurring learning challenge in general.

Accomplishments that we're proud of

The team is proud of creating a cohesive web app that leverages both map APIs and 3D/VR APIs. The transition between both parts of the web app is seamless and we were proud to have been able to combine both elements together. In terms of the map view, we made good breakthroughs in learning the best ways visualize global Twitter hotspots on a map. When it came to the 360 experience, the team also managed to learn how to use A-Frame to create a simple but interactive experience to give the users a new way to explore tweets.

What we learned

We learned how to integrate the Mapbox API into react apps and how to mark certain clusters based on our geolocation data. We also learned how to directly integrate 360/VR experiences directly into React apps using A-Frame as well as learning how to create basic 3D JavaScript experiences.

What's next for TweetMap360

TweetMap360 has the potential to integrate new and more detailed features to really allow users to experience Tweets in a global context. Twitter contains news from all over the world so being able to provide finer detail and incorporate more data from around the world would definitely be beneficial. Also integration of the Twitter API with the project would allow the app to have easier access to the global dataset. We'd like to create more promoted locations for 3D viewing as well. We can possibly extend the concept out to AR as well as build on the 3D experience with more animations and interaction.

Built With

Share this project: