4. Information visualization

Information visualization

Useful for information retrieval

https://www.amazon.co.jp/dp/4339028835 https://gyazo.com/f7bb7c5bbf19e4040f63c762d8bfe493

https://www.amazon.co.jp/dp/4627855915 https://gyazo.com/bec89c862b3cd777c158839efb5460f5

Visualizing Data

Processingの本だが情報視覚化の話が豊富

http://gyazo.com/43c0779e5a0eb64f52c0258868cd5ab8.png

幅広い話題をカバー

http://gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

Various visualizations

Infographics

Scientific visualization

Information Visualization

Infographics

Display data beautifully in a 2D space

Made by designers

Have been popular for a long time

https://gyazo.com/9c0fde929d3da8e3356a748899695827.png

Visualization of New York subway

http://gyazo.com/3e9d348ee49815ab8d462ee2254d921d.png

Napoleon's 1812 March to Moscow

https://Gyazo.com/19e5355ce8962b40eb9d7ebccc96dc46.png

Flood control at Kofu basin (Yamanashi prefecture)

Plotting with many arrows

https://s3-ap-northeast-1.amazonaws.com/masui.org/9/0/90c2da873c356ae9d0d8bba1afc87309.jpg

https://s3-ap-northeast-1.amazonaws.com/masui.org/1/4/14418368b7824c5ef782f3d37fbb0dcb.jpg

Scientific visualization

Show real-world data and simulation results in 3D

Used in various scientific community

Scientific visualization example

http://gyazo.com/456260ff7c9681525f41b2dc209ca6fb.png

Scientific visualization example

http://gyazo.com/d8a770c4cd912fb8523ab2a0be0d0462.png

Scientific visualization example

Finite Element Method

http://gyazo.com/aa1d5e522d2cdfe2cabc7abff629731a.png

Scientific visualization example

Zinc and hydrogen molecule

http://gyazo.com/1ae719bf0c4eb8607f1cb9b385dbad92.png

AVS

Scientific visualization software

http://gyazo.com/efcda5f12538b36633541455aa4ea0b4.png

Information visualization

Technologies for showing huge data

Not directly linked to real-world objects

Characteristics of information visualization

Treat data with no shape

File systems, network structure, ...

Arbitrary visualization methods

Interactive information retrieval

"Smooth" interaction

No direct mapping to real-world

https://Gyazo.com/f3d16cebda8feb6a361814437b1ef45b.png

Poincaré disc (non-Euclidean geometry)Non-realistic mapping

Poincaré disc (non-Euclidean geometry)

https://Gyazo.com/3bda390fc464a13e207fd7a6d0571ef7.png

Representing infinity

https://Gyazo.com/dd6315efbef37720b282b507d5499071.png

HyperbolicTree

https://www.youtube.com/watch?v=pwpze3RF55o

https://i.Gyazo.com/031ecbe3d8afed0d00338b871ce6bf4b.png

Visualizatin researchers

Stuart Card

Ben Shneiderman

Bret Victor

Ben Fry

Mike Bostock

Edward Tufte

Stuart Card

Xerox PARC

Invented the term "Information Visualization"

http://gyazo.com/7466a651e0d3c76f35977e860761ca7f.png

Ben Shneiderman

University of Maryland

Famous researcher on user interface and visualization

Inventer of Treemap

https://gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png

Textbook by Ben Shneiderman

https://www.amazon.co.jp/dp/013438038X https://gyazo.com/681306fea74bd8933e62746ebe5892d8

Bret Victor

http://worrydream.com/ http://gyazo.com/ea6852f9ce886a7d0e36a994f4ee19d9.png

Visualization expert

Former Apple employee

Haptic, tangible, dynamic display

http://gyazo.com/f7f730a1813d0f20158922f9e5bd45d3.png

Video: Inventing on Principle

https://www.youtube.com/watch?v=PUv66718DII

Ben Fry

Developer of Processing

https://Gyazo.com/4b14e7234b823d503091bf4f158af271.png

https://www.amazon.co.jp/dp/0596514557 https://gyazo.com/9c0cb783d3d06476640f117d5e361941

Mike Bostock

Developer of D3

https://gyazo.com/f72348e5c77e7e3f484b6537137d4c1e.png

http://bost.ocks.org/mike/ https://gyazo.com/85fc16b5a762626de3bd8e1379f7a342.png

Article at medium.com on d3.express

https://gyazo.com/635115f74b5a979a69565150df727730

Video: Design is a search problem

https://www.youtube.com/watch?v=fThhbt23SGM

Edward Tufte

Author of many beautiful books on visualization

