How Cities are built: A history of Visualization in Urban Planning

Lab Reports, Timelines, Visualization


Urban Planning is often considered an interdisciplinary profession in the 21st century. But the work urban planning entails wasn’t always so neatly laid out for those tasked with designing cities. Though civilizations have existed for several millennia, the concept of city planning and visualization in general are relatively new concepts. As society progresses, major events change what our priorities are for ideal city life, and new considerations must be factored into research methods. Urban planning today draws upon techniques developed throughout history which served as turning points for the profession, as I explore in this timeline.

Data Collection & Process

When filtering through different topics, I wanted to center my research around a profession that relies on visualization techniques to gain insights to benefit society. The urban planner is an essential role in the modern world who has a hand in affecting the quality of life for future generations. Modern urban planners employ a wide variety of disciplines in their methodology, including socioeconomic and environmental stability, epidemiology, and accessibility. These are just a few of the elements that go into long-term planning, with the field continuously evolving and data accessibility increasing. So how did urban planning become the all-encompassing profession it is today? To find the answer, I started from the origins of ancient civilizations to discover what kind of visualization techniques, if any, they used to plan their cities.

The first urban planning visual I discovered was from the Eastern Zhou period in Ancient China. The image shown is a mock-up of the original city design in the Kao Gong Ji, a classic work roughly translating to the Diverse Book of Crafts. This grid design was essential to laying the groundwork for cities during its time period.

I found that for some time, cities were designed with protection and royalty in mind. Plans for ideal cities from China through the Renaissance placed much of their emphasis on fortification for their cities, designing new ways to protect against threats, such as the star-shaped plans that appeared across Europe in the 15th century. The turning point in my research arrived at the Age of Enlightenment, when philosophers began to challenge conventional ideas and thoughts, resulting in a focus on individualism and secularism. After this point, urban planning became more focused on improving life for all in an equitable and sustainable fashion.

Advancements in cartography, as well as a new emphasis on scientific data and research, aided in steady progression for urban planning. The ability to compile intersecting data to gain insights was groundbreaking, and the map shown above was a catalyst for the ways we visualize data today. Because epidemiology and visualization had not previously been intertwined, this example inspired urban planners to consider much more in their research. The advent of computing has only sped up the advancements in spatial analysis, allowing anyone to use a geographic information system (GIS), a platform to store and analyze map data, to recreate entire cities and plan for future ones with a quick and easy interface. With visualization reduced to simple tasks using software like ArcGIS, urban planners can now address other growing concerns that affect city life, such as climate change, public health, and social inequality.

Tools and Software

For this project, I used TimelineJS, an open-source tool that uses javascript to organize data entered into a spreadsheet. TimelineJS makes the process of transforming data into interactive timelines easy with the help of HTML and CSS formatting. Organizing my spreadsheet and seeing the information I added show up in the timeline preview in real-time made tracking my changes easy, since the software references a Google sheet that pushes changes to the javascript file.

While the basic format for TimelineJS can be limiting, it also allows users with some HTML and CSS experience to reference formatting changes within cells, which I found useful when arranging my text blocks and selecting a color for my theme. When using the spreadsheet uploader on the TimelineJS website to preview the timeline, you can set several additional parameters for fonts, languages, and dimensions. This was essential once I selected my background color; I realized the default font wasn’t very legible, so I went with a font pairing with slightly larger text and wider kerning. Upon receiving feedback from my peer review, I also opted to create eras to show a clear timeframe for the periods during which some events occurred. Overall, I found TimelineJS useful for both beginners looking to make presentations interactive and advanced users looking to hone in on their design skills.


This project was an exercise in diligence when gathering resources. While I found the subject matter to be relevant and engaging, I struggled to connect the events in history to the current methods of visualization. This led me to go down a rabbit hole of research around urban planning as a whole, which at times led me away from the information visualization aspect I was researching in the first place. In the future, I would like to have a better idea of how to represent events and data in a more linear way, and to also gather resources for my work prior to jumping into creating the timeline.

In terms of the design and composition of the timeline itself, I found that using some of the HTML and CSS knowledge I had was helpful in making the visual presentation a bit more exciting than the default settings applied to the spreadsheet template. However, I do wish that KnightLab had more advanced examples of reformatting using CSS in the spreadsheet, as there is potential for new users to learn a bit as well. I would like to try downloading the CSS file and making edits within to override the defaults and have even more control of the design of future timelines I may create.