Category Archives: Blog

Mapping Urban Data: Course Preview

by . Posted on
15 Jun

We are excited to share with you a preview of our video course Mapping Urban Data!

The course will cover the whole process of building an interactive web map: from urban data exploration and design principles to building the UI and adding interactivity with JavaScript.

Mapping Urban Data takes a hands-on approach to data visualization through a series of practical examples. Each case study revolves around a powerful workflow based on six steps: Story, Data, Map Design, Web Mapping, User Experience & Publishing.

In Part One of the course we will cover each step, focusing on the topic of Land Use in New York City. You will start with a raw dataset, explore its attributes, design a map, add interactivity and finally publish it on the web.

Here’s a short preview of what you might expect from each section:

 

 

 

1. Story

As a crucial part of almost every urban related study, Land use is a great introduction to the Mapping Urban Data course series. This is one of the most important components of urban form – both on the neighborhood level and on a broader city-wide scale.

Land use data is extremely versatile: it is useful for establishing the number of potential destinations in a neighborhood and determining the number of public spaces within a walking distance. Mapping land use can also provide a snapshot of urban diversity and support more general assumptions regarding neighborhood vitality and walkability.

 

 

 

2. Data

Unlocking the potential of data starts with data exploration. In the second step of the workflow we focus on working with geospatial data, data formats and GIS tools.

You will get familiar with the PLUTO dataset and explore its meta-data, context and structure. You will learn how to access, modify and explore common geospatial data formats; how to manage data attributes, style geometries and inspect features. Finally, we will prepare the dataset for web mapping by cleaning and refining the data attributes.

 

 

3. Map Design

As any graphic creation, a map can benefit from the cautious combination of form, type and most of all – color.

In this section we will review some of the design principles and best practices in cartography. You will understand why design choices are critical not only for providing your audience with a visually appealing map but also for conveying the information correctly.

We will talk about the perceptual dimensions of color, visual variables and the importance of designing accessible maps. By the end of this section you will also learn how to choose the right color scheme based on the nature of your data and gain a better understanding of map perception.

 

 

 

4. Web Mapping

In this section we will talk about the fundamentals of web mapping: how web maps work in the browser, how we render the world into map tiles and what makes web maps so fast. You’ll get familiar with the most popular client libraries and tile generators; the differences between raster and vector tiles and what makes vector tiles a great choice for interactive visualizations.

Next, you will take Mapbox Studio for a spin and create your own map style. We will talk about tilesets, zoom extents, layers and filters. Finally, we will apply data-driven styling and reveal details on demand through zoom functions.

 

 

 

5. UX

This part of the course is dedicated to the User Experience of our project. That includes the process of designing the User Interface and adding interactions to our map. We will review some of the best mapping examples and see how we can combine different interactions, page layouts and UI components to enrich the User Experience.

We will guide you in the transition from visual style editing to web development. You will create an interactive web map and build a custom map legend. Along the way, we will cover how HTML elements and attributes define the structure of the web document and how CSS declarations, selectors and rules control the visual look of the page.

Then, we will discuss how custom map interactions offer new possibilities to reveal data insights, inspect the map features and tell a better story. We will continue by adding a popup interaction and providing more information about selected lots.

To get full control over the web map we will write JavaScript code. We will cover the fundamentals of working with data values, variables, object structures and functions. Then, we will continue with Mapbox GL JS – a modern JavaScript library for web mapping.

You will learn how to use custom map styles, control the map position, query the rendered features and handle user interactions among others. We will talk about declarations, expressions, arguments, map methods, function listeners and other key JavaScript concepts — all from a web mapping perspective.

 

 

6. Publishing

Finally, we will see how to publish our interactive map online. You will learn how to use git to keep track of code changes and how to deploy the project on a remote server.

 

 

Tools

Throughout the course, we will use several free and open-source tools. They will provide a solid base for your Mapping Data endeavours.

We will use QGIS to explore the geospatial datasets, Mapbox Studio to create and style our web map, and Open Web Standards such as HTML5, CSS and JavaScript to build an interactive urban data visualization.

To write JavaScript code we are going to use Visual Studio Code. We will use the Console API and Developer Tools to quickly iterate on features and fix errors. Git and Github Pages will provide code management and free hosting for our project.

 

 

 

30 videos. 4+ Hours of Content

We’ve put together more than 4 hours of content, carefully organized into 30 beautifully illustrated videos.  Along the way, you will gain understanding of data formats, information design principles, cartography fundamentals and the coding skills required to finish the project.

Mapping Urban Data is suitable for architects, urban planners and data enthusiasts alike. It is beginner-friendly and does not assume previous knowledge of the topic. Users with experience in coding, GIS and web mapping can also benefit from the course by learning new practical skills and acquiring a better understanding of the whole process.

Part One of the Course covers the entire workflow focusing on the topic of Land Use. The course will launch soon with discounts for subscribers to Morphocode Academy. You can subscribe in the form bellow and we will notify you when it becomes available.

 

UPDATE:  The course page is now live, with detailed information about its content, structure and key takeaways!

Learn More

 

Morphocode Academy

Fields marked with a * are required.

The use of color in maps

by . Posted on
13 Feb

The use of color in maps and data visualizations has a long tradition. Color, along with position, size, shape, value, orientation, and texture is one of the primary means to encode data graphically.

Since William Playfair‘s revolutionary introduction of statistical graphs in the 1786 “Commercial and Political Atlas“, color has been used as a tool to convey categorical and quantitative differences in data visualization. Playfair used color coding to emphasize variations in economic trends and to differentiate variables in his graphs, which were hand-colored and distributed in limited editions.

