Slides for internal Cytoscape team meeting. A short report of OpenVis Conference.

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

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

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

7. Speakers’ Background
Designers
Journalists
Professors
Developers
Editors
Researchers

8. 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…?

9. The Web
- Virtually all modern client-side technologies
are born in web application world
- This is true even for scientific 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

10. 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

11. Keynotes

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

13. Mike Bostock

14. 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

15. http://bost.ocks.org/mike

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

17. 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.
Abstract—Data-Driven Documents (D3) is a novel representation-transparent approach to visualization for the web. Rather than hide
the underlying scenegraph within a toolkit-specific abstraction, D3 enables direct inspection and manipulation of a native represen-
tation: 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 efficiency and retaining
powerful declarative components. Immediate evaluation of operators further simplifies debugging and allows iterative development.
Additionally, we demonstrate how D3 transforms naturally enable animation and interaction with dramatic performance improvements
over intermediate representations.
Index Terms—Information visualization, user interfaces, toolkits, 2D graphics.

18. Prefuse: A Toolkit for Interactive Information Visualization
Jeffrey Heer, Stuart K. Card, James Landay
ACM Human Factors in Computing Systems (CHI), 421–430, 2005

19. 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
jheer@cs.berkeley.edu
Stuart K. Card
User Interface Research Group
Palo Alto Research Center
3333 Coyote Hill Road
Palo Alto, CA 94301, USA
card@parc.com
James A. Landay
DUB Group
Computer Science & Engineering
University of Washington
Seattle, WA 98195-2350, USA
landay@cs.washington.edu
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 1700’s
[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 graph—a set of entities and relations between
them — is used as the toolkit’s 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 2–7, 2005, Portland, Oregon, USA.
Copyright 2005 ACM 1-58113-998-5/05/0004…$5.00.

20. 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
jheer@cs.berkeley.edu
Stuart K. Card
User Interface Research Group
Palo Alto Research Center
3333 Coyote Hill Road
Palo Alto, CA 94301, USA
card@parc.com
James A. Landay
DUB Group
Computer Science & Engineering
University of Washington
Seattle, WA 98195-2350, USA
landay@cs.washington.edu
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

22. Data-Driven Documents

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

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

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

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

28. 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

29. Keynote by Mike Bostock

30. Design as a Search Process

31. 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

32. Dieter Rams: ten principles for good design
1. Is innovative - The possibilities for progression are not, by any means, exhausted. Technological development is always offering 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 effect on people and
their well-being. Only well-executed objects can be beautiful.
4. Makes a product understandable - It clarifies the product’s 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 fulfilling 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

33. 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.

34. 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

35. -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

36. “Make your precess reproducible”

37. To be continued…

38. 2014 Keiichiro Ono
kono@ucsd.edu