https://gyazo.com/2e2f7b2aee1b7f558ee29bfa2a9fe9f8

Techniques for information visualization

Filtering methods for showing only important items

Layout methods

Automatic layout

Interaction methods

Filtering methods

Condition matching

Zooming in / out

Calculating importance

Mapping to screen

Representations

Shapes, colors, textures, ...

Layout

Distortion

Animation

Display techniques

Automatic layout

3D visualization

Zooming

Animation

Interaction techniques

Direct Manipulation

Dynamic filtering

Dynamic Query

Continuous / Reversible

History of information visualization

Research on PARC, Maryland Univ, etc. (1980s)

Various methods invented and proposed

InfoVis conference

Not very active recently

Current trends

No new novel method invented

Old methods became popular

TreeMap, Sunburst

Visualization for specific areas

Finance, bio, etc.

Generic tools never succeeded

Many JS tools

Tableau

TreeMap

Invented by Ben Shneiderman

Visualize a large tree structure on a 2D space

Repeatedly divide a rectangle horizontally/vertically

http://gyazo.com/fa6230caf2187871465007f290065c60.png

Sunburst

Invented by John Stasko

https://gyazo.com/d1e8e18568564a57170ac2fa6f2a1b29

Technical trends

Fast graphics on PCs

Modern Web browsers

JavaScript, HTML5

Server / browser cooperation

'Big data' on the net

Download data to browsers and handle on local JS

Good visualization libraries

Drawing libraries

Layout libraries

Statistical computing

General moods of IV

No novel basic technique

TreeMap, spring-based model, force-directed

No interesting research topics

Old IV researchers are not working for IV

Maybe bored?

Business chances somewhere

Tableau?

General trends

Artists / designers / manias

"IV by programmers are terrible"

Difficult to write papers

Based on simple idea or re-invention

(He moved to Tableau)

General trends

People see various IV systems on the Web

Fancy systems everywhere

Many good tools available

IV libraries for programmers

IV system for buisiness people

ニュースサイトでの利用

New York Times

NHK

朝日新聞

New York Times

視覚化を活用した記事多数

https://gyazo.com/aee6b6943f1fc84776cfda49998fda31

https://gyazo.com/8a77afe9f285907ae705e5cd507ec616

http://www3.nhk.or.jp/news/akiya/js/chart.js https://gyazo.com/efaf1a2923f27e9dde7802a86d5272bf.png

山辺真幸氏のシステム

https://gyazo.com/885e136789367652f3e3824cd0947f1f https://www.masakiyamabe.com/portfolio/covid-19-space-time-visualization-of-infection-risks-in-japan/

What do we want to visualize?

Network structure

URL links

SNS relations

Social filtering info

Data on computers

File system structure

Log information

Network traffic

What do we want to visualize?

Biological data

Genes

Protein molecule

Ideas (e.g. Mindmap)

Historical timeline

Art

General techniques

Dynamic query

Animation

3D visualization

Scatterplot

Parallel Coordinates

Force-directed layout

FishEye

Zooming

Distortion

Treemap

HyperbolicTree

Sparklines

SOM

Dynamic query

Display changed as soon as query changes

Animation

Change the display by time

One more dimension

Scatterplot

http://gyazo.com/5224cb354be1e97d6d44b06eed5f2441.png

Visualization of various data in the world

http://gyazo.com/26dc8c48f8b97a83499d7a632845cf6c.png

Factfulness

https://gyazo.com/41738488e59d6fb5e456702eebcd9392

Parallel Coordinates

http://gyazo.com/e532c2c617c9a7344b68a75fa57fb5cc.png

FisheyeView

Display only close/important nodes

Importance is calculated by DOI

Degree of Interest (DoI) = A Priori Interest - Distance

Video: FisheyeViewGraph

https://s3-ap-northeast-1.amazonaws.com/masui.org/e/f/efcbebb183d6609aec5b5564f8579fae.mp4

Force-directed algorithm

Based on "spring model"

Various variations

e.g. Kamata-Kawai method

Survey papers on force-directed algorithm

Algorithm by Peter Eades

Spring push and pull

http://gyazo.com/7bf72f55fdad20a6bbfd3a712a93310b.png

Kamata-Kawai algorithm

Shortest path length => spring length

Gradually calculate layout

Spring-based attraction + electric-based repulsion

http://gyazo.com/6c7ae678108594823bcdee2bd7570260.png

% attractive force is analogous to the spring force and the repulsive force is analogous to the electrical force.

Kamata-kawai algorithm

https://s3-ap-northeast-1.amazonaws.com/masui.org/a/9/a9166c9b8e8850d5237edecc23e437b1.gif

Dr. Kamada

