1. ガイダンス - sfc-vis2017

1. ガイダンス

ビジュアライゼーション

増井俊之

慶應義塾大学環境情報学部

masui@pitecan.com

2017年9月28日

Scrapbox

クラウド上の情報整理 / 共有システム

講義でフルに利用予定

https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png

Scrapboxとは

Web上で情報整理

Web上で情報共有

Wikiを便利にしたもの

Scrapbox情報

/help

/UIPedia

/nota-press/Scrapbox紹介記事

Scrapboxの利用登録

Googleアカウントが必要

GMailなどで利用されているもの

keio.jpのアカウント (G suiteのアカウント) も利用可能

Googleアカウントで https://Scrapbox.io/ でユーザ登録

アカウント作成

sfc-vis2017-CNSログインアカウントプロジェクトを作成

e.g.

出席登録/レポート提出/質問などあらゆることに利用

これが無いと受講できないので注意

自己紹介

シャープ、ソニー、産総研などに勤務

ケータイの予測変換(POBox)などを開発

2008秋まで米国Appleに勤務

フリック入力システムなどを開発

2009より慶應義塾大学

ユーザインタフェースの研究開発

各種Webサービス運用中

Gyazo (Desktop screen capture)

Scrapbox (Wiki)

本棚.org

論文、雑誌記事、Web記事多数

POBox

https://gyazo.com/ac2b347a7042f920edd576ee07c4b7f4.png

「フリック」入力

https://i.gyazo.com/1691febad27439d3bf44232c54dcb1e8.png

新書

「スマホに満足してますか? - ユーザインタフェースの心理学」

光文社新書

2015/2/17発売

https://Gyazo.com/64c56d9c3e67745e95bc038487d09c98.png

煽り

https://i.Gyazo.com/bf3bc7510fdb74c8db4bb058fd3ed6d6.png

その他の著書

http://hondana.org/%E5%A2%97%E4%BA%95/4756102816 https://i.Gyazo.com/4f415439da4a838af43a73bf8325df55.png

http://hondana.org/%E5%A2%97%E4%BA%95/4756146627 https://Gyazo.com/d7e6378a56a03c4c183185b475feeacc.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114616 https://Gyazo.com/e6137ea90f398f83394f44435eab97f0.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114861 https://Gyazo.com/715cc3421c8b50897f8afa7efa38ee0f.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873115043 https://Gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

連載

「コロンブス日和」

技術評論社「Software Design」

https://gyazo.com/c2df1e93677b155229ea17bec0e7864d.png

研究テーマ

情報検索

情報視覚化

予測/例示インタフェース

テキスト入力

コミュニケーションシステム

ユビキタスインタフェース

認証手法

Web

http://pitecan.com/

「増井」でググる

野球選手とかは無視

他の講義

インタフェース設計論

次世代Webプラットフォーム論

全世界インタフェース (研究会)

研究テーマ

情報検索

情報視覚化

予測/例示インタフェース

テキスト入力

コミュニケーションシステム

ユビキタスインタフェース

認証手法

ビデオ: 実世界インタフェース

https://www.youtube.com/watch?v=1di7_2J8X0Y

EpisoPass

http://episopass.com/EpisoDAS.html?name=Facebook_masui https://gyazo.com/98469a496a306eced38983f93c54e44e

研究会

ユビキタスコンピューティング

ユーザインタフェース全般

Webサービス

IT業界知り合い多数

大学系

学会系

ベンチャー系

Web商売

事例: Gyazo

https://Gyazo.com/12f732583b5ea7e5b440baa3f2ddd5b4.png

Gyazo (2010/7)

https://Gyazo.com/765bc52757dc9b5ce5a613aee9a1c771.png

Gyazo (2012/1)

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

Gyazo (2014/1)

https://Gyazo.com/0780f93a7992fdeca48cdda7a5ca6dcf.png

Gyazo (2015/1)

https://Gyazo.com/bde4e61c85ebeeb357e1705b2a0a9fb3.png

Alexaデータ (2013/11/14)

https://Gyazo.com/426f5616b89d741d5edca122e4f68b26.png

Alexaデータ (2014/1/15)

https://Gyazo.com/73548f7c10a1148e4ac475945c66f947.png

Alexaデータ (2014/10/27)

https://Gyazo.com/cecd0d5b1e47514518cd97f627b88d2e.png

Alexaデータ (2014/11/14)

https://Gyazo.com/609db17ad3929ea27b0bf81edb899a06.png

Alexaデータ (2015/1/26)

https://Gyazo.com/c49dfb0cb4926fd0365e4c590c04b562.png

Alexaデータ (2015/3/3)

https://Gyazo.com/59823b38bca6e8f59b38d01a391ed34c.png

Alexaデータ (2015/4/9)

https://Gyazo.com/c4a8b16e548b665f650eacb016659d7a.png

Alexaデータ (2016/9/25)