Imports of cotton in Europe for the years 1858, 1864 and 1865. Charles Joseph Minard (1866). Source: Library of Congress Geography and Map Division Washington, D.C.

Charles Joseph Minard is another pioneer of information graphics who used color to visualize flows of goods and people across countries in his thematic maps. The main purpose of his graphic explorations was to make ordinal relationships immediately visible to the eye and the use of color was a central aspect of this process. Minard is widely known for the invention of the flow map. He also authored the famous “Figurative Map of the successive losses in men of the French Army in the Russian campaign 1812-1813” – a map that, according to E. J. Marey, defied the pen of the historian with its brutal eloquence.

Although color has been present for centuries in handcrafted maps, it was not until the mid-nineteenth century, that the adaptation of lithographic techniques to printing allowed its wider use in graphic works. At that time, color became an important perceptual feature in the design of thematic maps and statistical diagrams (Friendly, 2009).

Wage and nationality maps, “Hull House Maps and Papers ” (1895) – a groundbreaking study, led by Jane Addams and Florence Kelley. The study was influenced by Charles Booth’s poverty maps of London.

Color as a visual variable

Color, along with position, size, shape, value, orientation, and texture is what Jacques Bertin calls a visual variable:
a set of symbols that can be applied to data in order to convey the underlying information. In that sense the wise and often conservative use of color is a prerequisite for accuracy in the graphic interpretation of data. When not used properly, color in maps can obscure the data and mislead the reader by concealing the actual state of the observed problem.

Movement of Iron Ore on the Great Lakes, 1897 and 1907. Map detail illustrating the use of color and texture as visual variables.

In order to apply color to maps effectively, a designer needs to manipulate properly the three perceptual dimensions that characterize it: Hue, Saturation and Lightness. Hue is what we associate with color names – red, green, blue etc. Saturation is the vividness of a color and is also known as Chroma or Intensity. Lightness is a relative measure describing how much light appears to reflect from an object compared to what looks white in the scene (Brewer, 1999). Lightness is perhaps the most important of the three perceptual dimensions when it comes to data representation and is used to show ordered differences.

1958 map of New York City by Eduard Imhof.

Color is applied to maps to encode or highlight data, but it also has an aesthetic dimension, perhaps best illustrated in the works of swiss mapmaker Eduard Imhof whose school maps and atlases are world famous examples of excellence in the domain of cartography. In his classic book on relief representation, Imhof dedicates a whole chapter to the use of color, providing invaluable guidance with a set of rules for color compositions. Although the chapter concerns mostly the use of hypsometric tints and the selection of colors for elements of the landscape, Imhof’s rules are timeless and applicable in other cases as well. Imhof insisted that strong, heavy rich and solid colors should be limited to the small areas of extremes in order to avoid the unbearable effects of placing them next to each other over large areas. He also suggested that base-colors are equally important since they allowed for the smaller, brighter areas to stand out: a principle that puts up the lighter shades of gray among the most versatile colors.

Generalized geologic map of the moon showing major geologic units grouped by age. Detail from I-1162 Geologic Map of the South Side of the Moon. USRA Lunar and Planetary Institute.

Types of color schemes

There are three main types of color schemes applied to maps: Qualitative, Sequential and Diverging. Binary schemes are also used to visualize nominal differences between two categories. Variation in all three perceptual dimensions of color – Hue, Saturation and Lightness – are applied to show differences in the data. The basic principle is that variations in hue visualize nominal/categorical differences while variations in lightness visualize ordinal differences. But the strict application of this rule varies from one case to another: qualitative schemes may apply plenty of variations in lightness, especially when there is a large number of categories to display and sequential scales can benefit from hue variations when they are first and foremost ordered by lightness.

 

Qualitative schemes are applied to discrete unordered classes of nominal data such as race or ethnicity. They are not appropriate for mapping ordered numerical data. The distinction between classes becomes visible through variations in hue, ideally with no or slight lightness differences between colors. If a class needs to be highlighted it is possible to use a darker or more saturated color to visualize it. Qualitative schemes may also consist of paired hues with lighter and darker shades of the same color, applied to related categories (ex: related land use categories such as single and multifamily residential buildings).

Sequential schemes are applied to ordered, often numerical data such as floor area ratio per lot or population density per square mile. Changes in color lightness correspond to the progression from low to high: light colors are used for lower values and the dark colors are used for higher values. Sequential schemes can derive from both single and multi-hue combinations. The higher the number of data classes – the more difficult the distinction between each step.

Diverging schemes are often described as a combination of two sequential schemes with a critical break point in the middle. The two sequences “diverge” from a shared light color that stresses important mid-ranges in the data. The two extremes are visualized by contrasting dark hues while changes in lightness are used to display intermediate values. Diverging schemes are usually symmetrical but specific data distribution may require shifting the break point towards either one of the extremes. Common examples of data suitable for diverging color scales are temperature variations and stock exchange dynamics.

color in maps: qualitative color scheme

Using a qualitative color scheme with both hue and lightness variations to map twelve categories of land use in New York City. Map by Morphocode

color in maps: sequential color scheme

Using a sequential color scheme to map floor area ratios in New York City. Map by Morphocode

color in maps: binary color scheme

An example of a binary color scheme. The map shows buildings that are currently part of the cultural heritage in Sofia in yellow and buildings that are no longer listed as such in blue. Map by Morphocode.

 

 

 

Design for the color-blind

Making a map accessible for people with color vision deficiency is another important thing to consider while designing color scales. Approximately 4.5 percent of the population worldwide is color blind with the red–green color blindness being the most common type. This decreased ability to recognize color affects more often men than women: around 8 percent of the male population is color blind while only 0.5 percent of women have some sort of color vision impairment.