Former president of Access Co.

Developed "Compact HTML" for iMode

Now a "startup booster"

Recent interview

http://gyazo.com/0a1130c0369c174553a5f8b5f886fafb.png

Yamada's system

Ignore distant elements

http://gyazo.com/b7aff995ab7a0b4d9720c609a3fa683a.png

Hierarchical division

http://gyazo.com/d86d7e0e16e7258b0ff9d5b626a7991b.png

Constraint solvers

Including force-directed methods

Solve many constraints on spring length

http://gyazo.com/fa8f657c3d131d7514ba14e3b3cff85e.png

TreeMap

Show large hiearachical data in a rectangle

Repat splitting a rectangle vertically and horizontally

http://gyazo.com/fa6230caf2187871465007f290065c60.png

TreeMap

http://gyazo.com/6259f2f613b9fe7d8c95b1b9f2a168f6.png

http://gyazo.com/e70d2ce986cb2495d1e0625191c05862.png

Newsmap

http://gyazo.com/d5d08abf825731f073c7e67b8a47a971.png

TreeMap + Dynamic query

Hive Group

HyperbolicTree

Put information on "Hyperbolic Space''

遠くのものほど小さく見え、沢山表示可能

StarTreeという名前で商品化

https://www.youtube.com/watch?v=pwpze3RF55o

StarTree

http://gyazo.com/44d2bb4fc83ac5825a3495359239297d.png

Demo: TreeViz

Sparklines

折れ線グラフを小さなアイコンで表示

https://Gyazo.com/a1f02c17133e2035a75e67420a4bb6cf.png

http://gyazo.com/756419809b28a762c5f9b0f84f1b8b8b.png

Zooming

Pad

Original proposal of ZUI

Infinite 2D zooming for showing everything

Hierarchical data can be visualized

http://gyazo.com/6d93c16b1ddce8efd644888bfdcde5e7.png

Video: Pad

https://s3-ap-northeast-1.amazonaws.com/masui.org/8/e/8e9977379b84135c2a50440181883b9a.mp4

Extention to Pad

Filtering, Overview+Detail, etc.

Toolkits

Jazz, Piccolo

http://gyazo.com/32e11ad6ab6a556209c51a7951c3a1cf.png

PhotoMesa

Photo browser based on Piccolo

Treemap + Zooming

http://gyazo.com/e01855e94acbb3876cb94a29e9ce906f.png

Video: PhotoMesa

https://s3-ap-northeast-1.amazonaws.com/masui.org/6/9/69a65c14537ffe9507eb0aa0cbd09bbf.mp4

Contextual Zooming

TableLens

DateLens

TableLens

Display a large table in a small space

Only show necessary rows/columns

Numbers or graphs

Video: TableLens

https://www.youtube.com/watch?v=qWqTrRAC52U

Nonlinear zooming of calendar

http://gyazo.com/de1f0ef32627802b3e555f5f5cbea9ac.png

Video: DateLens

https://www.youtube.com/watch?v=CwZs0SuN8lM

Non-linear zooming

Distorted display of a large table

http://gyazo.com/813fa7fb66f2807858e0160d66559405.png

Zooming + dynamic query

WING

LensBar

"Pitecan" dictionary

Demo: WING

Information retrieval w/ 1D/2D/3D Zooming

http://gyazo.com/d44943c8f574a2da409443844eff601c.png

Video: WING

https://www.youtube.com/watch?v=8i1IqBXbV9g&t=78s

Demo: LensBar

Dynamic approximate matching + nonlinear zooming

http://gyazo.com/a4fb5e88b525dec70e7c8f4e0e18ed4a.png

Demo: Conference program

Intreaction 2014 (IPSJ)

http://masui.org/i/ https://gyazo.com/7a8af6aee7779121fe7d8d8061641e4c

Demo: Pitecan dictionary

https://gyazo.com/70769e2cc5e8d228630e707dbdcbc81d http://www.pitecan.com/tmp/DragZoom/eiwa3.html

Showing hierarchy by grouping

FacetMap

Data jewelry box

Grokker

FacetMap

Visualization of fasceted search

http://gyazo.com/6c53d7cb537058b00bdb8ad0cbc90e82.png

Data jewelry box

http://gyazo.com/994a19028b8ad8b561686ee67d06a094.png

http://gyazo.com/9cae3dc2b693554c55c7fca2ab7ad962.png

http://gyazo.com/e96de27c90d9c8cc91f637e7a6227d8b.png

Self-organizing map (SOM)

Map high-dimension data into 2D space

Layout similar data close

http://gyazo.com/ded10daa58face833aed448d287922b0.png

