Inspiration

Seeing as Donald Trump won his first term in 2016 but lost the second in 2020, we wanted to compare how different the votes of the two elections were. To our surprise, there was no way to compare the two with maps. So we made Election Tracker, a website with interactive data maps for the 2016 and 2020 election along with voting differences.

What it does

Election tracker has two different interactive maps put in the site.
Our maps display the following for both the 2020 and 2016 elections: — Which candidate won/led each state — Most republican and democratic counties (by %) for each state — Flipped states You can hover over various states to find more information. We also have a chart that displays the most significant voting margin differences from the two elections.

How I built it

We build Election Tracker using HTML, CSS, JavaScript, JQuery, and SVG.

Challenges I ran into

The interactive maps were very hard to implement. Simply putting in a picture of the United States map wouldn’t be enough, as we wouldn’t be able to include information for individual states. We needed to use SVG data to make an outline of each state, then add CSS styling and Javascript/jQuery commands for top functionality. Also, making the site look aesthetically pleasing took some time and precision to nail down.

Accomplishments that I'm proud of

An accomplishment we are proud of is building the interactive map of the USA that, when hovered over, displays data about the elections.

What I learned

We learned a lot about how to create interactive websites. Building an interactive map of the USA required us to use and learn many different HTML functions.

What's next for Election Tracker

More statistics! We would like to include more functionality such as displaying electoral votes for each state and displaying combinations of states that the losing candidate could have won in order to have won the election.

Built With

Share this project:

Updates