leestott
c32bb6bc1a
|
4 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 4 weeks ago | |
README.md
意味のあるデータビジュアライゼーションを作る
 |
|---|
| 意味のあるデータビジュアライゼーション - スケッチノート by @nitya |
「データを十分に拷問すれば、何でも白状する」 -- ロナルド・コース
データサイエンティストの基本的なスキルの一つは、質問に答えるのに役立つ意味のあるデータビジュアライゼーションを作成する能力です。データを可視化する前に、前のレッスンで行ったように、データをクリーニングし準備する必要があります。その後、データを最適に提示する方法を決定することができます。
このレッスンでは以下を学びます：
- 適切なチャートタイプの選び方
- 誤解を招くチャートを避ける方法
- 色の使い方
- 読みやすさのためのチャートのスタイリング方法
- アニメーションや3Dチャートソリューションの構築方法
- 創造的なビジュアライゼーションの構築方法
講義前クイズ
適切なチャートタイプを選ぶ
前のレッスンでは、MatplotlibやSeabornを使ってさまざまな興味深いデータビジュアライゼーションを作成する実験をしました。一般的に、以下の表を使って質問に応じた適切なチャートタイプを選ぶことができます：
| 必要なこと | 使用すべきチャートタイプ |
|---|---|
| 時間経過によるデータの傾向を示す | 折れ線グラフ |
| カテゴリーを比較する | 棒グラフ、円グラフ |
| 合計を比較する | 円グラフ、積み上げ棒グラフ |
| 関係性を示す | 散布図、折れ線グラフ、ファセット、二重折れ線グラフ |
| 分布を示す | 散布図、ヒストグラム、箱ひげ図 |
| 比率を示す | 円グラフ、ドーナツグラフ、ワッフルチャート |
✅ データの構成によっては、特定のチャートをサポートするためにテキストデータを数値データに変換する必要がある場合があります。
誤解を招くチャートを避ける
データサイエンティストが適切なチャートを選んだとしても、データを誤解を招く形で表示する方法はたくさんあります。これにより、データそのものを損なうことがあります。誤解を招くチャートやインフォグラフィックの例は数多く存在します！
🎥 上の画像をクリックすると、誤解を招くチャートについてのカンファレンストークを見ることができます
このチャートはX軸を逆転させ、日付に基づいて真実の反対を示しています：
このチャートはさらに誤解を招きます。目は右側に引き寄せられ、時間の経過とともにCOVIDの症例が減少していると結論付けます。しかし、日付をよく見ると、誤解を招く下降傾向を示すために日付が並べ替えられていることがわかります。
この悪名高い例では、色と反転したY軸を使用して誤解を招きます。銃に優しい法律の施行後に銃による死亡が急増したのではなく、目は逆の結論を導くように欺かれます：
この奇妙なチャートは、比率を操作することで笑える効果を生み出しています：
比較できないものを比較するのも、もう一つの不正な手法です。素晴らしいウェブサイトでは、「スプリアスな相関関係」を示す「事実」を集めています。例えば、メイン州の離婚率とマーガリンの消費量などです。Redditのグループでは、データの醜い使い方を収集しています。
目が誤解を招くチャートに簡単に欺かれる可能性があることを理解することが重要です。データサイエンティストの意図が良くても、例えば多すぎるカテゴリーを示す円グラフのような悪いタイプのチャートを選ぶと、誤解を招く可能性があります。
色
上記の「フロリダ銃暴力」のチャートでは、色がチャートに追加の意味を与える方法を示しています。特に、ggplot2やRColorBrewerのようなライブラリを使用して設計されていないチャートでは、これらのライブラリにはさまざまな検証済みのカラーパレットが含まれています。手作業でチャートを作成する場合は、色彩理論を少し学んでみてください。
✅ チャートを設計する際には、アクセシビリティが重要な側面であることを認識してください。ユーザーの中には色覚異常の方もいるかもしれません。視覚障害のあるユーザーにとってもチャートが適切に表示されるか確認してください。
チャートの色を選ぶ際には注意が必要です。色は意図しない意味を伝える可能性があります。上記の「身長」チャートの「ピンクの女性」は、明らかに「女性的」という意味を伝え、チャート自体の奇妙さをさらに強調しています。
色の意味は地域によって異なる場合があり、色の濃淡によって意味が変わることがあります。一般的に、色の意味は以下の通りです：
| 色 | 意味 |
|---|---|
| 赤 | 力 |
| 青 | 信頼、忠誠 |
| 黄色 | 幸せ、注意 |
| 緑 | 環境、幸運、嫉妬 |
| 紫 | 幸せ |
| オレンジ | 活気 |
カスタムカラーでチャートを作成する場合は、チャートがアクセシブルであり、選んだ色が伝えたい意味と一致していることを確認してください。
読みやすさのためのチャートのスタイリング
チャートは読みやすくなければ意味がありません！チャートの幅と高さをデータに合わせてスケールするようにスタイリングすることを検討してください。例えば、50州すべてを表示する必要がある場合は、可能であればY軸に縦に表示し、横スクロールのチャートを避けてください。
軸にラベルを付け、必要に応じて凡例を提供し、データの理解を深めるためにツールチップを提供してください。
データがX軸でテキストとして長い場合は、テキストを角度をつけて表示することで読みやすさを向上させることができます。plot3Dは、データが対応している場合に3Dプロットを提供します。洗練されたデータビジュアライゼーションを作成することができます。
アニメーションと3Dチャート表示
今日の最高のデータビジュアライゼーションの中には、アニメーション化されたものがあります。Shirley WuはD3を使った素晴らしい例を持っています。例えば、'film flowers'では、各花が映画のビジュアライゼーションを表しています。別の例として、Guardianの「bussed out」は、NYCがホームレス問題に対処する方法を示すスクロール型の記事形式で、GreensockとD3を組み合わせたインタラクティブな体験を提供しています。
「Bussed Out: How America Moves its Homeless」 - Guardian。ビジュアライゼーション：Nadieh Bremer & Shirley Wu
このレッスンでは、これらの強力なビジュアライゼーションライブラリを深く学ぶことはできませんが、D3を使ったVue.jsアプリで「危険な関係」という本をアニメーション化されたソーシャルネットワークとして表示するビジュアライゼーションを試してみてください。
「Les Liaisons Dangereuses」は書簡形式の小説で、手紙のシリーズとして提示されます。1782年にChoderlos de Laclosによって書かれたこの小説は、18世紀後半のフランス貴族の2人の主人公、Vicomte de ValmontとMarquise de Merteuilの悪意ある社会的操作を描いています。両者は最終的に破滅しますが、社会的な損害を大きく与えます。この小説は、復讐を企てたり単に問題を起こしたりするために、彼らの周囲の人々に送られた手紙のシリーズとして展開されます。これらの手紙をビジュアライゼーション化して、物語の主要な中心人物を視覚的に発見してください。
このソーシャルネットワークのアニメーション表示を行うウェブアプリを完成させます。このアプリは、Vue.jsとD3を使用してネットワークのビジュアルを作成するために構築されたライブラリを使用します。アプリが実行されると、画面上でノードを引っ張ってデータをシャッフルすることができます。
プロジェクト: D3.jsを使ってネットワークを表示するチャートを作成する
このレッスンフォルダには、完成したプロジェクトを参照できる
solutionフォルダが含まれています。
-
スターターフォルダのルートにあるREADME.mdファイルの指示に従ってください。プロジェクトの依存関係をインストールする前に、マシンでNPMとNode.jsが動作していることを確認してください。
-
starter/srcフォルダを開きます。そこには、すべての手紙が番号付きで「宛先」と「送信者」の注釈が付いた.jsonファイルが含まれているassetsフォルダがあります。 -
components/Nodes.vueのコードを完成させてビジュアライゼーションを有効にします。createLinks()というメソッドを探し、以下のネストされたループを追加してください。
.jsonオブジェクトをループして手紙の「宛先」と「送信者」のデータを取得し、ビジュアライゼーションライブラリが消費できるlinksオブジェクトを構築します：
//loop through letters
let f = 0;
let t = 0;
for (var i = 0; i < letters.length; i++) {
for (var j = 0; j < characters.length; j++) {
if (characters[j] == letters[i].from) {
f = j;
}
if (characters[j] == letters[i].to) {
t = j;
}
}
this.links.push({ sid: f, tid: t });
}
ターミナルからアプリを実行（npm run serve）し、ビジュアライゼーションを楽しんでください！
🚀 チャレンジ
インターネットを巡って誤解を招くビジュアライゼーションを探してみましょう。作者はどのようにユーザーを欺いているのか、それは意図的なのか？ビジュアライゼーションを修正して、正しい表示方法を示してみてください。
講義後クイズ
復習と自己学習
以下の記事を読んで、誤解を招くデータビジュアライゼーションについて学びましょう：
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
歴史的な資産やアーティファクトに関する興味深いビジュアライゼーションを見てみましょう：
アニメーションがビジュアライゼーションをどのように向上させるかについての記事を見てみましょう：
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
課題
免責事項:
この文書は、AI翻訳サービス Co-op Translator を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は責任を負いません。