http://gyazo.com/b13fc253d24d7ffb579deaba71f20486.png

Shos links between related web pages

http://gyazo.com/e237efc0c3e88d03f00348a305866d33.png

Showing musicians

http://gyazo.com/0c00cd4ab0195413838a5833fabdf1f0.png

Showing stock prices

http://gyazo.com/4be861f7952800433058425190618092.png

Word relations appearing in "Hamlet"

http://gyazo.com/b5e6d1d75a05e904a4cde4ffe5604a3a.png

http://gyazo.com/5b446276ede34af0610cb92f73e79e6e.png

Natto view

http://gyazo.com/2178f0eb35b7a9b5b8aa9c31f6d1fa4f.png

Visualizing data with many attributes

Sparklines used

http://gyazo.com/21f14e81c0d0212d362a5041f7d47040.png

InfoVis startups

Inxight

from HCIL

Spotfire

from HCIL

Tableau

Visualization tools and libraries

Requirements for visualization systems

Free or inexpensive

Run anywhere

Easy to install

Easy to program

Easy to publish

More requirements

Easy to write programs

Powerful representation

Runs on various environments

Windows, Mac, iOS, Android, ChromeOS, ...

Run on browsers

Chrome, Firefox, Safari, ...

Browser-based systems

table:drawing systems

complexity power standard Web open future

Processing ◎ ◯ ◯ ◯ ◯ △

P5.js ◯ ◯ ◯ ◯ ◯ ◯

D3.js ◯ ◎ ◯ ◯ ◯ ◎

Flash △ ◯ ◯ ◯ △ ×

Java △ ◯ ◯ ◎ ◯ ×

JS+Canvas △ ◯ ◯ ◎ ◯ ◯

JS+SVG △ ◯ ◯ ◎ ◯ ◯

HTML ◯ × ◎ ◎ ◯ ×

Other open systems

table:drawing systems

complexity power standard Web open

OpenGL × ◎ ◯ ◯ ◯

PostScript △ ◯ ◯ × △

System-dependent

table:drawing systems

complexity power standard Web open

GDI(Win) △ △ × × ×

DirectX(Win) × ◎ × × ×

Cocoa(Mac) △ ◯ × × ×

Xlib(Linux) △ △ × × ×

Using P5.js from Scrapbox

Nonstandard output devices

Pinwheel, bubble, unbrella, wheel, ...

Important for real-world interfaces

Bubble display

Information Parcolator

http://gyazo.com/ca0bcbff3bbdd3e8fcc6f32f4ed5e5d8.png

Bubble display

At Roppingi Hills

http://www.youtube.com/watch?v=L2v0IgD9bo4

Unbrella display

http://gyazo.com/083936a88763b062a2efb830b9369651.png

http://gyazo.com/e6ba4e951917dd465a09dcdeb68e6c1a.png

Unbrella display

http://farm1.static.flickr.com/97/252986258_9c00b43cfd.jpg

Wheel display

http://www.youtube.com/watch?v=mT13ZcpwYtA&f

;

Pinwheels

Pinwheels by Hiroshi Ishii

Showing information ambiently

http://gyazo.com/beac28ea40a5c2e0094325a0c1868c1d.png

Ambient Orb

Display stock prices and weather forecast

http://gyazo.com/fe68d7fcec7687f6c0fac8be20467c6c.png

References

Conference proceedings

Bookshelf on IV

http://gyazo.com/bb92d74a06e9df356a5f6ae1bd60b860.png

http://gyazo.com/688a73ec88e95bb61c9f61af4bdb555e.png

http://gyazo.com/2e90b6bf8e764d88e12ba66680e5c885.png

http://gyazo.com/e5294839c0dcd270950cbf061a21e8f2.png

New (2020)

https://www.edwardtufte.com/tufte/seeing-with-fresh-eyes https://gyazo.com/f47db1401b30689a28553185ce96ab77

5-book set

$240

https://gyazo.com/61570e9c07d9795aabfb8822fa99b8d9

Full text on the web

https://Gyazo.com/d1d51dfff4bc4608c498c4ee4c7d6586.png

Beautiful visualization

https://Gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

Visualizing Data

Information visualization using Processing

https://Gyazo.com/43c0779e5a0eb64f52c0258868cd5ab8.png

https://gyazo.com/9d9b7421e48936f09ab9b270ae6ea48e.png

https://www.amazon.co.jp/dp/4802510136 https://gyazo.com/1124f687822260d91bf538706b71e89c

IV textbook by Prof. Ito

https://www.amazon.co.jp/dp/4339028835 https://gyazo.com/f7bb7c5bbf19e4040f63c762d8bfe493