color in maps: visual impairmentPeople who are color-blind can still see lightness differences and a fairly wide range of hue differences (Brewer, 1999). However qualitative schemes remain particularly difficult to read by color-blind users; sequential schemes, on the other hand, are much more accessible due to the lightness variation between each step. In order to make a categorical map readable by an audience with color vision impairment it is necessary to add variations in both hue and lightness between each step. Even then, if the categories are more than “the magical number 7” it would be almost impossible to make the map accessible. A possible solution to that problem is to add texture to make the steps more distinguishable from one another.

color in maps: accessibility

 

Mapping Urban Data: Online Course

In our upcoming online course Mapping Urban Data we will discuss in further detail the use of color to represent data on maps. You will learn how to design and apply sequential and categorical schemes through a series of practical examples. The course takes a hands-on approach to data visualization through a range of New York City–based case studies covering topics such as built density, land use and sidewalk cafés.

Mapping Urban Data: The Workflow
Choosing the right color scheme is part of the process of creating an interactive urban data visualization. The entire workflow will guide you through the process of spatial data exploration, map design, web mapping and map tiles generation, user interaction design, along with the coding skills required to finish the project. The course will be available soon offering special discounts to Morphocode Academy subscribers.

 

Course Overview

The course page is now live, with detailed information about its content, structure and key takeaways!

Learn More

 

 

Image sources:

1. Imports of cotton in Europe for the years 1858, 1864 and 1865. Charles Joseph Minard (1866) is courtesy of Library of Congress Geography and Map Division Washington, D.C.
2. Wage and nationality maps, “Hull House Maps and Papers ” (1895) – a groundbreaking study, led by Jane Addams and Florence Kelley. The study was influenced by Charles Booth’s poverty maps of London.
3. Movement of Iron Ore on the Great Lakes, 1897 and 1907. The Newberry Digital Collection
4. 1958 map of New York City by Eduard Imhof. Source: wonderful Codex99 blog
5. Generalized geologic map of the moon. Detail from I-1162 Geologic Map of the South Side of the Moon. USRA Lunar and Planetary Institute.

All other images are courtesy of Morphocode

 

Readings:

1. Bertin, J. (1967). “Sémiologie Graphique: Les diagrammes, les réseaux, les cartes”. Gauthier-Villars, Paris.
2. Brewer, C. A. (1999). “Color Use Guidelines For Data Representation”. Proceedings Of The Section On Statistical Graphics, American Statistical Association.
3. Friendly, M. (2008). “The Golden Age of Statistical Graphics“. Statistical Science 2008, Vol. 23, No. 4, 502–535
4. Imhof, E. (2007). “Cartographic Relief Presentations” , English ed. ESRI Press, Redlands, CA
5. Marey, E.]. (1885). “La Méthode graphique dans les sciences expérimentales et principalement en physiologie et en médecine“, G. Masson, Paris, p.73: “Toujours il arrive a des effets saisissants, mais nulle part la representation graphique de la marche des armees n’atteint ce degre de brutale eloquence qui semble defier la plume de l’historien.”
6. Playfair, W. (2005). The Commercial and Political Atlas and Statistical Breviary, Edited and Introduced by Howard Wainer and Ian Spence, Cambridge University Press, New York, NY.

 

Upcoming course: Mapping Urban Data

by . Posted on
15 Dec

 

“Mapping Urban Data” will be the first in a series of video courses dedicated to exploring and visualizing data about cities. The course is coming soon on Morphocode Academy and will provide you with all the necessary skills to create web maps, work with data and explore urban insights.

You will learn how to collect and use geospatial data, as well as how to style and publish your maps on the web. “Mapping Urban Data” takes a hands-on approach to data visualization through a range of New York City–based case studies covering topics such as built density, energy consumption and mobility.

 

 

morphocode-case-study-nyc

Exploring the City: Case Study NYC

New York City is exemplary for its thorough use of data in urban analytics and policy evaluation. The success of large scale projects such as the reconstruction of Times Square; Green Light for Midtown and NYC Plaza Program is largely due to the data-driven approach applied by city departments. Currently, the Big Apple’s open data portal provides public access to over 1,500 datasets from various agencies, making the city a great starting point for data explorations.

 

morphocode-case-studies-2

The course will introduce you to interactive web mapping through one of New York city’s most valuable datasets –  PLUTO. Containing detailed information on the tax lot level, PLUTO was first released to the open data community in 2013 and was considered a huge win. We will use PLUTO and a handful of other interesting datasets to explore urban insights and create interactive maps from the ground up.

 

 

Key Takeaways

“Mapping Urban Data” will guide you through a series of practical examples. You will start with a raw dataset, explore its attributes, design a map, add interactivity and finally publish it on the web. You will gain understanding of data formats, information design principles, cartography fundamentals and the coding skills required to finish the project.

The course is designed to be beginners-friendly and is suitable for architects, designers, urban planners, journalists or anyone genuinely interested in the topic. We will cover the following topics:

icon-data-exploration-blue

Data
Learn how to handle open data sets and common data formats such as CSV, GeoJSON and Shapefiles. Work your way through data fields, types and file formats.

Information Design
Create beautiful maps and data visualizations. Learn the fundamentals of information design, color scales, qualitative and quantitative maps.

Cartography
Transform data into maps. Handle map projections, inspect features, modify data attributes and style geometries.


Web Mapping
Export your visualizations for the Web. Learn the fundamentals: raster and vector map tiles, Web Mercator, zoom levels, feature collections.

