Morph ​lets you make art from data. It’s free and open-source, works 100% in the web browser and runs on desktops, tablets and phones. It’s designed to be fast and easy to use. It’s focused more on aesthetics than analytics. It takes away the fear of working with data and makes it fun.

Morph is a progressive web appbuilt with J​avascript​. Here’s a quick overview of how it got made – with original sketches, links to early demos and interface design storyboards.

.

ABOVE IMAGE: The Morph Editor, allows for manual or random changes to the image.

Datavized​ has been working for three years reimagining how data can be represented beyond static charts and graphs. Our thinking goes like this…

  1. In digital form, data is ones and zeros
  2. Everything else in the digital world is also made from ones and zeros
  3. This means that data as a raw material can be turned into any other media using code, without losing the integrity of the information

…it’s 21st Century alchemy.

 

We have focused primarily on ​WebXR​ to allow users to be fully immersed in 3D 360 experiences where they can walk around inside their data and use gesture or gaze for navigation. We’ve made serious things like this:

 

ABOVE IMAGE: Geometric by Datavized. A WebXR platform that allows users to experience their data interactively on all web-connected devices, including immersive virtual reality headsets, without writing code.

And fun things like this:

ABOVE IMAGE: WebXR Interactive Basketball Demo. Every shot attempted by every NBA player in the 2015-16 season, Datavized

Datavized CSO ​Debra Andersonteaches classes in ​WebXR​ and ​Data​ and is often asked by students which software to use to get started. Our goal is to open up data for everyone by providing simple tools. We want to make working with data ordinary. We want to bring the process of creating art from data to the place where photography is now; something you can do in seconds without thinking about it too much, something so easy that it’s not worth listing as a skill anymore since everyone can do it. Democratizing creativity makes things better for both amateurs and professionals: to strengthen the top of a pyramid, widen its base.

Simon Rogers ​from​ Google News Initiative ​allowed us to take a step back from virtual reality headsets and think exclusively about the 2D screens on devices that the vast majority of people still use to connect to the web today, to solve the problem of making art from data without asking a user to write any code. Our mentor throughout the process was ​Alberto Cairo,​ (data journalist, information designer, author and teacher) who challenged and inspired us on weekly video chats. It’s worth mentioning here that we looked at some really great web-based data visualization tools like ​Flourish​ and ​RawGraphs​ and would highly recommend these to users who are more interested in serious data analytics use cases rather than creative artistic expression.

 

From Concept To Art

At the start of the process we reached out to Belfast-based artist ​Glenn Marshall​ who has spent decades using generative animation techniques inspired by science and nature to make art from algorithms. Glenn took the initial concept in two directions:

1. Darwinian Evolution

2. The Tree of Life

The user would drive a process of evolution where random mutation would be guided by human decision making. The final design or animation would result from aesthetic choices made each time a node was selected. The user directs everything based on how it looks.

“​The algorithms themselves are not fixed. The user can randomly mutate, evolve and generate new algorithms creating new visuals, encouraging the sense of exploration and discovery. The algorithms are dynamic in this sense – the underlying code and math will actually be changed by the user, without them having to know any code – but rather interact with an intuitive UI to change parameters.” – Glenn Marshall

 

ABOVE IMAGE: Evolution Tree Self Evolving Color, test P5, Glenn Marshall, Datavized

Further tests with PIXI

Evolution Code Tree

Evolution Code Bar

Evolution Code Pie

Evolution Code Hex

Glenn’s demos illustrated the concept from a generative art point of view and laid out a great framework to begin to map out the tool for coding.

 

We Code So You Don’t Have To

Datavized CTO ​Brian Chirls was challenged as follows… take the generative animation concepts as a guide and build a self-service tool that runs 100% in a web browser (on desktop, tablet and phone) without the ability to save anything to a server, and do all of these things:

  • Allow a user to upload their own data set
  • Allow review of the data
  • Automate mapping and grouping of fields and variables
  • Design multiple chart types
  • Allow the tree to evolve shapes using math
  • Make sure one variable never changes, to keep integrity of the data
  • Run and render everything interactively in realtime
  • Build an editor
  • Allow for export as still image or animation
  • Allow for export to social media

