O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

TIMEMAPができるまで 時間情報をもつデータの扱い⽅

603 visualizações

Publicada em

国⽴情報学研究所特任准教授 阿辺川武
2017年11月30日 日本電子出版協会
時間軸で情報を眺める検索エンジン「TIMEMAP」

Publicada em: Internet
  • Seja o primeiro a comentar

TIMEMAPができるまで 時間情報をもつデータの扱い⽅

  1. 1. TIMEMAPができるまで 国⽴情報学研究所 特任准教授 阿辺川 武 2017/11/30 時間情報をもつデータの扱い⽅ 1
  2. 2. ⾃⼰紹介 • 阿辺川 武 • 国⽴情報学研究所 特任准教授 • 専⾨は⾃然⾔語処理 • 近年は情報検索、ユーザインターフェース • 構築に携わったシステム • NHK放送⽂化研究所 放送⽂化アーカイブ • 福岡市科学館サイエンスナビ 2
  3. 3. TIMEMAPサイトの構築 データの収集 データの整形 検索システム作成 モックアップ作成 本番サイト構築 (フロント・バックエンド) サイト構成 インターフェース改善 デザイン 阿辺川担当 3
  4. 4. TIMEMAPの紹介 4
  5. 5. ⽬次 • 時間情報の可視化例 • 年表について • TIMEMAPができるまで • 現在の課題 • 今後の構想 • まとめ 5
  6. 6. 時系列情報の可視化 • 多くのデータは時間情報をもつ • ⽂書集合 • 購買履歴 • 個⼈情報(⽣年⽉⽇) • Webのアクセス履歴 • センサーで取得した情報 • ここでは時間軸にそって情報を提⽰することを時 系列情報の可視化とする 6
  7. 7. 時系列情報の可視化例 • NHK放送⽂化アーカイブ • 渋沢社史データベース • Google Books Ngram Viewer • Google Trends 7
  8. 8. NHK放送⽂化アーカイブ • 詳しくは「放送研究と調査」2014年8⽉号 p.58-72 • http://www.nhk.or.jp/bunken/summary/research/history/042.html 8
  9. 9. NHK放送⽂化アーカイブ:年表検索 9
  10. 10. NHK放送⽂化アーカイブ:番組検索 10
  11. 11. 渋沢社史データベース • 渋沢栄⼀記念財団が運営 • 渋沢栄⼀が関連した会社を 中⼼に、社史の内容を⽬ 次・索引・年表・資料編と いったデータから検索でき るサイト • https://shashi.shibusawa.or.jp/ 11
  12. 12. Google Books Ngram Viewer • Google Booksの中の⼀機能 • 書籍に出現する語句の使⽤頻度を⽐較 • 2010年にWebで公開 • https://books.google.com/ngrams • 1500年から現代まで • 当時は全書籍の4%(500万点、5000億語) • 2012年に6%に 12
  13. 13. Google Books Ngram Viewer 13
  14. 14. Google Trends 14
  15. 15. ⽬次 • 時間情報の可視化例 • 年表について • 歴史年表 • ⽐較年表 • インフォグラフィックにおける年表 • TIMEMAPができるまで • 現在の課題 • 今後の構想 • まとめ 15
  16. 16. 両川の歴史年表: http://www.ryokawa-j.city-niigata.ed.jp/tiiki/image/nenpyo2.jpg 16 歴史年表
  17. 17. 歴史年表 • 過去に起きた代表的な事象を時系列で表⽰ • 古来の年表は縦書き • 右から左 • Webになじまない • 作成者が表⽰項⽬を選択 • 時間が⾶び⾶び • 間隔が⼀定でない 17
  18. 18. 18 図解 ⽇本史:⻄東社編集部 https://www.seitosha.co.jp/book/isbn-9784791617616.html ⽐較年表
  19. 19. ⽐較年表 • 並列年表、対照年表ともいう • 複数の観点の出来事を並べて、お互いの関係性を 把握する • 政治、⽂化、世界 • ⽇本、ヨーロッパ、アジア • ⼤きな時間軸は揃っている • 完全に同じではなく、世紀は揃っているが、その中の年 はずれていることもある 19
  20. 20. 時間軸を変形する https://mterr.wordpress.com/art-design-in-context/timeline-project/ https://blog.adioma.com/how-airbnb-started-infographic/ 20
  21. 21. インフォグラフィック • 図や絵や説明⽂を使って、複雑な事柄をわかりや すく伝える • 編集者がデータを解釈し、どのような構成にする か決める • 表⽰する項⽬は恣意的に取捨選択される • デザイナーがデザインを考える • 基本的に⼀点ものの作品 21
  22. 22. インターネットの歴史 by YAHOO!JAPAN • サイト公開20周年を記念して作成された年表 22 https://about.yahoo.co.jp/20years/
  23. 23. ウェブの進化 • ブラウザの技術と歴史 23 http://www.evolutionoftheweb.com/?hl=ja
  24. 24. 時系列情報の可視化のまとめ • 時間軸:均等間隔型、要素連動型 • 項⽬:抜粋・集計型、全列挙型 時間軸 均等間隔 項⽬連動 項⽬の 選択 抜粋・集計 時系列グラフ 歴史年表 ⽐較年表 全列挙 カレンダー ⼀般的な検索結果 24
  25. 25. ⽬次 • 時間情報の可視化例 • 年表について • TIMEMAPができるまで • モックアップ • サマリーグラフ • 関連記事表⽰ • 検索事例 • 現在の課題 • 今後の構想 • まとめ 25
  26. 26. TIMEMAPのめざすもの • 利⽤者⾃⾝がデータを分析し、発⾒を得る • 盛り上がりの根拠が知りたい • ある事象の始まりが知りたい • 試⾏錯誤できるインターフェースを提供 • Webは動的に表⽰を変更可能 • 紙⾯では固定されてしまう • 時間軸を変更できる 26
  27. 27. TIMEMAPができるまで • インプレス井芹さんとの出会い • Internet Watchの過去記事を使って、インターネットの歴 史を俯瞰できるサイトを作りたい • Internet Watch: 1997年〜現在, 約60,000記事 • まずはNHK放送⽂化アーカイブの年表検索のイン ターフェースで実装 27
  28. 28. 最初のモックアップ 28
  29. 29. 最初のモックアップ • ⼀般的な検索結果 • タイトル、サムネイル、スニペット • 上部にドット表⽰によるグラフ • 密度で分布がわかる • 膨⼤な検索結果のすべてを⾒ることは出来ない • グラフが地図のように拡⼤・縮⼩できたらよい • Google Mapsのようなインターフェース • 動的に表⽰範囲が変わる年表 29
  30. 30. 地図表⽰ • Google Maps • 2次元 • 拡⼤・縮⼩が⾃由⾃在 • 初期は地図タイルによる実装 (現在はベクター形式) 30 国⼟地理院タイル仕様: https://maps.gsi.go.jp/development/siyou.html
  31. 31. ズーム レベル0 ズーム レベル1 ズーム レベル2 ズームレベル3 TIMEMAPにおける地図表⽰ • 2次元の地図表⽰のアナロジー • 1つは時間軸 • 拡⼤・縮⼩できる軸を1次元に • 拡⼤すると表⽰期間が短くなる • 地名を記事タイトルに 31
  32. 32. 情報密度について • 検索結果の多い少ないを視覚的に表す • Google Ngram ViewerやGoogle Trendsでは折れ線グラフ • NHK年表ではドット • 盛り上がり具合がわかる • 地図表⽰のみでは表現が難しい • 拡⼤していくと全体を⾒失う • 全体の傾向を表すグラフエリアは必要 32
  33. 33. 2番⽬のモックアップ 33 年表エリア サマリーグラフ
  34. 34. 2番⽬のモックアップ • 地図上の上下⽅向を時間軸に置き換え • 拡⼤・縮⼩→表⽰期間の縮⼩・拡⼤ • 左右⽅向は⽐較軸に • 複雑にならないように3軸に固定 • サマリーグラフを横に • 全期間のサマリー • 年表エリアの表⽰域を表⽰ • 年表エリアを拡⼤していくと、全体に対する位置がわからなく なる 34
  35. 35. 現在の形 35 年表エリア サマリーグラフ
  36. 36. 現在の形 • サマリーグラフを横型にし、画⾯下部へ • 既存のトレンドグラフはすべて時間軸が横⽅向 • グラフをブログなどに埋め込めるようにしたとき、縦よ り横の⽅がマッチする • → 年表エリアの時間軸とサマリーグラフの時間軸の⽅向 が異なる • 装飾デザインとして上下に⿊を⼊れる • 年表部分を強調できる • サマリーグラフのヒートマップ表⽰が鮮やかになる 36
  37. 37. サマリーグラフ • 地図の拡⼤・縮⼩ • 全体像と地名がわかるので、どの拡⼤率でも⾃分がどこ にいるかだいたい把握できる • TIMEMAP • 拡⼤していくと全体に対する位置がわからなくなる • 全体像を⽰すサマリーグラフが必要 • 3種類のグラフ • ヒートマップ、ドット、折れ線 • それぞれ⼀⻑⼀短 37
  38. 38. サマリーグラフ:ヒートマップ 表⽰ • 特徴 • ⾼頻度の時期ほど⾊が明る くなる • 全体の時間経過がわかりや すい • デメリット • 他の項⽬との⽐較が困難 • 単⼀項⽬で正規化して明るさ を求めている • 低頻度部分の把握が困難 38
  39. 39. サマリーグラフ:ドット表⽰ • 特徴 • 1ドット1記事に対応している • 全体の傾向がわかりやすい • 他の項⽬との⽐較ができる • 低頻度部分の傾向の把握ができる • デメリット • ⼀定頻度以上になると場所を埋め 尽くす • 全体が同じようになる 39
  40. 40. サマリーグラフ:折れ線表⽰ • 特徴 • 全体の傾向がわかりやすい • 他の項⽬との⽐較もわかりや すい • デメリット • 低頻度部分の把握が困難 • 他の項⽬と頻度差が多いと、 低頻度の項⽬がつぶれる 40
  41. 41. 関連記事表⽰ • 選択した項⽬と関連する項⽬を表⽰ • インプレス Watch • ニュース記事(⽇刊) • Internet Magazine(⽉刊) • インタネット⽩書(年刊) • 異なるメディアで同⼀の事象が⾒つ かる • プレスリリース⇔ニュース記事 • 2つの関連度を考慮 • 内容の類似度 • 時間の近さ 41
  42. 42. 検索事例 • ブラウザの隆盛 • https://timemap.info/?r=watch&c=internet_watch&q0=netsc ape&q1=ie&q2=chrome • 4Kはいつ頃から出てきたか? • https://timemap.info/?r=watch&q0=4K%20%E8%A7%A3%E5 %83%8F%E5%BA%A6&q1=4K 42
  43. 43. ⽬次 • 時間情報の可視化例 • 年表について • TIMEMAPができるまで • 現在の課題 • 取得件数の上限 • 重要度ランキング • 空きスペースの活⽤ • 今後の構想 • まとめ 43
  44. 44. 現在の課題:取得件数の上限 • 現在は10,000件が上限 • 表⽰速度、転送データ量(450KB) • その後は「次の10,000件を取得」 • 先に取得するか、あとから取得するか • スムーズな拡⼤・縮⼩ → 最初に全件取得できない • 拡⼤中に残りを取得 → 途中で⽌まる • 当⾯は今のまま • 古いものから取得⇔新しいものから取得 44
  45. 45. 現在の課題:重要度ランキング • 限られたスペースですべての結果は表⽰できない • 表⽰されている項⽬の後ろにたくさんの項⽬ • 地図ではランドマークが優先 • 現在のTIMEMAPはほぼランダム • 重要度の⾼い項⽬を優先的に表⽰したい • 現在はタイトルに検索語があるものを優先 • 何を重要度とするか • 記事の重要性 • アクセスランキング • 新規概念 45
  46. 46. 現在の課題:空きスペースの活⽤ • 検索結果が特定の時期だけ集中し、周辺が スカスカになることがある • 記事をすべて表⽰しようとするとズームレベル が深くなる • 空きスペースにも表⽰できないか? • 解決策 • 項⽬の表⽰位置をずらす • 線を引く • 時間軸を項⽬連動型にする • 時間順に全件を並べる 46
  47. 47. ⽬次 • 時間情報の可視化例 • 年表について • TIMEMAPができるまで • 現在の課題 • 今後の構想 • ⼊⼒アシスタント • 根拠の提⽰ • 分析ツール • まとめ 47
  48. 48. 今後の構想:⼊⼒アシスタント • 3つ組⼊⼒補助 • 3つの⼊⼒ボックス⼊れるキーワードを考えるのは⾯倒 • 1つキーワードを⼊れると⽐較に耐えうるキーワードを 提案してくれるとうれしい • キーワード選択の指針 • 同じカテゴリー内 • 同程度の出現頻度を有する • 異なる出現傾向を有する 48 Wikipediaカテゴリ 深層学習による分散表現
  49. 49. 今後の構想:根拠の提⽰ • グラフで特定の期間だけ盛り上がっている • なぜ盛り上がったのか? • ⼤まかな説明でよいから知りたい • 例:apple iphone • ⾼頻度語を整理 • 盛り上がっている期間のタイトルから共通するキーワー ドを抽出する • 複数⽂書要約 • 盛り上がっている期間の記事をまとめて要約する 49
  50. 50. 今後の構想:分析ツール • 過去のデータから未来を予測 • 汎⽤的なもは難しい • 周期的な事象の発⾒ • おもに年単位 • これからホットになる話題はなにか • アソシエーション分析 • バスケット分析(おむつを買う⼈はビールも買う) • ある項⽬の頻度が⾼くなったら時、同様に頻度が⾼く なっている項⽬を探す 50
  51. 51. TIMEMAPで扱いたいデータにつ いて • 過去の出来事をたどれる • 網羅性 • 継続性 • データの質が担保されている • 複数⼈による校正がなされている • ファクトチェックに耐えうる • 膨⼤で整理しきれない • 検索で絞り込めるもの 51
  52. 52. まとめ • インターネットは新しいものを探すのは得意だが、 過去を探すことは難しい • 多くは消えてしまう • 過去のデータを保存しておくことが⼤事 • インターネットからアクセス可能であるとなお望ましい • 歴史あるデータを探すツールとしてTIMEMAPが作 られた • コンテンツパートナー募集中 52

×