Interaction
Provide additional levels of interactivity. Handle user interactions and design a functional interface for your visualization.


Code
Learn JavaScript, HTML5 and CSS and bring your data to life. Combine data, map and story into a single web page and share it with your friends.

 

 

morphocode-learning-path-data-city-1

The Big Picture: Data and the City

Rapid urbanization and advances in Information and communication technology are the most pervasive processes shaping the course of contemporary culture and society. “Data & The City” video series is about the intersection of these two global trends. As mobile devices become ubiquitous and spatial information even more abundant, data visualization allows a critical evaluation of active policies and city services by transforming otherwise hidden patterns into visual arguments. The act of transforming raw data into an interactive map creates visual narratives and opens up new possibilities for context-sensitive analysis conducted by urbanists, civic organizations, journalists and policy makers.

 

 

mapping-urban-data-6

Course Update

The course page is now live, with detailed information about its content, structure and key takeaways!

Learn More

 

 

Subscribe

The course is launching in 2017 with special discounts for subscribers to Morphocode Academy. You can subscribe in the form bellow and we will notify you when the course is available.

Morphocode Academy

Fields marked with a * are required.

NYC Sidewalk Cafés

by . Posted on
24 Nov

 

We have recently explored Sidewalk Cafés Licensing Data, provided by the NYC Department of Consumer Affairs.
We’ve used mapbox-gl-js to create an interactive story line, that will highlight different locations and aspects of the data.

A “sidewalk café” is a portion of a legal restaurant that operates on the public sidewalk. There are three main types of sidewalk cafés – enclosed, unenclosed and small unenclosed sidewalk cafés. A combined license is also available for cafés located on corners, where zoning regulations for different types intersect. Currently, there are over 1500 active sidewalk cafés in New York city with the majority of them located in Manhattan. Unenclosed sidewalk cafés happen to be the most popular type and represent 75 percent of the total number of active sidewalk cafés in the city.

 

 

animation_2

 

Unlike traditional coffeehouses that have been present in urban culture for centuries, the sidewalk cafe is a relatively recent phenomenon, whose popularity crossed the boundaries of the Old Continent and made its way to the USA in the 20th century – not without controversy .

In 1929, New York City started legally allowing unenclosed sidewalk cafes. Soon after, in 1933, they were banished by H. Warren Hubbert, Manhattan’s commissioner of public works, and it wasn’t until the mid-1960’s that city officials began to endorse the spread of this continental touch. In the beginning of the 60’s there were around 30 sidewalk cafes in NYC, located mostly in Greenwich Village.

 

gehl-quote

 

Currently, sidewalk cafes are regarded as neighborhood amenities that encourage social interactions and allow people to engage in street life or simply to enjoy the “sidewalk ballet“. Outdoor sitting is highly valued by urban planners and is considered to have a positive impact on street vitality. Since sidewalks represent a huge fraction of the city’s public spaces, they are – as Jan Gehl puts it – the very reason for creating sidewalk cafes.

 

 

Streetfight by Janette Sadik-Khan

by . Posted on
12 Oct

 

In recent years we have followed closely New York City’s urban transformation, notably the installation of a growing number of new pedestrian plazas, the redesign of Times Square and Broadway, and the rising focus on pedestrian-friendly streets. That is why we were excited to get a copy of Janette Sadik-Khan’s recent book – “Streetfight: Handbook for an Urban Revolution“.

 

streetfight-janette-sadik-khan

“Streetfight: Handbook for an Urban Revolution” – cover

Subsequently to the drastic urban transformations she initiated as a former transportation commissioner of New York City under Mayor Michael Bloomberg, Janette Sadik-Khan is now a highly influential figure in urban planning. The book sums up the lessons learned during her six years of tenure, to a large extend dedicated to improving street safety, ensuring access to public space for all and pushing relentlessly forward “the most rapid installation of bike lanes ever executed in any city“. The pedestrian and bike-friendly agenda set by Sadik-Khan enabled projects such as Green Light for Midtown and the NYC Plaza Program, both of which extensively discussed in the book, to transform one of the most challenging urban environments on the planet.

NYC Plaza Program was launched in 2007 with the goal to ensure that all New Yorkers live within a 10-minute walk of quality open space. Public plazas were installed in place of underused street space encouraging a public-private model of partnership between local communities and the DOT. Often referred to as an example of tactical urbanism, the Plaza Program used temporary materials and movable street furniture to transform refuge island into pedestrian plazas overnight. DOT’s first plaza was set up in 2007 at Pearl Street triangle in DUMBO and was followed by another placemaking intervention on Ninth Avenue and 14th Street in Manhattan. As of today the NYC Plaza Program has led to the installation of over seventy new pedestrian plazas in the city. The successful start of this pilot allowed for the Department to take a step further and initiate what was later known as Green Light for Midtown.

 

streetfight-janette-sadik-khan

The installation of a new pedestrian plaza at Pearl Street Triangle in DUMBO marked the beginning of NYC Plaza Program in 2007. Image courtesy: NYC Department of Transportation

 

“The strategy, process, and tools used in DUMBO and at Ninth Avenue and 14th Street provided the street-design and community-outreach template for hundreds of projects to come, setting us up for the greatest transformation yet: Broadway”

Janette Sadik-Khan

 

In the same spirit of experimentation and with pedestrian safety in mind, the Green Light for Midtown project started with a radical move – by closing diagonal Broadway to cars at Times and Herald Squares. This six month pilot project led to the iconic reconstruction of Times Square by Snøhetta and skyrocketed the area into the top ten retail districts on the planet.

 

