• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
OpenVis Conference Report Part 1 (and Introduction to D3.js)
 

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

on

  • 325 views

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

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

Statistics

Views

Total Views
325
Views on SlideShare
325
Embed Views
0

Actions

Likes
2
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 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
    • 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, Jeffrey 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. 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.
    • Prefuse: A Toolkit for Interactive Information Visualization Jeffrey Heer, Stuart K. Card, James Landay ACM Human Factors in Computing Systems (CHI), 421–430, 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 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.
    • 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 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
    • 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