DVVX:データビジュアライゼーション入門
基本の考え方とプログラミング言語<D3.js>ハンズオンワークショップ
Finished イベント終了
柔軟な描画をWebで実現する<D3.js>の基礎を理解し
データビジュアライズ手法とプログラミングを学ぶ
柔軟な描画をWebで実現する<D3.js>の基礎を理解し
データビジュアライズ手法とプログラミングを学ぶ
About
チケット売り切れのためキャンセル待ちチケットを5枠発行します。2018.3.26
スマフォの普及やセンサーの発達、Webの日常が進む現在、大量のデータがさまざまに収集されています。そして、多くは高度に発達したプログラムや大量のデータを一瞬に処理するコンピューターにより、製品やソリューション、ビジュアル資料として蘇生されています。つまり、データビジュアライゼーション(DV)が活躍する時代です。
そのDVを、Webの技術であるJavaScriptを用いてブラウザ上で再現するプログラム言語が話題との<D3.js>。D3の名称は「Data-Driven Documents(データ駆動ドキュメント)」。その名の通りデータとドキュメント(DOM)を結びつける独特なセレクション機能がD3の中心となっています。このセレクション機能を使うことで図形を描画する処理を簡潔に記述することができるのがD3.jsの大きな特徴です。*1
*1 https://shimz.me/blog/d3-js/2977より引用
そのD3.jsですが、まだまだ使いこなすユーザーが少なく、その可能性からしてまだまだポテンシャルがあるのが現状です。
有志によりスタートしたコミュニティ【DVVX(Data Visualization version X)】では、<データビジュアライゼーションのための基礎知識>と実際に<D3.jsハンズオンセミナー>をセットにしたワークショップを開催します。
講師は、日経新聞編集局のエンジニア清水正行さん。数年前から個人活動として多くのデータビジュアルをD3.jsによって作成し発表も行ってきました。今回、DVVXの活動において<プログラム>のメンターとしてワークを行っていただきます。
こんな人におすすめ
- 情報デザインに挑戦したいエンジニア
- 多量のデータを共有し積極的に活用してみたい人
- Webサイトでデータプレゼンテーションしてみたい人
- データとデザインの関係に関心がある人
※様々な角度からデータを見せるための基礎を学びます。
※ビジュアルデザインをプログラミングによってに生成する方法を学びます。
※プログラミングのスキルは問いませんがJavaScriptを理解してるとスムーズです。
※ノンプログラマーのメンバーも大歓迎。少し難しいですが原理の理解まで学びましょう!
DVVX(Data-visualization version X)とは?
データビジュアライゼーションのバージョンXを模索するワークグループです。loftworkの有志による自主勉強会。エンジニア/プログラマーだけでなく、リサーチャー、プロダクトデザイナー、Webクリエイター、グラフィックデザイナー、音楽系クリエイターなど立場やジャンルを越えてWeb上のビジュアル表現を共に学んでいきます。[ 情報共有 > プロトタイプ > シェア> アップデート > オープンソース化 ]のような活動サイクルで共にアップデートを行い、ある程度、カタチになってきたところで、イベントやセミナーの開催も行う予定です。
https://dvvx.connpass.com/
https://www.facebook.com/groups/1407443752639270/
扱う分野 D3.js/JavaScript/html/css/ビッグデータの編集/デザイン思考プローチ/Leaflet.js (Esri Leaflet)
過去の実績:2017.04開催キックオフミートアップ:システムエンジニア、リサーチャー、大学教員、クリエイティブディレクターが参加。「未知の可視化」「解析方法」「適用領域の再定義」「IoT」などがトピックにあがり何に興味があるかの議論を行いました。
Speaker
日本経済新聞社
清水 正行
日経新聞社所属。高崎・東京間を毎日新幹線で行き来する出稼ぎエンジニア。ブログではGIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて執筆。個人サイトは多くのデータビジュアライズ作品を発信するGUNMA GIS GEEK:https://shimz.me/blog/。
bl.ocks.orgに投稿した作品。D3.jsで作成した視覚化サンプルhttp://bl.ocks.org/shimizu
詳細を見る
日経新聞社所属。高崎・東京間を毎日新幹線で行き来する出稼ぎエンジニア。ブログではGIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて執筆。個人サイトは多くのデータビジュアライズ作品を発信するGUNMA GIS GEEK:https://shimz.me/blog/。bl.ocks.orgに投稿した作品。D3.jsで作成した視覚化サンプルhttp://bl.ocks.org/shimizu
株式会社ロフトワーク, FabCafe ディレクター
藤田 健介
大学ではグラフィックデザインを学ぶ傍ら、Adobe Flashを入り口にWebの世界にのめり込み、プロバイダーのSEとして就職。約6年間にわたり、CMSの開発や運用、カスタマイズに関わる。その後、元々興味のあった音楽を研究するため、ロンドンとベルリンに数ヶ月滞在。クラブミュージックへの知見を深める。2016年ロフトワーク入社。インフラからフロントまで幅広くこなすテクニカルディレクターとして様々な案件を担当中。
システムをデザインするという視点で、運用や拡張のしやすいCMSサイト設計を目指す一方、「創る力を市民の手に取り戻す」をテーマにファブリケーションやコミュニティの可能性にも関心を持っている。
詳細を見る
大学ではグラフィックデザインを学ぶ傍ら、Adobe Flashを入り口にWebの世界にのめり込み、プロバイダーのSEとして就職。約6年間にわたり、CMSの開発や運用、カスタマイズに関わる。その後、元々興味のあった音楽を研究するため、ロンドンとベルリンに数ヶ月滞在。クラブミュージックへの知見を深める。2016年ロフトワーク入社。インフラからフロントまで幅広くこなすテクニカルディレクターとして様々な案件を担当中。システムをデザインするという視点で、運用や拡張のしやすいCMSサイト設計を目指す一方、「創る力を市民の手に取り戻す」をテーマにファブリケーションやコミュニティの可能性にも関心を持っている。
Program
-
イントロ
-
ワークショップ
- 10:30
- スタート
導入:DVVXの活動とワークの説明 - 10:40
- データビジュアライゼーションとはどんな行為か?
by 藤田健介(ロフトワーク)
- 11:00
- 「D3.js概論」 by 清水正行(日経新聞)
・D3を使った作品/事例
・D3の概要/仕組み
・サンプルコードの触り方
・視覚変数について by 藤田
・ワークの流れ/目指すこと/サンプル配布
・チーム分けとランチタイム(1h)
ワーク1:データのプロット(まずは点を並べて大枠を掴む)
ワーク1:意見交換/方向性検討<チームワーク>
ワーク2:可視化(バリエーション)※できる人は複数
ワーク2:意見交換
ワーク3:ブラッシュアップ&全体共有●ワークショップの際に準備しておいて欲しいこと。
・Google Chromeのインストール
・Servedのインストール
インストールURL
・Chrome https://www.google.co.jp/chrome/index.html
・Served http://enjalot.github.io/served/※PCの貸し出しは行っておりません。各自持参ください。
- 16:00
- 終了
Outline
- 開催日
- 2018年4月14日(土)10:30-16:00
- 会場
- FabCafe MTRL
東京都渋谷区道玄坂1-22-7 道玄坂ピア2F - 参加費
- 3,000円
定員は15名(別途:キャンセル待ち5枠)
※領収書発行可 - 定員
- 20名
ACCESS
ORGANIZER / SPONSOR
OpenCU
株式会社ロフトワークが運営する学びをシェアするためのプラットフォームです。渋谷・道玄坂を中心に、毎月5〜6回のイベントを開催し、現在約7000人のメンバーが登録しています。扱うテーマは、主に「クリエイティブ」「デザイン」領域。クリエイターや有識者によるトークセッション「EVENT」、プロフェッショナルの知見を共有し、体験しながら学びを得る「WORKSHOP」、アイデアをシェアするWebコンテンツ「IDEAS」の3つのコンテンツを提供しています。https://www.opencu.com/
チケット売り切れのためキャンセル待ちチケットを5枠発行します