The transformation of Times Square started as a temporary closure of Broadway for cars and resulted in a full reconstruction project by Snøhetta

The transformation of Times Square started as a temporary closure of Broadway for cars and resulted in a full reconstruction designed by Snøhetta.

 

” Next to safety and mobility, which should be the first considerations, the economic power of sustainable streets is probably the strongest argument for implementing dramatic change.”

Janette Sadik-Khan

 

Janette Sadik-Khan’s tactical interventions were strongly supported by a data-driven approach to urban planning, culminating in DOT’s report – “The Economic Benefits of Sustainable Streets“. The study, as well as the role of data in the process of understanding the street are discussed in Chapter 12, that emphasizes on the necessity to develop new methodologies for measuring the impact of capital projects.

 

New York City Bike Map. Image courtesy: http://www.nycbikemaps.com/

New York City Bike Map. Image courtesy: http://www.nycbikemaps.com/

A large part of the book is dedicated to the importance of encouraging multimodal forms of transportation. As a strong supporter of bicycling, former DOT commissioner enabled the installation of 350 miles of cycleways in New York City during her tenure, including the first parking-protected bike lane in North America on Ninth Avenue. The book also tells the story of NYC’s first rapid bus network, inspired by the worldwide success of BRT . The changes initiated by Janette Sadik-Khan and her DOT team were not met without discontent and often led to severe cultural and political backlashes. Nevertheless they show that transforming an urban environment as complex as New York City is possible and set a great example for other cities to follow.

“Streetfight” is a must read for anyone interested in transportation and urban planning. Though not necessarily a handbook, this volume illustrates how small, incremental changes can become scalable citywide solutions, when combined with a set of clear goals and the right tools to measure the impact of each intervention.

 

Cover image: courtesy of NYC DOT

 

 

 

Visualizing Pedestrian Activity in the City of Melbourne

by . Posted on
28 Dec

 

Pedestrian activity is a direct reflection of the city’s livability and vibrancy. The variety of factors inclining our travelling preferences in favour of walking, range from access to transit and population density to perceived pedestrian safety and street design. Currently, there isn’t a standard approach to measuring walkability. Nevertheless, it is a common belief that a compact and well-connected urban environment, offering a diverse mixture of uses is fundamental to get people to walk.

According to Jeff Speck‘s “General Theory of Walkability“, the first thing you need to do is offer citizens a reason to walk and then make the walk safe, comfortable and interesting. Julie Campoli, an other urban designer with a passion for walkable cities, believes that there are six key elements to the perfect pedestrian environment: Design; Diversity; Density; Distance to Transit; Destination Accessibility and Parking.

As the world’s most liveable city, Melbourne is already exhibiting good results when considering these indicators, yet walkability patterns vary from one location to another. In the last couple of months we explored data from the city’s pedestrian counting system to visualize movement patterns and network interdependencies. Here is a sneak peak of the project’s current state.

Above: Total number of pedestrians counted by year, including busiest day and busiest location. Image by Morphocode.

Melbourne’s Pedestrian Counting System

Melbourne is considered to be the most liveable city in the world according to The 2015 Economist Intelligence Unit ranking. The city is also exemplary for its mindful use of data in urban analytics and for its Open Data Policy allowing simple access to Council-owned information.

In the last six years, local authorities has installed 44 sensors to measure pedestrian activity at strategic locations throughout the city. Each sensor is installed on a street pole or under an awning to cover a pedestrian counting zone on the footpath below. The counts are updated regularly and are published in .csv file format on Melbourne’s Open Data Portal. The raw data is a tabular representation of hourly numbers of pedestrians at each measurement point. We used this open dataset and a visualization technique called “Horizon Graph” to reveal movement patterns in a seamless urban electrocardiogram.

Above: Location of pedestrian counting sensors in the City of Melbourne. Image by Morphocode.

 

For more than 30 years the City of Melbourne has been transforming the municipality’s walking environment. Melbourne’s iconic Bourke Street Mall opened officially in 1983. Guided by the Places for People studies in 1994 and 2005, the City of Melbourne has widened footpaths, laid high quality pavements, encouraged outdoor dining and reduced traffic signal cycle times to support improvements to public transport to make Melbourne a more attractive place to be.
City of Melbourne Walking Plan (2014-2017)

 

The average block size in the Central Business District of Melbourne is 200 by 100 meters. This iconic layout was named after Robert Hoddle, who conceived it in 1837: initially a square grid, the plan was subsequently subdivided in smaller rectangular blocks and still preserves the strong hierarchy of the street system. The Hoddle Grid covers the area from Flinders Street to Queen Victoria Market, and from Spencer Street to Spring Street. Melbourne’s numerous Arcades and Lanes are an important feature of the city’s cultural heritage and provide through-block pedestrian shortcuts that increase connectivity. The majority of the pedestrian counting sensors, installed by the municipality of Melbourne are located in the Central Business District and provide a better understanding of how people navigate through the area.

 

Above: Visualization of pedestrian activity in March 2015 shows significant spikes accross the city during a 3-day Moomba Festival. Image by Morphocode.

Visualizing Pedestrian Activity with Horizon Graphs

To build the visualization we’ve used Cubism.js – a d3 plugin for visualizing time series. The library was developed by Mike Bostock and is built around a visualization technique called Horizon Graph. Horizon graphs are similar to traditional area charts, but allow to fit the same data into less space while preserving resolution. They are often used in data dashboards to monitor real-time activity such as CPU usage and stock exchange data.

