Lab Report 1: History of Madrid

The topic of this information visualization JS timeline lab is an abbreviated history of the city of Madrid, Spain. I wanted to know how I would highlight the history of such an old city in under 20 pages on the JS timeline. It was a personal synthesis of my background and education as a culture and history student in that city. I wanted to know what portions of Spanish history I would emphasize and what portions I would exclude from my timeline. Including an image and relevant, yet discrete text, was another intriguing aspect of this lab. Knowing where to find appropriate and original representations of each historical landmark was another challenge I needed to address. Color choice was an important decision as well, as it can affect the layout of the website and the easy legibility of the text.

Three visualizations that most inspired me in my design of this timeline were: How Wine Colonized the World timeline on Vinepair; Nelson Mandela’s Extraordinary Life timeline on Time; and the Historical Timeline of the National Archives. In the Vinepair timeline, I enjoyed the clean use of the colors of the French flag and how the title of the site ran through continuously on every page of the timeline. However, I wish there had been accompanying thumbnail images. In the Time timeline, the written information and accompanying photographs were minimal and informative. Nevertheless, I was disappointed to see that half of the visualizations had a sentence or two of text and no accompanying image. Finally, in the National Archives timeline, I found the photographs, text and thumbnails to be nicely done, yet the overall site was a little too stark for my taste. This inspired me to use images and a background that contain appealing color contrasts.

In constructing my History of Madrid site I used JS timeline as the barebones structure for the timeline. All of the information was linked to the site through a Google Sheet template that JS timeline provided. Instead of using the Paletton site to determine an appropriate hex code for the background color of the site, I looked over a design site that gave 100 color combinations, with four hex codes per color combination category. I had already studied all of the events on my timeline in undergrad and grad classes in Madrid, but I verified the exact dates in notes by referring to a Spanish history of Madrid timeline on Wikipedia. I acquired most of the images I used from my Spanish friends’ Instagram accounts. They all still live in Madrid and a few of them are photographers. However, creative commons and Wikipedia commons supplied all the other images for my timeline.

I attempted to make my History of Madrid timeline as informative and pleasing to the eye as I could. Since living in Madrid was such a fundamental part of my life, I wanted to make others appreciate some of its interest and value, both historically and culturally. I only hope I did the long and complex history of Madrid justice, while at the same time, making it interesting and engaging to the public. The choices I made as to which historical events were included in the timeline centered around the prominence Madrid played in the event historically and the importance I felt that said event deserved. For example, I chose to leave out the War of Succession because it did not relate specifically to Madrid. I am pleased overall with the images I was able to acquire and the general structure of my History of Madrid timeline. The thumbnails and background color do not upset my sensitive eyesight, so I hope that this is the case for others. One thing I do worry about are that some titles and events are difficult to translate into English. I can only expect that I have made it clear enough for English speakers, without translating any proper names of people or events.

I hope to develop this timeline more in the future, by adding more components to the timeline. It would be interesting to create a continuation of the JS timeline template using a different formatting tool that would allow me to include more textual and visual information. Also, adding a title page that continues across all of the distinct event pages, as in the Vinepair timeline, would develop a more coherent narrative. Learning more about creating distinct colorations for the timeline thumbnail background at the bottom would stylize the site a bit more. The further addition of, or links to, a backing soundtrack would culturally enhance the site. With extra time, I would consult with what JS timeline allows the creator to do and add to the timeline template.