OpenVis Conference Report Part 1 (and Introduction to D3.js)
Preview:
DESCRIPTION
Slides for internal Cytoscape team meeting. A short report of OpenVis Conference.
Citation preview
- 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 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 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 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
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 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
- 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 kono@ucsd.edu