https://gyazo.com/097a51e78a361c04f2aec1b1ac990161.png

Alexaデータ (2017/9/25)

https://gyazo.com/d01f9f57afb7dd413faed2edc0a1d6b8

資金ゲット!

https://gyazo.com/a99458e321aa5be81557b3387150b464.png

シラバス

インターネットの発展やディスクの大容量化によって、Web上や計算機の中の大量の情報を扱う機会が増えてきた。わかりやすく情報を人間に提示するための様々な技法が、計算機の普及以前から書籍・看板・ポスターなど様々なメディアで利用されているが、計算機が広く利用されるようになってきた現在、自分が必要とする情報をインターネットから効率的に検索するための様々な対話的な情報視覚化技術が開発され実用的に利用されるようになってきている。また、時間的に変化する情報や複雑な構造をもつ情報の理解を助けるための情報視覚化技術も研究されている。このような情報視覚化技術の考え方や技術動向を、豊富な具体例をまじえて解説する。

評価方式

レポート2回を予定

視覚化実習をやるかも

ブラウザ上に情報を表示する練習

ビジュアリゼーションのいろいろ

インフォグラフィクス

サイエンティフィックビジュアリゼーション

情報視覚化

ビジュアリゼーションのいろいろ

インフォグラフィクス

サイエンティフィックビジュアリゼーション

情報視覚化

インフォグラフィクス

情報を奇麗に表示する技術

デザイナ的情報表示

計算機技術と直接関係無い

Infographics

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

ニューヨーク地下鉄のビジュアライゼーション

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

ナポレオンのモスクワ侵攻

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

サイエンティフィックビジュアリゼーション

シミュレーション結果やセンシングデータを計算機で3次元表示

大昔から綿々と使われている

サイエンティフィックビジュアリゼーションの例

https://Gyazo.com/456260ff7c9681525f41b2dc209ca6fb.png

サイエンティフィックビジュアリゼーションの例

https://i.Gyazo.com/d8a770c4cd912fb8523ab2a0be0d0462.png

サイエンティフィックビジュアリゼーションの例

Finite Element Method

https://Gyazo.com/aa1d5e522d2cdfe2cabc7abff629731a.png

サイエンティフィックビジュアリゼーションの例

亜鉛原子と水素原子の結合

https://Gyazo.com/1ae719bf0c4eb8607f1cb9b385dbad92.png

AVS

サイエンティフィックビジュアリゼーションの代表的ソフトウェア

https://i.Gyazo.com/efcda5f12538b36633541455aa4ea0b4.png

情報視覚化

(大きな)データをわかりやすく表示する技術

実世界のものと対応関係が無い

情報視覚化の特徴

形が無い情報を扱う

ファイルシステム、ネットワーク構造、...

視覚化手法が任意

対話的に情報発見/検索/実感

なめらかな操作

実世界と対応していない例

https://Gyazo.com/f3d16cebda8feb6a361814437b1ef45b.png

実世界と対応できない例

ポアンカレ円板 (非ユークリッド幾何) へのマッピング

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

無限の表現

https://Gyazo.com/dd6315efbef37720b282b507d5499071.png

HyperbolicTree

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

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

デモ: TreeVis

https://Gyazo.com/c233444d864cb09b2cdd02d60213caa2.png

実世界的視覚化

Aaron Koblinによるフライト視覚化

http://www.youtube.com/v/ystkKXzt9Wk https://Gyazo.com/7212ae31d9f27ad2cfce177010d0b5ee.png

何のために情報視覚化を行なうか

情報検索

データマイニング

プログラミング

デバッグ

アート

何となく?

身の回りの情報視覚化

アイコン

ウィンドウ

フォルダウィンドウ

視覚化の対象

ネットワーク構造

インターネットのリンク情報

ソーシャルネット

ソーシャルフィルタリング

計算機情報

ファイルシステム

各種ログ

ネットトラフィック

視覚化の対象

バイオ情報

遺伝子

タンパク質構造

マインドマップ

年表

アート

視覚化対象

巨大なもの

Web全体

小さいもの

Sparkline

https://Gyazo.com/a1f02c17133e2035a75e67420a4bb6cf.png

情報視覚化の手法

フィルタリング技法

画面へのマッピング手法

インタラクション手法

フィルタリング技法

条件とのマッチング

拡大/縮小

重要度計算

画面へのマッピング手法

表現形式

形、色、テクスチャ、..

レイアウト

歪表示

アニメーション

インタラクション手法

移動/拡大/縮小

動的フィルタリング

直接操作

情報視覚化の歴史

XeroxPARC、メリーランド大学などで盛んに研究(80年代)

様々な手法が提案される

InfoVisコンファレンスなども

その後研究は下火に

Ben Shneiderman

https://i.Gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png

Stuart Card

https://Gyazo.com/7466a651e0d3c76f35977e860761ca7f.png

