The Greatest Grid: History of The Master Plan of Manhattan

Lab Reports, Timelines


Every city has its unique history of city planning which leads to different street systems. Manhattan is laid out on a uniform grid of streets and avenues, making it easy to navigate. The street grid is a defining element of Manhattan. But it was not always like that.

Before the grid, New York City grew organically, with no overarching order. The Commissioners’ Plan of 1811 was the original design for the streets of Manhattan above Houston Street and below 155th Street, which put in place the rectangular grid plan of streets and lots that has defined Manhattan to this day. (Augustyn & Cohen, pp. 100–06)

With an urban design background, I was always sensitive about how the cities are formed. After exploring the structure of Manhattan’s urban fabric using an interactive map created by Morphocode called Urban Layers, I got inspired and decided to dive deep into the history of the master plan of Manhattan using TimelineJS to visualize the evolution of the greatest grid of Manhattan.

Screen capture of Urban Layers, showing interaction with the map.

Materials and Datasets

TimelineJS : An open-source tool to build visually rich, interactive timelines easily

Google Sheets : A web-based software used to organize the content of the timeline

Museum Of The City Of New York : A informational website used to collect data

Design Process


After choosing the topic on the history of city planning of Manhattan, I did plenty of research and narrowed down the subject to the grid street system of Manhattan which can provide a more detailed, appealing and meaningful visual outcome.

Collect Data

Collecting data from multiple sources provides a thorough understanding of the evaluation of the griding street system of Manhattan. Enough literal and media data were collected in order to proceed the next step.

Analyze Data

Review and identify the important data to make the timeline useful, usable and desirable. 7 important events were picked out to complete the timeline of the greatest grid. 2 related pictures were picked out for each event to support the timeline.

Visualize Data

Input the analyzed data in google sheets. Adjust the format of the content using HTML and the basic settings in TimelineJS. Constantly refresh the preview link to get the satisfied result.

Results and Interpretation

The Greatest Grid – History of The Master Plan of Manhattan

Screenshot of Timeline

Google Sheets

Screenshot of Google Sheets

Reflection and Future Directions

During the process of collecting the data, I discovered lots of Interactive maps of Manhattan, which are very educational in both general knowledge of the history manhattan grid system and the expertise of design and data visualization. For me, it is a great opportunity to explore the visualization field.

The collaboration of google sheets and TimelineJS shows a good example of using the open-source tool to organize and visualize data. This tool makes it easy for beginners like me to make interactive timelines that can be embedded on other websites. In the future, I would love to learn to use JSON skills to create custom installations while keeping TimelineJS’s core functionality.