ビジュアライゼーション(12) 雑多な話題 2017/1/19

雑多な話題

レポート課題

1. Vis.jsでネットワーク視覚化

https://gyazo.com/c3354fccbfa059910593f046e4ffc4f3

https://gyazo.com/679742a3d56ec2a7b3ce64e0b0713eb6

手持ちのネットワーク形データまたは階層形データを視覚化する

2. データアクセスパタンの視覚化

表現例1

Wikiページの更新/参照情報

http://gyazo.com/c6e1b9555b4a1f158042225efe121b40.png

表現例2

GitHubの更新パタン

http://gyazo.com/0367e4e015c773b3bb8cb33308076bc9.png

レポート提出方法

A4で2～3枚程度

必ず画像を含める

プログラムを作成しても良いし考察だけでも良い

Canvas, SVG, P5.js, D3.jsなど

アニメーションを利用可能

雑多な話題

天気の視覚化

視覚的認証

システム紹介

ビジュアライゼーションの今後

情報ソース

課題

天気の視覚化

東京アメッシュ

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

東京風速

http://gyazo.com/7709dd3719f24ec79a2d68b47f9ffb9f.png

画像認証

記憶した画像を認証に利用

http://gyazo.com/38a52f9d4f2c67eaf6f6cc7acdf3e13e.png

認証の必要性

ユビキタス社会

→ 誰もがどこでも計算機を使う

→ 計算機資源の共有がすすむ

→ どこでも認証が必要になる

認証のいろいろ

持っているものを利用

鍵、USBメモリ

自分自身の特徴を利用

生体認証

知っているものを利用

パスワード, チャレンジ質問

能力を利用

CAPTCHA

Webページの認証

現在はパスワードベースがほとんど

画像認証も台頭中

パスワード認証

実装が割と簡単

認識技術が不要

パソコンでは利用しやすい

キーボードがあるから

正しく運用すれば安全

パスワードの問題点

適切なパスワードを選ぶのが困難

覚えるのに苦労する

すぐ忘れる

容易に解読される

安全な運用が難しい

簡単にコピー可能

文字入力装置が必要

認証ハードウェアの問題点

持ち歩くのが邪魔

持ち歩くのを忘れる

紛失/盗難の危険

生体認証の問題点

怪我や病気で使えなくなる

コピーされる可能性がある

変更が不可能

理想の認証を考える

誰でも

どこでも

簡単に

安全に

認証デバイスを使わない

安心感がある

実現要件

脳内情報だけを利用

知識、能力、etc.

自分だけが実行できる技術を利用

⇒ エピソード記憶を利用

エピソード記憶の特徴

誰もが独自のエピソード記憶を持っている

忘れることがない

他人にはわからない

コピーできない

c.f. 意味記憶

画像を認証に利用

画像はエピソード記憶として残りやすい

自分だけの画像 = 自分だけのエピソード記憶を認証に利用

DéjàVu

自動生成した画像から認証画像を選択

http://gyazo.com/38a52f9d4f2c67eaf6f6cc7acdf3e13e.png

PassFace

顔を選択

http://gyazo.com/918210f59d3892b2acdeb7aa276e9863.png

PassPoints

http://gyazo.com/eb52cc445b41c141dae0c2425b962d19.png

覚えていられない

誰でも同じような点を選びがち

VisKey

特定の点を選択

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

Vidoop

画像のカテゴリを選択

OpenIDに対応

http://gyazo.com/a5e94fe05d651e09b942566eba50684b.png

Recall-A-Story

http://gyazo.com/80cf70536ce29eb3e8afcde8e93f30f6.png

物語を思いうかべながら画像を選ぶ

物語を考えるのが大変

しかもたぶん忘れる

西垣式

http://gyazo.com/fe506a9fca9f94f2553897cd9767c988.png

見辛い画像から根性で選ぶ

後で見てわからなくなるか、誰でもわかるかどちらかのような...

