<figure><img src="image_1.png" /></figure>

HAL
open science

Creating physical visualizations with makervis

Saiganesh Swaminathan, Conglei Shi, Yvonne Jansen, Pierre Dragicevic, Lora

Oehlberg, Jean-Daniel Fekete

► To cite this version:

Saiganesh Swaminathan, Conglei Shi, Yvonne Jansen, Pierre Dragicevic, Lora Oehlberg, et al. Creating physical visualizations with makervis. CHI 2014 - Conference on Human Factors in Computing Systems, Apr 2014, Toronto, Canada. pp.543-546, 10.1145/2559206.2574788. hal-01828270

HAL Id: hal-01828270

https://inria.hal.science/hal-01828270

Submitted on 3 Jul 2018

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_2.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Creating Physical Visualizations
With MakerVis

**Saiganesh Swaminathan**
Inria, France
ganesai@gmail.com

**Pierre Dragicevic**
Inria
pierre dragice@gmail.com

**Conglei Shi**
HKUST, Hong Kong, China
clshi@cse.ust.hk

**Lora Oehlberg**
Inria, France
lora.oehlberg@inria.fr

**Yvonne Jansen**
Inria, France
jansen.yv@gmail.com

**Jean-Daniel Fekete**
Inria, France
jean-daniel.fekete@inria.fr

**Please Note:** This is an Extended Abstracts entry for an Interactivity exhibit at CHI 2014.

It accompanies a fully refereed article that can be found in the CHI 2014 Main Proceedings.

Permission to make digital or hard copies of part or all of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for third-party components of this work must be honored. For all other uses, contact the Owner/Author.
Copyright is held by the owner/author(s).
CHI'14, April 26-May 1, 2014, Toronto, Canada.
ACM 978-1-4503-2474-8/14/04.
http://dx.doi.org/10.1145/2559206.2574788

## Abstract

An increasing variety of physical visualizations are being built, for purposes ranging from art and entertainment to business analytics and scientific research. The creation of physical visualizations is however a laborious process and demands expertise in both data visualization and (digital) fabrication. We illustrate one of the currently many possible ways of creating a physical visualization through a case-study. We then present our prototype system, MakerVis. It is the first tool that integrates the entire workflow, from data selection to digital fabrication using additive or subtractive techniques. We demonstrate the usage of MakerVis through a complete scenario of how an end-user would construct a physical visualization.

## Author Keywords

Physical visualizations, digital fabrication

## ACM Classification Keywords

H.5.2 [Information Interfaces and Presentation]: User interfaces; D.2.2 [Design Tools and Techniques]: User interfaces

## Introduction

Visualization systems beyond traditional desktop settings offer radically new ways of interacting with data, and have seen increasing interest from HCI researchers [3, 5]. In
<figure><img src="image_3.png" /><figcaption>**Figure 1:** A user designing a visualization with MakerVis.</figcaption></figure>

<figure><img src="image_4.png" /><figcaption>**Figure 2:** A visualization being cut by a laser cutter.</figcaption></figure>

<figure><img src="image_5.png" /><figcaption>**Figure 3:** A user collecting parts from a laser cutter.</figcaption></figure>

particular, *physical visualizations* — visualizations that map data to physical matter instead of pixels — are a new information medium that promises to be more compelling [2], more expressive, and in some cases more effective than on-screen setups [4].

A wide range of physical visualizations have already been crafted by artists, analysts and scientists, for a variety of purposes ranging from infotainment to goal-oriented tasks [1]. However, the process of creating such physical visualizations is difficult. While digital fabrication technologies are becoming increasingly accessible, most software tools that drive these machines focus on static object models, ignoring data-driven content. Conversely, a wealth of software tools exist for creating on-screen visualizations [7, 8], but do not support the creation of physical objects.

In addition to the fundamental differences between physical objects and graphical content (e.g., physical objects are solid rather than flat, and they are subject to physical laws such as gravity), fabrication machines have unique constraints that differ from those of computer displays and 2D printers. Building physical visualizations currently requires complex workflows, a heterogeneous set of tools, and expertise in both data visualization and fabrication. The lack of proper tools ultimately limits a designer's abilities to create physical visualizations of larger-scale data, to reuse an existing physical design with new datasets, or to rapidly iterate through possible design variations. We illustrate these problems through a case study and then demonstrate how a similar visualization can be created using MakerVis.

## Case Study

To illustrate the difficulty of crafting physical visualizations, we provide a real-world case study taken from a curated list of data sculptures and physical visualizations [1]. The design was documented online and involved different degrees of manual, computerized and mechanized work.

Figure 4 illustrates the construction of a 3D heatmap created by Doug McCune in 2013 [6], which shows the quality of elementary schools in San Francisco.

With the help of a computer, McCune divided the entire city area of San Francisco into 12×12 squares and computed a weighted score for school performance per square (see Figure 4a). Score values were then converted into height values for a series of blocks. McCune then cut 144 pieces of wood according to these heights using a hand saw — a fabrication technique that he does not recommend after the fact (Figure 4b).

<figure><img src="image_6.png" /><figcaption>**Figure 4:** Manually created physical map by Doug McCune</figcaption></figure>

After spray-painting each bar a different color according to its height (Figure 4c), he glued the bars to a base, resulting in the design shown in Figure 4d.

Apart from the initial steps of data collection and transformation, this visualization was created entirely by
<figure><img src="image_7.png" /><figcaption>**Figure 5:** Customization of fabricated parts: a user increases the contrast of a transparent data scale by manually coloring previously engraved gridlines.</figcaption></figure>

<figure><img src="image_8.png" /><figcaption>**Figure 6:** Assembly: parts cut by a laser cutter need to be put together to form a 3D visualization.</figcaption></figure>