Cubism.js comes with built-in support for real-time sources such as Cube and Graphite. It is not well-suited for static data sources such as Melbourne’s Pedestrian Counts dataset. We had to implement a custom Metric to load the pedestrian data from past periods and then plot them on the canvas using a custom Context.

Above: Increasing data density while preserving resolution – how to read a Horizon Graph of pedestrian activity. Image by Morphocode.

 

Above: The 5-minute walk. Access to a wide variety of amenities and services within a short distance can increase pedestrian flows and encourage people to walk. Image by Morphocode.

The 5-minute walk

During the research we also explored access to different types of amenities within the Central Business District of Melbourne, where the majority of the pedestrian counting sensors are located. The map above shows access to basic amenities around the sensor at Alfred Place – a pedestrian shortcut, cutting through the width of a block. Plotted dots visualize the density of 5 types of elements:
● Landmarks and places of interest
● Public Transport stops
● Outdoor furniture
● Public memorials and sculptures
● Drinking fountains

The walking distance standard has slight variations across the globe but it is considered that a person would cover 80 meters within a minute of walking. This is the reason why a 5-minute walk is usually represented as a circle of 400-meter radius.

Above: Sensor profiles show variations in pedestrian activity accross different types of locations. Image by Morphocode.

Places for People: Melbourne’s long-term commitment to walkability

The Places for People study began in 1993 when the city invited Professor Jan Gehl for the first time to assess the quality of public space and public life in Melbourne. The study was reassessed in 2005 and again, another decade later, in 2015. This lengthy data collection period has provided rigorous insight into how the city performs at a local, everyday level for people and continues to inform urban strategies in their long-term commitment to increasing the levels of pedestrian accessibility.

 

“Places for People focuses on walking as the primary mode of transport in the city.”
 City Strategy and Place, 2015

 

Through the years, a variety of measures have been undertaken to make the urban environment more appealing for walking – the amount of footpath space has been expanded by nearly 15 per cent since 2007; a speed limit of 40 km/h has been set in the central city; numerous public spaces have been renovated and through-block laneways have been enhanced and converted to active uses.

Currently, walking accounts for 66 per cent of all trips within the municipality of Melbourne.

 

 

What’s next?

We are currently developing an interactive version of the data visualization that will allow you to explore pedestrian activity by location and time. The project will be published soon on our website. You can subscribe to our newsletter for more updates.

Morphocode in the Best American Infographics 2015

by . Posted on
27 Dec

 

We are extremely happy to be included in the 2015th edition of The Best American Infographics. The third volume in the series captures the finest visual representations of data from the last year. Our project Urban Layers has been selected among the top 10 interactive infographics in the book and is featured in the “Interactive” section curated by Simon Rogers — Data Editor at Google and founder of the Guardian Datablog.

Under the vigilant editing of Pulitzer Prize-winning journalist, Gareth Cook and with a thoughtful introduction from Brain Pickings’ mastermind, Maria Popova, the book is already a bestseller. It features a great variety of works on topics, from sports and cinema to drones, health and politics, organized in four sections. The diversity of topics, visual techniques and approaches to information design makes the book just as suitable for a genuine curious mind as for design professionals.

 

The Best American Infographics 2015

Urban Layers is an interactive visualization that we published an year ago. The project allows you to navigate through historical layers of Manhattan’s built environment, revealing hidden patterns and preserved fragments. The visualization was featured on CityLab, FastCodesign, gizmodo, curbedNY and was selected by Google Maps Mania among the Top 100 maps of 2014.

 

 

The Best American Infographics 2015

In March, Gareth Cook approached us with the news that Urban Layers was selected among the Best American infographics of 2015. The full selection in the “special interactive section” of the book features works by The New York Times Graphics Department, the Washington Post and Fathom.

 

“I chose these works because it felt to me that each illustrated some of the new approaches, from the established media houses to the newest of the new.”

Simon Rogers

 

Here is a short overview of the 10 best interactive infographics as they appear in the book:

 

The Wizards’ shooting stars

The Wizards’ shooting stars

Authors: Todd Lindeman and Lazaro Gamio — Washington Post

The Wizards’ shooting stars is a visual data analysis of the team’s shooting performance. The visualization makes a statistical breakdown of how well each player shoots from various distances and illustrates how data metrics can improve scoring efficiency.

 

 

Inside the Firewall: Tracking the News That China Blocks

Inside the Firewall

Authors: Sisi Wei, Lena Groeger, Mike Tigas and Yue Qiu — ProPublica

Inside the Firewall tracks the news censorship in China. The website-blocking policy used by the Chinese government is often referred as the “Great Firewall of China”.

 

 

 

Colors in motion - Fantastic Mr. Fox

The colors of motion

Author: Charlie Clark

This interactive infographic explores the use of color in moving images, with a focus on film. The average color of each frame is extracted and presented as an interactive poster.

 

 

morphocode-urban-layers-overview

Urban Layers

Authors: Greta Dimitrova and Kiril Mandov — Morphocode

Urban Layers explores the structure of Manhattan’s urban fabric and lets you navigate through historical fragments of the city. The visualization allows you to interact with more than 45 000 buildings directly in the browser.

 

 

NYTimes - Interactive - Derek Jeter swings

A Career at Bat

Authors:  Shan Carter, Joe Ward and David Waldstein — New York Times

A Career at Bat is an interactive visualization answers the question “How many times had Derek Jeter swung a baseball bat in his professional career?”.

 

 

The Best American Infographics 2015 - A Map of every satellite

A map of Every Satellite

Authors: David Yanofsky and Tim Fernholz — Quartz

This interactive graphic allows the reader to sort and explore the entire satellite ecosystem, from milk-carton-size microsats to school-bus-sized spy satellites.

 

 

