How We Made Morph
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 app built with Javascript. Here’s a quick overview of how it got made — with original sketches, links to early demos and interface design storyboards.
Datavized has been working for three years reimagining how data can be represented beyond static charts and graphs. Our thinking goes like this…
- In digital form, data is ones and zeros
- Everything else in the digital world is also made from ones and zeros
- 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:
And fun things like this:
Datavized CSO Debra Anderson teaches 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.
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:
- Darwinian Evolution
2. The Tree of Life
Further tests with PIXI…
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.
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.
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.
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.
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.
For users on a phone held vertically, the menu has to appear only when needed by expanding or collapsing.
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.
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
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 morphē ‘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
Originally published at datavized.com on September 24, 2018.