<figure><img src="image_9.png" /><figcaption>**Figure 7:** A line chart as described in the scenario, created with MakerVis.</figcaption></figure>

hand. This fabrication approach is not only very labor-intensive, but also less accurate than digital manufacturing techniques.

This case study illustrates the need for tools that integrate the entire design workflow for creating physical visualizations, from data processing to the fabrication of the final object. This integration is important not only for making data-accurate visualizations, but also for supporting fast design iteration cycles.

## MakerVis Walkthrough

We built a first prototype – MakerVis – that provides rudimentary support for an integrated design workflow (see screenshot Figure 8). We illustrate it with a scenario inspired from observations of design sessions with real users, where non-experts created physical visualizations of personal data (see Figures 7, 9,10, and 11).

Tom wants to visualize his commit activity in a code repository containing several research projects. The process of creating a physical visualization has three stages: 1) designing the visualization and creating digital design files with MakerVis, 2) customizing and fabricating the generated design files, and 3) assembling and finishing the final result.

### Designing With MakerVis

Tom develops the design for his physical visualization using the Makervis prototype (Fig. 1). He first loads a CSV file with his data into MakerVis. Next, he then selects one of the visualization types supported by MakerVis, and maps his data's dimensions to visualization dimensions.

Visualization dimensions supported by MakerVis vary based on the selected physical visualization type. For

example, bar and line charts have three dimensions: *slices*, *x-axis* and *y-axis*. Scatterplots additionally offer dimensions for *radius* and *color*.

<figure><img src="image_10.png" /><figcaption>**Figure 8:** Screenshot of the MakerVis software</figcaption></figure>

Tom maps projects to *slices*, *time* to the *x-axis* and *values* to the *y-axis*. Immediately after he maps dimensions, Tom is provided with a preview of his digital design files – a 3D model when 3D printing is selected, and 2D design file of construction slices when laser cutting is selected.

Tom then begins to tune and parameterize his visualization's geometry. Geometry parameters include the size and spacing of elements (e.g., the spacing between bars for bar charts), font sizes, etc. Tom can also select a fabrication technique or adjust fabrication parameters, such as the default material and bed size for laser cutters. Once he is satisfied with the design, he downloads the design files for laser cutting fabrication.
<figure><img src="image_11.png" /><figcaption>**Figure 9:** Example of a prism map showing happiness scores across the US computed from Twitter sentiments.</figcaption></figure>

<figure><img src="image_12.png" /><figcaption>**Figure 10:** Example of a bar chart showing different measures for training progress over a cycling season.</figcaption></figure>

<figure><img src="image_13.png" /><figcaption>**Figure 11:** Example of a scatter plot created after Hans Rosling's famous TED talk.</figcaption></figure>

### Customize and Fabricate

Tom prefers to exchange the regular timeline that was provided by his data with more personally meaningful time landmarks, such as timestamps for project deadlines. While this is currently not supported in MakerVis, the created design files are in a standard vector file format (svg) and can currently still be relabelled using vector editing software. Once he finishes customizing the design file, he sends the file to a laser cutter for fabrication (Fig. 2).

### Assemble and Finish

After fabrication, Tom collects his fabricated parts (Fig. 3) from the laser cutter. MakerVis provides suggestions on how to further customize or finish parts after fabrication. Tom would like to increase the contrast of the engraved gridlines and chooses to try MakerVis' suggestion of tracing of lines with a felt pen (Fig. 5). Finally, he uses the assembly instructions provided by MakerVis to put together his physical visualization (Fig. 7).

### Types of Visualizations

The number of possible physical visualizations is enormous (see [1]). MakerVis currently supports a set of pragmatic visualizations: line charts (Figure 7, bar charts (Figure 10, prism maps (Figure 9) and scatterplots (Figure 11). However, the software can be easily extended to support a range of visualization types, fabrication techniques, and corresponding materials. To that purpose, we will soon release MakerVis as open source software.

### Conclusion

Thanks to the democratization of fabrication technology, the design and creation of physical visualization is accessible to a wide audience. With visualization design support tools such as MakerVis, even data visualization or

fabrication novices are able to design and fabricate intriguing objects. Our MakerVis prototype will be released as an open-source project to support ongoing research on physical visualizations — we hope to facilitate others' explorations into new visualization types and fabrication techniques.

### References

[1] Dragicevic, P., and Jansen, Y. List of physical visualizations. tinyurl.com/physvis, 2013. [Online; accessed 04-Sep-2013].

[2] Gwilt, I., Yoxall, A., and Sano, K. Enhancing the understanding of statistical data through the creation of physical objects. In Proc. ICDC2012 (2012), 117–126.

[3] Jansen, Y., and Dragicevic, P. An interaction model for visualizations beyond the desktop. IEEE TVCG (Nov. 2013). To appear.

[4] Jansen, Y., Dragicevic, P., and Fekete, J.-D. Evaluating the efficiency of physical visualizations. In Proc. of CHI 2013, ACM (2013), 2593–2602.

[5] Lee, B., Isenberg, P., Riche, N., Carpendale, S., et al. Beyond mouse and keyboard: Expanding design considerations for information visualization interactions. IEEE TVCG 18, 12 (2012).

[6] McCune, D. Physical maps—from digital to analog. tinyurl.com/physicalmaps. [accessed 2013-09-02].

[7] Stolte, C., and Hanrahan, P. Polaris: A system for query, analysis and visualization of multi-dimensional relational databases. IEEE TVCG 8 (2002), 5265.

[8] Viegas, F. B., Wattenberg, M., van Ham, F., Kriss, J., and McKeon, M. Manyeyes: a site for visualization at internet scale. IEEE TVCG 13, 6 (Nov. 2007), 1121–1128.