Brief
Design an interactive data visualization app based on the data of Chico State graphic design alumni collected through social media such as LinkedIn.
LinkedInなどのソーシャルメディアを用いて収集した、カリフォルニア州立大学のデザインプログラムからの卒業生の就業状況をまとめたデータを視覚化したインタラクティブアプリケーションをデザインするプロジェクトでした。
LinkedInなどのソーシャルメディアを用いて収集した、カリフォルニア州立大学のデザインプログラムからの卒業生の就業状況をまとめたデータを視覚化したインタラクティブアプリケーションをデザインするプロジェクトでした。
Tools
Brackets/ブラケット
HTML
CSS
D3.js
HTML
CSS
D3.js
Concept
The purpose of this interactive application is to visualize the trend among the alumni: where and in which industry they are employed. The data is categorized and organized according to gender, locations, and industries: print, screen, and tangible.
The user interface was designed with the consistent use of rounded rectangles and circles to create unity. Some primary colors with different values were applied to differentiate between the categories. The legends that explain different categories were integrated as a part of the interface to give users the ability to sort out the information.
このインタラクティブデータビジュアライゼーションの目的は、卒業生の就業状況の傾向を視覚的に理解することにありました。収集されたデータは、性別、場所、デザイン業界ごとに区分され、それを元に実際の視覚化方法とUI設計、プロトタイプの制作をJavaScriptライブラリーのD3を使用し、実行しました。基本的な色とその彩度を使いデータの区別を行い、ユーザーが見たい情報をを見たい組み合わせて比較することができるように設計しました。
Working Demo Hereこのインタラクティブデータビジュアライゼーションの目的は、卒業生の就業状況の傾向を視覚的に理解することにありました。収集されたデータは、性別、場所、デザイン業界ごとに区分され、それを元に実際の視覚化方法とUI設計、プロトタイプの制作をJavaScriptライブラリーのD3を使用し、実行しました。基本的な色とその彩度を使いデータの区別を行い、ユーザーが見たい情報をを見たい組み合わせて比較することができるように設計しました。
Sketches
Categorizing data based on certain attributes was the first step. Then focused on coming up with an easily understandable data visualization.
データをカテゴリ分けし、重要度を振り分けどのようにインターフェース上に配置することができるかをデジタルスケッチで考えました。
データをカテゴリ分けし、重要度を振り分けどのようにインターフェース上に配置することができるかをデジタルスケッチで考えました。
Sketched digitally to figure out more precise user interface for the data visualization.
デジタルスケッチでさらに詳細なレイアウトを考えて行きました。
デジタルスケッチでさらに詳細なレイアウトを考えて行きました。
Prototype
Some of the screens from the working demo created in D3.js. With some technical advice from Frank Armstrong, I was able to create the interactive data visualization.
D3を使用し、実際のプロトタイプを制作しました。フランク・アームストロング教授から技術面でのアドバイスを少しいただきました。
Working Demo HereD3を使用し、実際のプロトタイプを制作しました。フランク・アームストロング教授から技術面でのアドバイスを少しいただきました。