6. Visualization of various data

Lecture notes

Task1: visualization of hierarchical data

Visualize hierarchical data using TreeMap, etc.

https://gyazo.com/b8023bc4426a31f2b45e07708d93378e.png

Data examples

PC filesystem

Financial data

National budget

Home budget

Interesting data visualization is appreciated

(All kinds of lists can be visualized as hiearchical data)

Example: national budget visualization

http://gyazo.com/df597f3f71e3cd4303cfac7adce0e2a1.png

Task2: visualization of network data

Directed or undirected graph

Compare with handwritten graph

http://gyazo.com/c98655de5802c6dc6589f2628394e35d.png

Important checkpoints

Use original data

File system data

Personal relations

Other data on the net

Use real data

Don't use artificial data

Include at least 20 nodes

Visualization of table data

Excel data, etc.

Any attribute used for X/Y axis

Correlation

Timeline

PerspectiveWall

Paste a large table on 3D wall

Far data are displayed small

http://masui.org.s3.amazonaws.com/d/b/dbd6789eb9d669c471a83552c101b02e.gif

Video: PerspectiveWall

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

Nonlinear zooming of tables

TableLens

DateLens

FiCell

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

Use fisheye lens for table data

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

FilmFinder

Show various movie data on table

Realtime filtering using dinamic query

Fine-control slider for selecting conditions

https://s3-ap-northeast-1.amazonaws.com/masui.org/9/c/9cc8f3a3c537d01efd8bbdaf9a78aa21.gif

Video: FilmFinder

https://s3-ap-northeast-1.amazonaws.com/masui.org/c/a/cae12f5fb5813f1b6be21abd6329b2d6.mp4

TileBar

Show keyword distributions like tiles

https://s3-ap-northeast-1.amazonaws.com/masui.org/1/9/19518d9fc81d91a7cdd2c2a44ffbcbce.gif

Visualization of multi-attribute data

Sparklines

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

Visualization of timeline

Most popular and simple graph

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

Google "graph"

http://gyazo.com/e1584e9d090c53ccf5bbc250fd99ac42.png

Y-axis for timeline

http://gyazo.com/8baf8b82a1e7a51db6d250c7da63f91e.png

Sparkline

Show graphs by icons

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

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

LifeLines

Juvenile delinquency data

http://masui.org.s3.amazonaws.com/0/e/0e238c5693fc9f04f09be9fef8c67cc4.gif

See-log

Visualization of network log

http://gyazo.com/da09eac3bfe7230b460fb7c433280dcf.png

Visualization of Wikipedia edit ihstory

http://gyazo.com/248b7f2692553e0474280f1c51bbd378.png

Editing history of "abortion"

http://gyazo.com/47ba75aff16d3e1f511bf40da93dfb3e.png

SeeSoft

Visualization tools for software development

http://masui.org.s3.amazonaws.com/3/1/31164d1dc490ccc68827bf6dd30fe2ff.gif

http://gyazo.com/e302c5ea1380447b58495bfe25710c5d.png

http://gyazo.com/e04d8f9eb8d1dba6849c87724e0f4b2a.png

Visualizing Empires Decline

Showing timeline by animation

http://gyazo.com/77f6086ad6338de2ef15dd16f8bda00a.png

https://vimeo.com/11506746

Visualization by Nightingale

Years shown by angle

http://gyazo.com/58cf7b2762c167f5651500466f80f064.png

Other graphs

Donut graph

Scatterplot

Radar chart

Contour graph

Parallel Coordinates

Hearmap

Age visualization

Excel graphs

Bar chart

Horizontal bar chart

Line chart

Pie chart

Scatterplot

Area chart

Donut graph

Ladar chart

Contour graph

Bubble chart

Stock chart

Cylinder graph

Corn graph

Pyramid graph

Donut graph

http://gyazo.com/8570e4549b6e8bcb0c8567cbf85f574b.png

Contour graph

Drawn on Excel

http://gyazo.com/496fcf5783f6aa5946f2ecd8ba0d8813.png

Contour graph

Drawn using Mathematica

http://gyazo.com/d03154eeb529d6cbddf7862010e7fc8a.png

https://gyazo.com/cdd4e25f733d26bdaf54ff42a5e6bcf7

Ladar chart

http://gyazo.com/695143a6ef2c1ccb148fc61e63add8f2.png

Scatterplot

Good for finding correlation

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

Visualizing various statistics of the world

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

Gapminder

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

Parallel Coordinates

Show multiple attributes by x-axis

http://gyazo.com/e532c2c617c9a7344b68a75fa57fb5cc.png

Parallel Coordinates

http://gyazo.com/720129635d12c2602d1990fdc96ce417.png

ParallAX software

http://gyazo.com/449fbc02de153745dad937ad5b2ecaaa.png

Prof. Alfred Inselberg

at Ochanomizu University (2015)

http://gyazo.com/34228bfdf7167bf8e0387063aa0194aa.png

EYE-CANDY

http://gyazo.com/46d10c6e9b4e3bed7a85a7ebca409c5e.png

Mapping between map and graph

Selecting lines => area highlighted

Video: Parallel Coordinates

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

Parallel Coordinate

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

Parallel Sets

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

Combination of tag cloud and parallel coordinates

http://gyazo.com/216fe1491b7cd2fb32c2c57b9c8d98fb.png

Video: Parallel Tag Clouds

Heat map

Show attributes in colors

Visualization of correlations

Combination with treemaps

Heatmap for Web page focus points

http://gyazo.com/881d43ce6daa6fbaee51d36e166ab15c.png

Visualization of stock price up/down

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

Visualization for gene analysis

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

Visualization of Gene information

Heat map and parallel coordinate

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

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

(SOM)Self-organizing map

Map multidimensional data into 2D space

Put similar data nearby

http://masui.org.s3.amazonaws.com/4/d/4ddf6affb581e7eacf39ad880bca921c.gif

http://masui.org.s3.amazonaws.com/7/7/77112602ff513c413a85d0ec4ab65206.gif

Visualiatoin of oldness

Aging links

Aging badkground

Old links shown with blur

http://gyazo.com/1529ed75aa3fcc9b06680c9cfb65846c.png

Show age by texture

http://www.pitecan.com/Enzan/ http://gyazo.com/c7d37199ab3cf8cbfe52b9bce50e63d5.png

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

Chart junk

http://oku.edu.mie-u.ac.jp/~okumura/blog/node/2548 http://gyazo.com/e915d0923f2402253cc559e283124568.png

Chart junk

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

Chart junk

Deceptive graph

https://gyazo.com/c8b93a67603d32b1f72e1928dd81df9a

Deceptive circle graph

https://gyazo.com/789e37ee5b9bb78a4c4296e97f0e96bb

Various graphs @ Pinterest

http://www.pinterest.com/masui/visualization-ideas/ http://gyazo.com/dc3b784293236505cd7c18e254769957.png

End