How I made ‘Deported’

Deportation is a hot topic. Just a week ago, the first DREAMer was deported, and President Trump has made promises to deport 5 to 6 million undocumented immigrants with criminal backgrounds. Plus, there’s talk of that infamous wall.

But just are the “bad hombres” that President Trump wants to deport? How has the U.S. handled immigration in the past? Before we look forward to the future of deportation in the U.S., what is currently going on in this country?

I wanted to create some kind of project within the topic of immigration. It’s topical, it’s important, and it is something I am quite interested in exploring more about. But wow, it is so hard to find up-to-date data. Thankfully, the Transactional Records Access Clearinghouse (TRAC), a data gathering/distributing group over at Syracuse University, has compiled a ton of data about immigration. (thank you, Dr. Lewis, for the excellent tip).

TRAC offers data on removal, immigration backlog, legal proceedings, etc. But in the end, I chose to focus on deportation data. I decided to create an app to show the top states for deportations in the United States. I wanted to do this with Flask, since I recently completed my first Flask app (a little database of NPR correspondents with awesome names) and wanted to get more practice.

Mapping it

I wanted to show the number of deportations for each town in each of the states with the most deportations. I love a good interactive map, after all. I’ve used Leaflet.js and Carto, but I knew it would be extremely time-consuming to get the latitudes and longitudes for each city (I had two weeks to whip this whole thing together, all while doing other final projects and exams). Therefore, Google Fusion Tables seemed to be the best option. They aren’t the fanciest maps, but I can import a CSV with a zillion city names and Google will map them for me so fast without requiring me to create additional columns for lat and long. It was a no brainer.

Screenshot of my Google Fusion Table for Texas deportations. Nothing fancy, but it’s interactive and it works.

So I had the maps. Next, I had to figure out how the heck to embed each map into a different page. Normally I would put all of the info that I want to pass into the Flask template into a Python dictionary. I wanted to have a separate web page for each state, and each page would have its own map. What I decided to do was include the iframe in the Flask template and in the Python dictionary, each state would have a different link to its respective Google Fusion Table. Then, I could pass in a link for the src of each different map with a Jinja2 variable that looks like this → {{map}}

This is the little chunk of code in my template page that was supposed to do this:

Yes, it bothers me that the closing <p> tag is not aligned. Don’t worry, I went back and fixed it.

This should have worked. But I ran into a little problem.

I kept getting a really ugly error that read “Embedding failed. There’s a problem. Unable to display the visualization type provided with the “viz” parameter: null.” Cue confusion/ sadness.

After a lot of Googling, frustration, and then finally going to a friend for help, we figured out the problem by inspecting the elements on the page. The issue was with the ampersands in the iframe! I had put the embed codes into a CSV file and then converted it into a Python dictionary with Mr Data Converter so that I could pass all of the information into my Flask templates. But what I didn’t realize was for some reason, the src link in the iframe included every ampersand (&) as &amp; This was completely throwing everything off! Python does not like this, apparently.

I ended up manually going into the document that had the Python dictionary and deleting “amp;” so that plain ampersands remained in the links. After deploying the app again, it worked!

So that’s pretty much it. It was a lot easier to make this than I thought, so I went back to the TRAC website and found two more categories to add to the template — number of people deported with no conviction, and the most common conviction that caused people to be deported.

Styling it

After the Python and Flask bits came my favorite part — the design.

I saw this really cool site on Awwwards and I wanted to use a color palette with blue, grey, black and a splash of red. I also really like how the site has splashes of color that look like watercolor paint in the background. This gave me the idea to create a watercolor American map for the page. Have I done this before?? No. But I’ve used watercolor brushes before to make other projects and I figured it wouldn’t be too bad.

I originally downloaded these free watercolor brushes from this site a million years ago. To make this map, first I made a layer with an actual map of American states. Then, I made a new layer and traced an outline of the map with one of the watercolor brushes. After that, I just added more watercolor blotches with different brushes and colors to the layer. The more I stacked different colors and textures the more it started to look like a real map. Then I added a new layer with a solid color to function as a background so that the map popped.

I made this map in Photoshop and it was very fun and relaxing. I highly recommend downloading some watercolor brushes, opening up a shape that you like, and then just adding random color splotches on top until you can identify the shape.

The end

Here is Deported You can check out my code on my Github. Please let me know what you think! And as always, feel free to tweet me at