OpenVis Conference Report Part 1 (and Introduction to D3.js)

Cytoscape Team Meeting 5/8/2014 ! Keiichiro Ono Part 1: Quick Report & Introduction to D3.js

Outline -What is OpenVis Conference? -Keynote 1: Mike Bostock

What is OpenVis? - Conference for practitioners - Developers - Designers - Data Analysts - cf. IEEE VIS - More theoretical - Share story, knowledge, and techniques for making actual visualizations

Speakers Background Designers Journalists Professors Developers Editors Researchers

Why Bother? - We are Java programmers working on (mostly) client side - It is a VERY small niche in software industry - Lots of legacy technologies are dying - Swing (JavaFX is an alternative, but) - Applet (Dead!) - Java Web Start - Then, where is the industry going?

The Web - Virtually all modern client-side technologies are born in web application world - This is true even for scientic computing - Example: Python/NumPy/SciPy - They are in the middle of transition from Tcl/Tk based visualization frameworks to the one using web based technologies

Relationship to Our Projects - We continue to use Java for desktop version - for analysis / editing - But for sharing data, we should use web based technologies - Cytoscape.js

Keynotes

Keynotes Mike Bostock NTY Visualization Team John Resig Khan Academy, Ex-Mozilla

Mike Bostock

Mike Bostock - Creator of D3.js - NYT Visualization Team - Was a Ph.D. student at Stanford visualization lab - Data-Driven Journalism - One of the founding fathers of emerging JS-based visualization world today

http://bost.ocks.org/mike

D3: Data-Driven Documents Michael Bostock, Vadim Ogievetsky, Jerey Heer IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011

D3 : Data-Driven Documents Michael Bostock, Vadim Ogievetsky and Jeffrey Heer Fig. 1. Interactive visualizations built with D3, running inside Google Chrome. From left to right: calendar view, chord diagram, choro- pleth map, hierarchical edge bundling, scatterplot matrix, grouped & stacked bars, force-directed graph clusters, Voronoi tessellation. AbstractData-Driven Documents (D3) is a novel representation-transparent approach to visualization for the web. Rather than hide the underlying scenegraph within a toolkit-specic abstraction, D3 enables direct inspection and manipulation of a native representation: the standard document object model (DOM). With D3, designers selectively bind input data to arbitrary document elements, applying dynamic transforms to both generate and modify content. We show how representational transparency improves expressive- ness and better integrates with developer tools than prior approaches, while offering comparable notational efciency and retaining powerful declarative components. Immediate evaluation of operators further simplies debugging and allows iterative development. Additionally, we demonstrate how D3 transforms naturally enable animation and interaction with dramatic performance improvements over intermediate representations. Index TermsInformation visualization, user interfaces, toolkits, 2D graphics.

Prefuse: A Toolkit for Interactive Information Visualization Jerey Heer, Stuart K. Card, James Landay ACM Human Factors in Computing Systems (CHI), 421430, 2005

prefuse: a toolkit for interactive information visualization Jeffrey Heer Group for User Interface Research Computer Science Division University of California, Berkeley Berkeley, CA 94720-1776, USA [email protected] Stuart K. Card User Interface Research Group Palo Alto Research Center 3333 Coyote Hill Road Palo Alto, CA 94301, USA [email protected] James A. Landay DUB Group Computer Science & Engineering University of Washington Seattle, WA 98195-2350, USA [email protected] ABSTRACT Although information visualization (infovis) technologies have proven indispensable tools for making sense of complex data, wide-spread deployment has yet to take hold, as successful infovis applications are often difficult to author and require domain-specific customization. To address these issues, we have created prefuse, a software framework for creating dynamic visualizations of both structured and unstructured data. prefuse provides theoretically-motivated abstractions for the design of a wide range of visualization applications, enabling programmers to string together desired components quickly to create and customize working visualizations. To evaluate prefuse we have built both existing and novel visualizations testing the toolkit's flexibility and performance, and have run usability studies and usage surveys finding that programmers find the toolkit usable and effective. Keywords: information visualization, user interfaces, toolkits, graphs, trees, interaction, navigation, 2D graphics ACM Classification Keywords D.2.2 [Software Engineering]: Design Tools and Techniques. H.5.2. [Information Interfaces]: User Interfaces. I.3.6 [Methodology and Techniques]: Interaction Techniques. INTRODUCTION Since the introduction of data graphics in the late 1700s [46], visual representations of abstract information have been used to demystify data and reveal otherwise hidden patterns. The recent advent of graphical interfaces has enabled direct interaction with visualized information, giving rise to over a decade of information visualization research. Information visualization (or infovis) seeks to augment human cognition by leveraging human visual capabilities to make sense of abstract information [12], providing means by which humans with constant perceptual abilities can grapple with increasing hordes of data. Still, as inexpensive processing and graphics capabilities continue to improve, there remains a dearth of information visualization applications on current systems. While some of the reasons are economic [20], there are technical roadblocks as well. One is that information visualization applications are difficult to build, requiring mathematical and programming skills to implement complex layout algorithms and dynamic graphics. Another reason is that infovis applications do not lend themselves to one size fits all solutions; while successful visualizations often reuse established techniques, they are also uniquely tailored to their application domain (e.g., [31]), requiring customization. This suggests a toolkit approach, supporting a diversity of customized applications by providing high-level support for common, reusable visualization solutions. While infovis toolkits attempting to fill this gap have begun to emerge, current offerings [9,17] provide a library of existing visualizations rather than a set of reusable components for building customized or novel visualization designs. To address these concerns and better support the design and implementation of novel visualizations, we have built prefuse1 , an extensible user interface toolkit for crafting interactive visualizations. Instead of providing only ready- made infovis widgets that can be applied much like buttons or checkboxes in traditional GUI tools, prefuse provides a set of finer-grained building blocks for constructing tailored visualizations. This approach simplifies the composition of established methods, such as layout or distortion algorithms, while providing an integrated structure in which to develop novel techniques and domain-specific designs. The formalism of a grapha set of entities and relations between them is used as the toolkits fundamental data structure, enabling a broad class of visualizations comprising node-link diagrams, containment diagrams, and visualizations of unstructured (edge-free) data such as scatter plots and timelines (e.g., Figure 1). prefuse includes a library of layout algorithms, navigation and interaction techniques, integrated search, and more. prefuse is written in the Java programming language using the Java2D graphics library. 1 In line with the musical naming conventions of Java interface toolkits, the prefuse (pronounced "pref-use") name derives from Prefuse73, an electronic musician whose work fueled toolkit development. prefuse is intentionally spelled in the lower-case. Permission to make digital or hard copies of all or part 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. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. CHI 2005, April 27, 2005, Portland, Oregon, USA. Copyright 2005 ACM 1-58113-998-5/05/0004$5.00.