Wiedenbeck式

http://gyazo.com/351a3b2722a7f524c2271812f07308c5.png

直接選ばず、多角形内から選ぶ

難しすぐる

なぞなぞ画像認証

個人的記憶と結び付いた画像から問題を生成

正答を選ぶと認証成功

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

デモ: なぞなぞ画像認証

本棚.org

問題作成

なぞなぞ画像認証の利点

忘れない

入力が簡単

認証レベルを設定できる

グループで利用できる

格好良いものができる

格好良いなぞなぞ認証

http://gyazo.com/ca70afc60ec5218224c483e7c8ea46c2.png

なぞなぞ画像認証の問題点

問題作成が面倒

安心感が欠如

ヒューマンクリプト by 今井

システム/人間を総合的にセキュリティを考える

重要概念だが流行っていない

必要技術

人が安心できる方式

安全性を評価する技術

参考: EpisoPass

なぞなぞからパスワードを生成

パスワードを覚える苦労を根絶

http://gyazo.com/61ff790b29708884e0b32784b5c7fb95.png

デモ: EpisoPass

様々なシステム紹介

Drawing Dynamic Visualizations by Bret Victor

https://vimeo.com/66085662

http://gyazo.com/51e3e96756bf618c25c3184077bae675.png

Video: Bret Victor

Lecture at Stanford

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

JavaScriptの視覚化ライブラリ

Canvas, SVGの普及とともに増大中

視覚化ライブラリ20選

jQueryのライブラリ多数

jQuery Sparklineの例

code:javascript

...

$('.line').sparkline();

表示されるSparkine

http://gyazo.com/54620ef5792f56d57bcaef3429b70b45.pngaaaajabba

ᕦ( ͡° ͜ʖ ͡°)ᕤ

emoji

Scrapboxのアイコン記法

増井俊之.icon

増井俊之.icon*10

/icons/check.icon

/icons/わかる.icon

Data-Driven Documents (D3)

JavaScriptの視覚化ライブラリ

DOMデータをベースにSVG描画

http://gyazo.com/de8d809e2d27f77f76300a6d854fb322.png

D3の例

Treemap, Sunburstなど各種

d3によるTreemap

http://gyazo.com/78195b75ea63a1f901f4986d35e40be8.png

d3によるSunburst

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

c.f. Overdisk

http://gyazo.com/105523c43eea6892fba4a76694f5a5bc.png

D3の特徴

2015現在最も人気がある視覚化ツール

新しいプログラミング手法と融合

D3 + React

Video: Design is a search problem

by Mike Bostock

Gephi

各種プラットフォーム向けグラフ視覚化

http://gyazo.com/df9bc4e839d00efad401c72d08af56d7.png

touchgraph

グラフ視覚化

http://gyazo.com/b01cde25f45ec668914f16f971b26de6.png

Livehoods

http://gyazo.com/f403687b15d406b8c6535700ab1c01a8.png

CMUのプロジェクト

foursquareの利用から行動範囲を調べる

黒人地域が抜けてる...

VivaGraphJS

http://gyazo.com/82704e7bfdab25ee6aa7cf8d4bd1a717.png

グラフをリアルタイム視覚化

VVVV.js

http://gyazo.com/84b4b4ef14428f79a548221600b1e350.png

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

MAXに似ている?

ArborJS

グラフ視覚化

http://gyazo.com/775d385df4ea3d7db5c5fe9a31d8c36b.png

Miso

http://gyazo.com/6921c694411a51a947e6b7354bc729b1.png

データ管理+情報視覚化ライブラリ

解説

igraph

ネットワーク視覚化/データ管理ライブラリ

R, Python, Ruby

http://gyazo.com/dcb2c36eee60864a76f92fb8b9b0d781.png

http://gyazo.com/cf7d02feb113f85c8ed3f3b1b7da66e4.png

InfoVis

http://thejit.org/ http://gyazo.com/c9361874f5163ffccdda8f65a53450bd.png