best-american-infographics-a-day-in-the-life-of-a-taxi

A day in the life of a Taxi

Author: Chris Whong

This web infographic animates the route and activities of a single random New York City taxicab over a single day. The animation shows pickups and drop-offs, passengers, approximate routes traveled, and fares earned.

 

 

best-american-infographics-2015-born-here-died-there

Born Here, Died There

Authors: Maximilian Schich, Mauro Martino, Kerri Smith, Charlotte Stoddart — Nature

This video animation tracks over 100.000 births and deaths, showing where and when notable people were born and where they died. The visualization identifies intellectual hotspots and tracks how empires rise and crumble throughout history.

 

 best-american-infographics-what-the-world-eats-fathom

What the world eats

Authors: Xaquín González Veira, Jason Treat, John Kondis, Alex Stegmaier — National Geographic / Fathom

This graphic shows country-by-country patterns of food consumption and how they change over time. The results, based on data from the UN’s Food and Agriculture Organization, demonstrate trends and tell interesting stories.

 

 

best-american-infographics-nyc-henge

NYC Henge

Authors: Andrew Hill, Sergio Alvarez and Javier Arce — CartoDB

NYCHenge is an interactive map that allows the viewer to explore the angle of the setting sun for any evening of the year and see what streets in New York City align with that sunset.

 

 

Thanks

We would like to thank Gareth Cook — for reaching out and starting this amazing series and Simon Rogers — for appreciating our work and placing it in the top ten interactive infographics of the year!

 

morphocode-data-and-the-city-text-web

Learn more

The Best American Infographics was published in October this year. You can find it on on Amazon, B&N, BAM and Indiebound.

More information about Urban Layers can be found in the post “The Making of Urban Layers“. We are currently working on our long-awaited video course Data & the City that will discuss how to find, analyze and visualize spatial data to better understand urban dynamics. More on that in Morphocode Academy!

 

Hello Munich!

by . Posted on
09 Sep

 

As we already mentioned on twitter and facebook, we will spend the next couple of months in Munich, working as guest artists in PLATFORM. The concept that we are currently developing is called Data Urbanism and will be presented in an exhibition on the 21st of October.

 

Platform
Above: W;HERE by Duncan Swann, exhibition opening. Image courtesy: Vivi D’Angelo for PLATFORM


PLATFORM is a cultural service agency for the creative sector, which develops and implements cultural concepts for the city, public institutions and companies. In particular, it anchors the creative processes of design, art, architecture and theories in urban development processes and a lively dialogue between business, culture and the public are close at heart. This is a pilot project of the city of Munich and is situated in a 2000 square meter floor of a building in a former industrial area.

 

Meanwhile we are residing at Streitfeld where the afternoons could not be more delightful!

We will try to post updates on our work as often as possible and occasionally send newsletters with more details on our upcoming exhibition!

Cover image courtesy of PLATFORM.

 

 

 

Data Urbanism

by . Posted on
08 Sep

 

Context

In 2007, the global urban population reached the 50% threshold and for the first time in history exceeded the global rural population. The same year, the first iPhone was released and set the tone for a smartphone revolution that changed the way we experience, navigate and interact with our immediate urban environment. We are now living in increasingly data-rich environments where open data platforms allow us to access, collect and analyse information about the city. As urban sensors become more and more ubiquitous and spatial information even more abundant, data vizualisation allows a critical evaluation of active policies and city services by transforming otherwise hidden patterns into visual arguments.

The amount of data generated by our daily activities and interactions will increase persistently, as digital devices continue to permeate our lives. And while we use those devices as a central access point to information, the data we generate on a daily basis — either directly or as a by-product of our social activities — is often associated with contextual meta-information about location, usage and people. In other words, data gives a valuable insight into both our social interactions and the environment that staged those interactions. Furthermore there is a strong tendency to open data repositories that were once locked within government agencies. Open access to information, as well as the emergence of low-cost or free analysis web tools, allows citizens to look for patterns in government activity or to use data analysis to advocate for change.

We refer to the process of making urban data visible, accessible and actionable as Data Urbanism.
Data Urbanism suggests an iterative approach to urban planning that starts with harnessing the potential of open spatial data by enabling hands-on interaction with it and transfoming the invisible bits into a coherent exploratory mechanism.

 

 

Cities: The Global Urban Transition

The trends of urbanization differ across the globe. In 2014, Latin America and the Caribbean and Northern America had the highest levels of urbanization, at or above 80%. Europe remains in third place with 73% of its population currently living in urban areas and is expected to reach 80% urban by 2050. Between now and 2050, 90% of the expected increase in the world’s urban population will take place in the urban areas of Africa and Asia [1]. In other words, the projected urban growth will be concentrated in cities in the developing world where the correlation of the rate of urbanization with economic growth has been weaker. Expansion of urban areas is also on average twice as fast as urban population with significant consequences for greenhouse gas emissions and climate change [2].

 

Global-Urban-Expansion

Above: Global urban population growth. Data Source: United Nations, World Urbanization Prospects: The 2014 Revision. Image by Morphocode.

Cities were once defined by Jane Jacobs as “problems in organized complexity”. Today, they are seen as engines of innovation and growth on a global scale which explains the general shift in urban planning thought from problems of equity to problems of efficiency [3]. But the problems of cities go beyond mere benchmarking of sustainability indicators. Social and economic issues in cities are what planners call “wicked problems”. Due to their complexity, they remain computationally intractable and cannot be solved in a top-down fashion by a central planner regardless the amount of data available [4].