prefuse: a toolkit for interactive information visualization Jeffrey Heer Group for User Interface Research Computer Science Division University of California, Berkeley Berkeley, CA 94720-1776, USA [email protected] Stuart K. Card User Interface Research Group Palo Alto Research Center 3333 Coyote Hill Road Palo Alto, CA 94301, USA [email protected] James A. Landay DUB Group Computer Science & Engineering University of Washington Seattle, WA 98195-2350, USA [email protected] ABSTRACT Although information visualization (infovis) technologies have proven indispensable tools for making sense of complex data, wide-spread deployment has yet to take hold, as successful infovis applications are often difficult to author and require domain-specific customization. To address these issues, we have created prefuse, a software framework for creating dynamic visualizations of both structured and unstructured data. prefuse provides theoretically-motivated abstractions for the design of a wide range of visualization applications, enabling programmers to string together desired components quickly to create and customize working visualizations. To evaluate prefuse we have built both existing and novel visualizations testing the toolkit's flexibility and performance, and have run usability studies and usage surveys finding that programmers find the toolkit usable and effective. Keywords: information visualization, user interfaces, toolkits, graphs, trees, interaction, navigation, 2D graphics ACM Classification Keywords D.2.2 [Software Engineering]: Design Tools and Techniques. Still, as inexpensive processing and graphics capabilities continue to improve, there remains a dearth of information visualization applications on current systems. While some of the reasons are economic [20], there are technical roadblocks as well. One is that information visualization applications are difficult to build, requiring mathematical and programming skills to implement complex layout algorithms and dynamic graphics. Another reason is that infovis applications do not lend themselves to one size fits all solutions; while successful visualizations often reuse established techniques, they are also uniquely tailored to their application domain (e.g., [31]), requiring customization. This suggests a toolkit approach, supporting a diversity of customized applications by providing high-level support for common, reusable visualization solutions. While infovis toolkits attempting to fill this gap have begun to emerge, current offerings [9,17] provide a library of existing visualizations rather than a set of reusable components for building customized or novel visualization designs. To address these concerns and better support the design and implementation of novel visualizations, we have built prefuse1 , an extensible user interface toolkit for crafting

Data-Driven Documents

- De-facto standard library for making custom interactive visualizations on web browsers Data-Driven Documents

- Data controls view - SVG-based rendering - Good for relatively small, interactive visualizations - TONS of examples Key Ideas to Understand D3

http://bl.ocks.org/mbostock/4062045

var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); How D3.js Works

var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .call(force.drag); How D3.js Works

Keynote by Mike Bostock

Design as a Search Process

Design is Hard - Why? - There is a goal (good design), but there are many paths to the goal - Creating good design = avoid bad designs - There are several rules, but making general principles for good design is hard

Dieter Rams: ten principles for good design 1. Is innovative - The possibilities for progression are not, by any means, exhausted. Technological development is always oering new opportunities for original designs. But imaginative design always develops in tandem with improving technology, and can never be an end in itself. 2. Makes a product useful - A product is bought to be used. It has to satisfy not only functional, but also psychological and aesthetic criteria. Good design emphasizes the usefulness of a product whilst disregarding anything that could detract from it. 3. Is aesthetic - The aesthetic quality of a product is integral to its usefulness because products are used every day and have an eect on people and their well-being. Only well-executed objects can be beautiful. 4. Makes a product understandable - It claries the products structure. Better still, it can make the product clearly express its function by making use of the user's intuition. At best, it is self-explanatory. 5. Is unobtrusive - Products fullling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user's self-expression. 6. Is honest - It does not make a product appear more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept. 7. Is long-lasting - It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years even in today's throwaway society. 8. Is thorough down to the last detail - Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer. 9. Is environmentally friendly - Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product. 10.Is as little design as possible - Less, but better because it concentrates on the essential aspects, and the products are not burdened with non- essentials. Back to purity, back to simplicity. http://en.wikipedia.org/wiki/Dieter_Rams#Dieter_Rams:_ten_principles_for_good_design

10: Is as little design as possible - Less, but better because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

Preview by NYT -Tool to explore large search space of good design - Visualize design process from Git commit history - One commit = One Visualization - Users can see the entire process of design and easy to go back and force

-The Preview server at NYC is an advanced version of this visualization - In this diagram, a circle represents one commit to git - Preview system links commits to actual visualizations - Goal: reproducible design process

Make your precess reproducible

To be continued

2014 Keiichiro Ono [email protected]

OpenVis Conference Report Part 1 (and Introduction to D3.js)

Software

run usability

usage surveys

usa landaycs

usa jheercs

desired components

proven indispensable

customize

usa cardparc