InfoVis

JavaScriptによる視覚化システム

ポピュラーな視覚化手法をサポート

アニメーションサポート

InfoVisによるTreeMap

http://thejit.org/static/v20/Jit/Examples/Treemap/example1.html http://gyazo.com/d83b93de1a2273fae70f79a7b9a14e14.png

InfoVisによるネットワーク視覚化

http://thejit.org/static/v20/Jit/Examples/ForceDirected/example1.html http://gyazo.com/ad098fd9ef176e44c187bdf4212e3413.png

infogr.am

対話的なインフォグラフィクス作成

http://infogr.am/Home-Run-Leaders-by-Season-Since-1901 http://gyazo.com/28489a66010a53e9235e705587c51d9b.png

RAW

http://gyazo.com/65c11d14d0ffae1f2546a564635d0f8e.png

d3を利用

Treemapなど決まったグラフを生成できる

PHP/SWF Charts

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

SocialAction

Ben Shneidermanのネットワーク情報視覚化ツール

ネットワーク分析と視覚化を統合

http://gyazo.com/027041ae81033b7de033394195b10f59.png

Video: SocialAction

http://gyazo.com/e48af851cee63cdd5a7d46b01a9a0bb0.png

https://vimeo.com/7308004

Cytoscape

バイオ研究のネットワーク視覚化ツール

cyto == 「細胞」

一般的なネットワーク視覚化に利用可能

日本語情報Wiki

Rhinoceros

デザイン、設計、製造などあらゆる分野におけるサーフェスモデラー

NURBS曲面を利用

Grasshopperというビジュアル言語利用

Visualizing.info

InfoVis portal?

Kibana

ElasticSearchを使ってるビジュアリゼーションサイト

Facebook graph, Open graph

Graph drawing for Facebook links

WebGL

ブラウザでOpenGLを利用

JavaScriptでCanvasに描画

OpenGL

3次元描画ライブラリ

Silicon Graphics社のワークステーションのIris GLライブラリをオープン化したもの

OpenGLの例

code:test.c

#include <GL/glut.h>

void ohinit(void)

{

glClearColor(0.0,0.0,0.4,0.0);

glFrontFace(GL_CW);

glEnable(GL_CULL_FACE);

glCullFace(GL_BACK);

}

void ohreshape(int w,int h)

{

glViewport(0,0,(GLsizei)w,(GLsizei)h);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(-1.2,1.2,-1.2,1.2);

glMatrixMode(GL_MODELVIEW);

}

void ohdraw(void)

{

glBegin(GL_TRIANGLE_FAN);

glColor3f(0.0,0.0,1.0); glVertex3f(0.0,0.0,1.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);

glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);

glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glEnd();

glBegin(GL_TRIANGLE_FAN);

glColor3f(1.0,1.0,0.0); glVertex3f(0.0,0.0,-1.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);

glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);

glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glEnd();

}

WebGLによる立方体回転

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/SpinningBox.html http://gyazo.com/2b2d731b33eefbc423c30b28e0b8c3ee.png

ソースの一部

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

WebGL Fluid

https://gyazo.com/109ffc512ac1529068921545095db984

WebGLサンプル

サンプル @ Khronos

three.js サンプル多数

enchant.jsのWebGL拡張

スマートフォンでWebGLを利用

「初音ミク」

http://gyazo.com/de5e9540a4deb2c0291cd6c0306a33d7.png

WebGLの将来性

大抵のGLプログラムはブラウザで動くと思われる

Canvas標準の描画より高速

今後の開発はWebGLを利用するとよい

将来のビジュアライゼーション

これまではパソコン上がほとんど

これからは大小様々な機器で

情報視覚化トレンド

どこでも安くディスプレイ

iPad、大型ディスプレイ

どこでも小さなディスプレイ

スマートフォン

Information Dashboardというのがある

デジタルサイネージ