Cities-smaller-2
Above: Global urban population growth is propelled by the growth of cities of all sizes. Data Source: United Nations, World Urbanization Prospects: The 2014 Revision. Image by Morphocode.

As rapid urbanization and advances in ICT are shaping the course of contemporary culture and society, the “Smart City” agenda is also gaining momentum. Focused mainly on issues of efficiency and optimal performance, this vision of the city suggests that every human action is quantifiable and therefore predictable. A technocratic take on urban governance that often fails to acknowledge the wider social effects of culture and politics shaping the complexities of urban life. Aside from transforming our cities into optimal systems and turning data into a huge commodity market, the smart tech sector has fewer things to say about the importance of civic engagement.

 

Making Data Visible, Accessible and Actionable

Data science can be understood in terms of seven stages: acquire, parse, filter, mine, represent, refine, and interact [5]. The first step, acquire, is associated with an open data release. This is a critical stage allowing civic hackers and data journalists to harness the revelatory power of data repositories. The other six steps, however, remain an impossible leap for the average citizen.  These steps are strongly associated with the practice of citizen-centered design.[6]

In the best case scenario open data is first released in machine readable format, say a .csv file or a .json file. Even then it is rarely usable by the majority of citizens as making sense of it requires a certain amount of technical skills. Few people, even within the city administration, are capable of transforming data repositories into visual elements of spatio-temporal order. This is where the open data movement is still in its infacy. And as we fail to reveal the full potential of open data, more people fail to recognize it as an integral part of their rights as citizens. In order to bridge the gap between open data and civic society data should be made visible, accessible and actionable for a variety of audiences.

Sofia-Building-Permits-2
Above: Mapping building permits in Sofia. Image by Morphocode

Public data is often locked behind proprietary web interfaces. This prevents the re-use of data and stops citizens from exploring, interacting with and making sense of available datasets. This is the case of the Building Permits in Sofia – a public register that keeps track of all recent building permits issued by the municipality of Sofia. While the data is publicly accessible, it is impossible to download or export it in a machine readable format. The raw data is essentially locked behind a single access point – the clunky interface of the web application. This prevents the re-use of data to create maps and visualizations; to ask questionts and search for answers in the data. As we mapped and visualized this single dataset a variety of questions, concerning the built environment emerged: How is the urban landscape changing and what trends are expected in the years to come?;  What are the dynamics of local businesses? How often does public space renovation happen around the city? How is public money spent? etc. (More updates on this project soon).

 

Data Visualization: Revealing Urban Insights

When Scottish engineer and economist William Playfair invented graphical statistics in the end of the 18th century, no one assumed the impact they would have on modern information design. His early attempts to analyse data from England’s import-export statistics at that time are exemplary for their visual literacy and simplicity. The foundations of graphic representation: line graphs; bar charts of economic data; pie charts and circle graphs – all originated at that time and still remain some of the basic elements of data visualization. More recently the rise of data journalism has brought a new light to the importance of information graphics in contemporary culture, where reading habits are shaped by the ubiquity of digital devices. Collecting data is important, but what’s even more important is connecting them to a specific context and revealing networks of interdependencies. And the best way to convey this type of information is through means of visual communication.

 

Pollution

Above: Visualizing pollution patterns. The data is collected from various sensors deployed in 7 cities around the globe and is part of the Data Canvas initiative. Visit project

Visualizing urban data is a critical task as cities continue to dominate global concerns about climate change, economic prosperity and social equity. Interactive visualizations reveal how cities perform and how people interact with the urban environment by exposing the underlying logic of demographic processes, mobility patterns and digitalized daily transactions. In that sense they are the key to maximizing data efficiency and upgrading urban governance to a more open and agile model. As we strive for more compact, connected and coordinated urban growth, visualizing the dynamics of urban processes becomes both an integral part of city governance and an instrument for civic engagement. Urban data has been explored widely across the globe and the resulting outcomes differ in scale and type: from large scale projects for real-time observation such as the IBM Intelligent Operation Center in Rio de Janeiro, to interactive urban dashboards, mobile applications and hackathons.

In all cases the main challenges for generating dialogue through urban data visualizations consist of choosing the right type of visual strategy and achieving high standarts for data accuracy.

 

 

 

 

References:

1. United Nations, Department of Economic and Social Affairs, Population Division (2014). World Urbanization Prospects: The 2014 Revision, Highlights (ST/ESA/SER.A/352).
2. IPCC, 2014: Climate Change 2014: Mitigation of Climate Change. Contribution of Working Group III to the Fifth Assessment Report of the Intergovernmental Panel on Climate Change [Edenhofer, O., R. Pichs-Madruga, Y. Sokona, E. Farahani, S. Kadner, K. Seyboth, A. Adler, I. Baum, S. Brunner, P. Eickemeier, B. Kriemann, J. Savolainen, S. Schlömer, C. von Stechow, T.Zwickel and J.C. Minx (eds.)]. Cambridge University Press, Cambridge, United Kingdom and New York, NY, USA.
3. Batty, M. (2012). Lecture: Smart Cities & Big Data How We Can Make Cities More Resilient[PDF]. University University College College Dublin
4. Bettencourt, L.M.A. (2013) The Kind of Problem a City is. Santa Fe institute Working Paper. Paper #: 2013-03-008.
5. Fry, B. (2004). Computational Information Design. PhD Thesis, Massachusetts Institute of Technology.
6. Harrel, C.(2013). The Beginning of a Beautiful Friendship: Data and Design in Innovative Citizen Experiences. In Goldstein, B. and Dyson, L.(Eds.). Beyond Transparency: Open Data and the Future of Civic Innovation. San Francisco, CA. Code for America Press.