Morphocode Explorer

We are thrilled to announce that after months of development and multiple design iterations, Morphocode Explorer is now available!

The tool allows planners, businesses, and cities to assess existing site conditions, measure key urban indicators and perform spatial research — directly in the browser. With a powerful, easy to use interface, you will be able to browse through various layers in seconds and access location insights faster than ever.

Here is the latest video preview:

Case Study: New York City

As the most populous city in the United States and the center of a dynamic metropolitan area, New York provides great opportunities for data exploration and comparative urban analysis.

To illustrate how you can understand a project’s context with Morphocode Explorer, we’ve chosen five locations that accommodate various urban conditions. Let’s take a closer look at the case study below:

Move across cities

Morphocode Explorer is designed as an interactive urban atlas that will provide access to various thematic maps and key urban indicators for multiple cities.

While the beta version is launching for NYC only, we are currently expanding the data library and the interactive components to cover more cities across North America, Europe, and Australia.

User Experience

We believe that tools should allow us to work better and faster, and ultimately stretch our understanding of complex phenomena. But tools could also be fun and combine performance with playfulness.

The interactive controls of Morphocode Explorer work together to encourage active reading of the data and allow for unexpected discoveries as you study different locations. You can think of Morhocode Explorer as a tool for investigation, embracing speed and flexibility in the spirit of Engelbart’s conceptual frameworks.

The custom data visualization components are at the core of Morphocode Explorer’s UX. Together with the interactive pedshed, they allow you to analyze your site quickly and explore various metrics. The data is calculated on the fly as you switch between the layers or change the location.

Morphocode Explorer: The Interface

Traditional GIS tools can be overwhelming to the user. The interface usually contains various checkboxes, toggles, and drop-downs. A decision needs to be made every step of the way to perform simple spatial operations. We wanted to reduce this cognitive load and provide an urban analysis tool with simple, yet powerful interactions.

To navigate the interface of Morphocode Explorer, you need to perform two simple actions – drag and scroll.

Application Architecture

Interactive applications such as Morphocode Explorer are composed of many moving parts. The different UI components interact with each other and affect the state of the application. For example, dragging the pedshed redraws the map, but it also triggers an update of the metrics; scrolling through the sidebar updates the map layers, but it also fires network requests to fetch new data.

Keeping track of these dependencies is challenging because there is a large number of possible combinations. To tackle this issue, Morphocode Explorer manages the application state using a Flux-style architecture. The source code is organized into data stores, view components, and a central action dispatcher.

Data flows in one direction — from the data stores to the view components. Changes in the application state occur in response to events dispatched through the action dispatcher.

Data Sources

Every time you move the map or change the active map layer, Morphocode Explorer fetches new data from the server. The data is provided in the form of vector map tiles that contain both geometry and attributes.

We use a custom data pipeline written in python. It combines various data sources and generates web-friendly map tiles. The workflow involves a series of data processing steps that transform the raw data and produce multiple tilesets optimized for fast analysis in the browser.

For example, the demographics layer of Morphocode Explorer is a dot density map that visualizes the population density and the predominant ethnicity groups in the area:

To build the layer, we use data from the Census API. The tabular data contains population counts, sex distribution, ethnicity/race groups, and other demographic properties. Each row is identified by a GEOID, making it possible to associate the demographic attributes to a census block.

To create the dot density map, we group the population into equal-sized bins based on race/ethnicity group and plot the dots uniformly according to the number of people in each census block.

🔎 Start Exploring

The design and development process has been a long journey. Along the way, we had to customize the .mvt format to store only attributes, build a new library of interactive DataViz components using d3, and even use machine learning to produce some of the data layers.

We are excited to see the tool online and hope that you will find it useful. Let us know what you think!