情報視覚化の現在

画期的な新手法を見かけない

新規参入者による再発明 (e.g. TreeMap)

デザイナ系

古臭いとか言って馬鹿にしている

健在な商売もある

銀行,バイオなど特定分野

汎用ツール商売はすべて失敗

技術トレンド

パソコンの高速グラフィクス

ブラウザ技術

JavaScript, HTML5

サーバ/ブラウザ協調

「クラウド」上の「ビッグデータ」

視覚化ライブラリ

描画ライブラリ

レイアウトライブラリ

統計処理システム

気分トレンド

基本的技法はあまり進展が無い

TreeMap、ばねモデル、...

論文になるようなアイデアは少ない

昔の研究者は引退した

飽きた?

AaronMarcusの記事の感想

ニッチ商売は残っている

一般トレンド

アーティスト/Webデザイナ/マニアが参入

「プログラマの視覚化はひどい」

論文にはなりにくい

原理は自明 or 再発明

Jock Mackinleyは「それは俺が試した」といつも言ってた

一般トレンド

視覚化システムをはじめて見るユーザが増えた

カッコ良い視覚化システムが増えた

使える一般的システムやツールが増えた

視覚化ライブラリ

視覚化ツール

Processing

Ben Fryの開発したお手軽言語

Javaのサブセット

情報視覚化に特に有用

Processing

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

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

P5.js

Examples

https://p5js.org/examples/simulate-particle-system.html https://gyazo.com/dc35c16d9d72708a3500035661777339.png

ScrapboxでP5を使う

/prog-exercises

https://gyazo.com/f3c1bfc01bde8b4a62a1794c6d065699

D3.js

http://d3js.org/ https://Gyazo.com/fa0d9ef1261fdc47f963d4196de24935.png

今後のトレンド

一般人が参入してはじめて実用化がはじまる

e.g.VisiCalc, Web

研究が廃れた後でブレイクするものも多い

テキスト検索、AR、etc.

授業予定

情報視覚化の基礎技術

階層的データの視覚化

ネットワークデータの視覚化

表情報の視覚化

時間変化の視覚化

授業予定(続き)

情報視覚化と情報検索

情報視覚化とGUI

Webと情報視覚化

ビジュアルプログラミング

情報視覚化とアニメーション

情報視覚化と社会

情報視覚化の基礎技術

看板/ポスターなどの一般的ノウハウ

情報デザイン本

3次元表示、ズーミング、情報の変型表示、フィルタリング

対話的操作技術

階層的データの視覚化

大規模なデータは階層的構造が多い

ファイルシステム

Yahoo!ディレクトリ

辞書

...

巨大な階層的データを視覚化するための手法を解説

ネットワークデータの視覚化

Web上の情報は階層的ではない

多数の情報がリンク結合

ファイル情報も実際は階層的ではない

e.g.友人Aから送られてきた写真

メールボックス?写真フォルダ?友達フォルダ?

ネットワーク的に結合された情報の視覚化技術を紹介

表情報の視覚化

行/列で構成された巨大データ

本棚/書籍

ユーザ/コミュ

RDB

表計算ソフトウェア(スプレッドシート)

大きな表の視覚化技法を解説

時間変化の視覚化

時間変化する値の視覚化

最も基本的なグラフ

温度、株価、...

時間変化するデータの視覚化手法を解説

情報視覚化と情報検索

検索手法

キーワードによるフィルタリング

データ間の関連の利用

対話技法

検索作業を支援するための情報視覚化手法を解説

情報視覚化とGUI

GUI部品は計算機情報の対話的視覚化ツール

メニュー/スクロールバー/アイコン/...

様々な拡張提案

計算機操作を効率化するための視覚化技法について述べる

Webと情報視覚化

Webは情報視覚化技術の壮大なテストベッド

情報視覚化の対象データはWebに存在

様々な視覚化システムがWeb上で提供

ブラウザを使った各種のWeb情報視覚化システムの技法や実例を紹介

ビジュアルプログラミング

プログラムを図形的に表現

宣言的記述

並列動作の記述

ビジュアルプログラミングと視覚化手法との関連を解説

情報視覚化とアニメーション

アニメーションの利用

画面に入りきらない情報の表示

動きの表示

時間的変化の表現

プログラムの動きの表現

アニメーションの活用法を解説

情報視覚化と社会

「ユニバーサルデザイン」的視覚化技術

ユニバーサル/ユビキタス

情報視覚化技術の社会的影響

実例紹介

LensBar

WING

Scrapbox

デモ: LensBar

動的曖昧検索+非線型ズーミング

Web版

https://Gyazo.com/8661098d45882443de41a78f7cfcadd0.png

デモ: WING

1D/2D/3Dズーミングによる情報検索

https://Gyazo.com/d44943c8f574a2da409443844eff601c.png

デモ: Scrapbox

お手軽Wiki