Skip to content

Instantly share code, notes, and snippets.

@MostlyEmre
Created December 16, 2022 02:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MostlyEmre/6ee4d5a1ccf8fb0dc7e4992456754a0c to your computer and use it in GitHub Desktop.
Save MostlyEmre/6ee4d5a1ccf8fb0dc7e4992456754a0c to your computer and use it in GitHub Desktop.
title: "Politics, Tech and Fallout Shelters"
slug: "politics-tech-fallout-shelters"
category: "sandbox"
published: true
date: 1545274104

fallout-1.png

As a part of a school assignment, I had the opportunity to design an interactive data visualization on the topic of my choice. I chose to explore the relationship between politics, technology, and fallout shelters, which can be summarized as the public's anxiety surrounding nuclear threats.

To effectively present the data, I utilized the Pareto Chart as the base of my visualization and supplemented it with a dot-plot-style news composition to provide additional depth for the user. I also incorporated elements such as color, hierarchy, and icons to minimize the amount of text and enhance the overall appeal of the visualization.

One of the biggest challenges I faced during this project was determining the composition and colors for the "Presidents" page. Overall, the creation of this data visualization allowed me to showcase my skills in visual design and data analysis.

PRELIMINARY DATA VISUALIZATION

During the preliminary phase of this data visualization project, I created a version for a different class that focused more on the research aspect. While the content of this preliminary visualization was strong, the visual appeal was not as polished as the final version.

fallout-2.png

One of the main challenges during the preliminary phase of this project was determining how to effectively visualize the relationship between three different data sources. Another challenge was to provide enough information for the viewer to understand the context, while also allowing for the opportunity for them to draw their own conclusions.

THE DESIGN OVERHAUL

fallout-3.png

To begin my design process, I started by sketching out two different concepts on Illustrator (although I typically prefer to sketch by hand). After careful consideration, I chose the concept on the left as it provided the best way to visualize the development and causation in my data.

fallout-4.png

Next, I created the main page of the visualization, opting for vibrant colors to make it more engaging. I used blue to represent the USA and red to represent the USSR and its allies, and mixed the two colors to create purple as a representation of both worlds. One challenge I faced during this stage was selecting a color to represent the Google nGram data, as I struggled to find a hue with enough contrast. Eventually, I settled on green.

fallout-5.png fallout-6.png fallout-7.png fallout-8.png

I then moved on to the news page, which presented the main political actors on the left with a larger visual and the opposing party on the right with a smaller photograph. To make their political affiliations clear, I used the same colors as those used for the countries/blocks. I also incorporated the customized country flag of the main actor in the background, although the USSR's flag proved to be a bit of a challenge due to its lack of detail.

fallout-9.png

Finally, I created the "Presidents" page, which presented a number of challenges, particularly in terms of creating a hierarchy with the color palette and lacking the ability to justify the text in Adobe XD. Despite these challenges, I am pleased with the final result.

fallout-10.png fallout-11.png fallout-12.png

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment