Morphocode in the Best American Infographics 2015

 

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 AmazonB&NBAM 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!

 

Urban Layers: What’s next?

We recently announced our latest project Urban Layers – an interactive map that explores the structure of Manhattan’s urban fabric.

The project is a part of an ongoing research focused on the intersection of open data and urban planning. In that sense, visualizing historical data marks the begging of a long-term initiative.
At that point we’ve used open data and some of the latest mapping technologies to render more than 45000 buildings and allow user-interaction with the map.

We are happy to trace and track all of the positive feedback and shout out a big “Thanks” to everyone who shared the project!

 

urban-layers-in-the-media-2

In the Media

We were happy to see Urban Layers gain some attention as it was named Map of the week by Gmaps Mania.

” Urban Layers is an incredible new mapped visualization of Manhattan’s building history. The map uses building construction data from PLUTO with Mapbox GL to create a highly responsive and interactive tool to explore the history of building construction in central New York.”

Mapping the History of Manhattan’s Growth
Keir Clarke — GMapsMania

 

Michelle Young — founder of @untappedcities published a great article about the project:

“A map tool that opens with a quote from Rem Koolhaas’ Delirious New York? How could we resist?”

Explore the Phantom Architecture of NYC’s Past

 

The map was also published on FastCodesign, gizmodo, curbedNYLesEchos.frLumieres de la villeArkitera and featured in a video by France24.

“Morphocode has done their fair part in decoding the building hullaballoo with Urban Layers, an interactive map that allows users to scroll through different decades while it depicts how development spread across the city.”

See How Development in Manhattan Spread Over 250 Years

 

On Citylab

Urban Layers ultimately made it to the front page of Citylab where it became the most popular story.  Make sure to read the full article written by Kriston Capps.

 

“Seeing when those buildings were constructed at the parcel level with a simple slide of a rule is a real advance in data mapping”

Mapping the Age of Every Building in Manhattan

 

 

 

On Twitter

The response on twitter was great. Here are some of our favourite tweets:

 

 

What’s Next?

Urban Layers is a work-in-progress. We have just scratched the surface of what is possible in terms of dynamic urban mapping and we are looking forward to:

Add more ‘Data Layers’
PLUTO – the dataset used in Urban Layers contains various information for each building: year built, footprint, height, ownership, etc. The ‘year built’ data is arguably the most inaccurate field and we are planning to add the rest of the available data to the map.
Adding more data fields and the ability to filter and cross-reference layers will provide a more in-depth look into urban dynamics.

Add more Cities
Adding the rest of NYC, as well as other cities is also something that we are excited about. Amsterdam and Chicago are great candidates for that since they already provide various open data sets.
Do you want to see a particular city/community featured? Drop us a line and let us know.

Fix Bugs
There are a couple of bugs related to the WebGL renderer that prevent to see the map in detail with some hardware configurations.

Better Mobile/Browser Support
We would like to improve the support for touch-enabled devices that support WebGL.

 

 

Support the project

The guys at Mapbox were kind enough to provide us with a one year standard plan and we are looking forward to use its full potential. Thank you Eric & Matt!

For anyone else willing to support the project or interested in any kind of collaboration – feel free to contact us !

Hope you’ve enjoyed Urban Layers. Thanks for spreading the word!

 

Announcing Urban Layers

We are happy to announce that Urban Layers is online!

Urban Layers is an interactive map created by Morphocode that explores the structure of Manhattan’s urban fabric . The map lets you navigate through historical fragments of the borough that have been preserved and are now embedded in its densely built environment.

View Project

 

 

Urban Layers in action

Interface

Use the sliders to identify some of Manhattan’s oldest buildings; to discover how the beginning of the 20th century marked the island’s urban environment or to explore the distribution of building activity over the last decades.

Learn more.

 

 

making-of-urban-layers-morphocode

The Making Of

Urban Layers is based on data from PLUTO and the NYC building footprints dataset. We’ve used Mapbox GL JS to render the map. If you are interested in the whole process of making be sure to visit our Academy page and learn more about The making of Urban Layers.

 

Layers of NYC: Exploring Manhattan’s urban fabric

Layers of NYC is an interactive map created by Morphocode that explores the structure of Manhattan’s urban fabric.

The map lets you navigate through historical fragments of the city that have been preserved and are now embedded in Manhattan’s densely built environment. The rigid archipelago of building blocks has been mapped as a succession of structural episodes starting from 1765.
You can use the timeline sliders to identify some of Manhattan’s oldest buildings; discover how the beginning of the 20th century marked the island skyline or to define the distribution of building activity over the last decades.

We’ve used data from PLUTO and the latest technology from Mapbox – Mapbox GL to create a highly interactive experience.

The map is currently in beta and will soon be available online.  Here is a preview:

morphocode-layers-of-nyc-01

morphocode-layers-of-nyc-02 morphocode-layers-of-nyc-03

User Interactions:

 

morphocode-layers-of-nyc-animated-01

morphocode-layers-of-nyc-animated-02

morphocode-layers-of-nyc-animated-03

 

Make sure to subscribe for our newsletter and we’ll notify you when the map is online:

Fields marked with a * are required.