As four dedicated students of American history, we were inspired by the love of our country and, combined with the HackTrin V theme of time, out sprouted the "A Visual History of the United States".

What it does

Our program shows an interactive map of the United States through time. The user can scroll through time using the slider at the bottom of the page. Each year shows whether the states were a full state, a territory, or not part of the US. The user can scroll over the states and see the name and the date it joined the union. The legend on the side shows the year currently showing and which colors represent the status of the states.

How we built it

We built this interactive tool with d3.js, a JavaScript library commonly used for data visualizations. We also implemented HTML and CSS, as well as json and csv for data organization.

Challenges we ran into

Originally, we had difficulties with updating our map to reflect different periods in history as represented by the slider. However, with the addition of code that refreshed the screen and redrew a map of the same time period, we were able to overcome this challenge and successfully implement a dynamic, interactive map of the United States.

Accomplishments that we're proud of

We used a language that we were unfamiliar with, yet with help from our mentors and the internet, we were able to figure out how to create a data visualization using csvs, jsons, and d3.js.

What we learned

We learned how to adapt online libraries for our own use in specific personal projects. We also gained a better understanding of how to implement javascript alongside html to create a fluid, interactive website.

What's next for hacktrinV

We would like to create more features on this tool to help out teachers with their curriculum for American History. This could include contemporary history on politics, interesting facts from each state in a given year, state capitals, and much more.

Share this project: