UX | Design Technologist | Prototyping

Twitter in the US

This project was carried out by Pierre Amelot and me as part of the CMU Graduate class "Making Things Interactive". It was made over the course of two weeks and consisted of creating a physical map of the US which would display the location of tweets happening in real time.

The intention here was to be able to visualize how tweeting trends can spread over the country and how they compare to one another. This could be used for example to watch cultural trends (where do people tweet about coffee and tea?; where do they tweet about Trump or Obama?), or to visualize different reactions during a specific event(where do people tweet about The LA Lakers and the Cleveland Cavaliers during a BasketBall game?).

I was in charge of:

  • The creation of the grid based on the US map and the laser cutter Illustrator files.
  • Coded the "LedStrip.js" that communicates and connects to the LED Strip.
  • Code to set different keywords and colors to each keyword by command line.

Full code repository can be found at the following link: https://github.com/Bierro/Twitter-in-the-us/


Creating the Map Structure, Cutting the Materials

For this project, we decided to create a physical map of the US which would display the location of tweets happening in real time. We divided the map into different areas of same size, each one of which would be light up by a LED. We started from an equirectangular projection map of the US and simplified it on top of a 16x8 grid in Adobe Illustrator (using the “Rasterize” function).

 

Once we have our grid decided, we create the blueprints for the laser cut to cut the plywood in our desired shape. We are going to create a box of 1mx50cmx10cm.

Our top layer will contain 5cm diameter circular holes, separated 6cm apart from each other, that will be filled with white acrylic. Underneath each acrylic circle will be placed one LED. We get the first plywood board and cut our designed map on it. Also, we use extra plywood we have left to create two sides of the box.

 

Next, we will do a very similar process for the layer that will contain the LEDs at about 3cm from the top layer. In this case, the holes are smaller (1.2cm diameter) to fit the LEDs in the right position under the acrylics. Different diameters of the holes could be used based on which model of LED strand you are using.

 

One LED should light up one circle only and not the other ones around it. With the last plywood left, we will create a series of walls that will surround each of the leds and also will help separate the LEDs 3cm from the top layer. Also, as we know our LEDs are separated 6cm between each other, we can create boxes of 6cmx6cm. To help on that, we create dents on the wall every 6cm. The width of the dents should be equal to the depth of the plywood you are using.

 

Finally, we cut the white acrylic to fit it in the 5cm diameter holes in the plywood. In order to make sure it fits and we don’t need to use glue, we cut 5.2cm diameter holes to take into account the kerfing of the laser cutter.

 

Assembling the Map

Now that we have all the materials cut and ready, we are going to assemble the different parts together.

However, before we do anything, we need to figure out the path we are going to use to add the different LED to fill our map. As the cable between our LED is about 6cm long, we either follow a path made by 90-degree angles or use an extra LED (that will not be seen) to do diagonal moves.

 

First of all, place the acrylic circles in the holes of our top layer.

 

Second of all, we will add the 100 LED strip on the second plywood board we cut. We will join the two 50 LED strips together by connecting the ends and soldering the power cables in between. Additionally, we will add the power adaptor to the beginning of the strip.

Once we have our path, we can add the LEDs in the correct number. We can add the LEDs based on the path we created previously.

 

Third of all, it will be time to add the walls around the LEDs. We have a total of 14 walls of 1m by 3cm height, we start gluing the longer ones that will go on the long side to the plywood. As we don’t need to cover areas without LEDs, we saw the extra parts of the walls that are in those areas and we keep gluing them to the plywood.

 

Once we covered all the walls in the long side, we cut and fit the other side using the dents created in the wall.

Fourth of all, we will glue the side of the box to the top layer of plywood.

 

Finally, we place the plywood with the LED inside the box and we tape it to the sides so it stands in place.

 

Connecting the Raspberry Pi 3

Now that we have our structure assembled, we can connect the LED strip to our Raspberry Pi 3. For this project we will be using NodeJS to control the LED strip and connect to twitter.

In order to use the LED strip, we will use the NodeJS library rpi-ws2801. This will require us to connect the cables from our LED strip as follows:

 

Making It Work

As a final step, we will create our NodeJS app that will stream keywords from Twitter, get the location in the US of those tweets and light the proper LED with the desired color.

The code of the app can be found at the following repository.

In order to run the app, use the following command.

node ustwitter.js background_RGB_color( Format r,g,b) FirstKeyword LED_RGB_color(Format r,g,b) Time_on_milliseconds SecondKeyword LED_RGB_color(Format r,g,b) Time_on_milliseconds

E.g. node ustwitter.js 100,100,100 love 255,130,47 1000 hate 178,74,255 1000

 

Some challenges

Ideally we wanted this project to target the whole map of the world. However, due to limitation of resources and time, we decided to focus only in US for this prototype.

Additionally, it took several iterations to get the optimized simplified US map that would be still understood and that would use the 100 LEDs. First iterations had either too many LEDs or if they were a little less than 100, their distribution to complete the path required us of more than 100 LEDs

Featured in instructables.com

 

A post was published at instructables.com which was featured in the Technology section.