There were a lot of leaps required, in both coding and imagination, to take Morph from an artistic prototype to a usable tool. The full list of hacks and workarounds is too long to delve into here but one area merits an explanation…

Q: How do you render the visual elements of the interactive tree in realtime in a mobile web browser? Let’s break the problem down like this – to run on a phone we need to keep things under a few hundred interactive objects. Imagine a user keeps generating pie charts until there are 100, of which you can see maybe 50 on the screen at any time depending on how zoomed in or out you are. If each slice of each pie chart is a separate interactive object then we quickly get to thousands of objects to be rendered in the browser simultaneously, which may work on a high end desktop but certainly not a phone.

ABOVE IMAGE: Evolution Tree PIXI Evolution Code Pie, test PIXI, Glenn Marshall, Datavized

 

A: At any given moment we get a list of all of the objects visible on the screen. Each time we render a chart (leaf) in the tree, we take a snapshot of it at a series of different resolutions. When a user pans around, it’s these snapshots that they see until they zoom in. The act of zooming in makes fewer objects appear on the screen (by moving some out of view) until they arrive a one chart (leaf) and then we magically convert back from a high resolution snapshot into separate interactive slices. Zooming out reverses the process and converts slices back into snapshots.

ABOVE IMAGE: Morph code for interactive rendering of ‘snapshots’, Brian Chirls, Datavized

 

Buttons

The Interface design for Morph presented significant challenges since the user has a lot of options to control the visualization creation process and all of these steps need to be actionable across devices; from phones and tablets to desktops. The first big decision was where to put everything.

ABOVE IMAGE: Morph Field Mapping Storyboard #4, Slide 4, Glenn Marshall, Datavized

 

Working with UI/UX designer, Roland Dubois, we identified 5 Essential Steps for guiding the navigation:

  • Data
  • Review
  • Design
  • Organize
  • Evolve

These would appear on the bottom of the screen. Written descriptions would be at the top and other functions would appear in the visualization window once the Evolve step had been reached.

IMAGE: Step 5 Navigation, Morph Interface, Version #4, Roland Dubois, Datavized

 

For users on a phone held vertically, the menu has to appear only when needed by expanding or collapsing.

 

Colors

Now that we had a rough idea of where to put the buttons, the conversation moved to the look and feel. Morph had a different use case from other visualization tools with a goal to be playful and fun but it still looked quite serious and scientific with a clean white background and muted colors. We talked with a few early test users – our mentor ​Alberto Cairo, ​Simon Rogers​ from Google, UI/UX Designer ​Beth Wegner​, and even the kids in a ​6th Grade Class​ in Manhattan – and the response was unanimous, everyone wanted bright colors on a black background.

 

Formats

Morph runs 100% in the web browser without saving anything to a server but is coded to allow for the following file formats:

Import
File formats: .xls, .xlsx, .csv, .ods

Export
Still Image: PNG (Raster), SVG (Vector), HTML (Vector/Interactive)

Animation: GIF (Animation), WebM (Video), PNG (Frame Sequence)

Social Sharing: Facebook and Twitter using Imgur

Why Morph?

The inspiration for the name came from the different definitions of the word as follows:

  • Morph (Verb) ​change smoothly from one image to another by small gradual steps using computer animation techniques
  • Morph (Noun) each of several variant forms of an animal or plant
  • Morph (Suffix) denoting something having a specified form or character
  • Morph (Origin) from Greek m​orphē​ ‘form’

But we also must acknowledge that we were inspired by this little claymation character made by Aardman Animations for the BBC in 1977, who appeared on children’s art shows in the UK.

Morph is made by Datavized with Support from Google News Initiative

Credits

Morph Team:

Hugh McGrory, CEO/Co-founder at Datavized, Morph Project Lead

Debra Anderson, CSO/Co-founder at Datavized, Morph Production Manager

Brian Chirls, CTO/Co-founder at Datavized, Morph Lead Technologist

Glenn Marshall, Computer Artist & Animator, Morph Generative Concept

Roland Dubois, UX/UI Designer

Alberto Cairo, Knight Chair in Visual Journalism at the School of Communication of the University of Miami, Project Consultant

Simon Rogers, Data Editor, Google News Lab, Google News Initiative