反応とD 3:ダイナミックCOVID‐19可視化(第1部:世界地図)

科学教師として、私はデータ視覚化が好きです.私はどのように強力な可視化は、アート、科学、数学、人文科学の物語を伝えるためにフィールドを組み合わせた愛、私は視覚化のインタラクティブと探索的な側面が大好きです.しかし、多くの視覚化において、デザイナーは表示するデータについての決定のすべて/ほとんどを作ります、そして、特定の視点から特定の物語を伝えるためにそれを表示する方法.
しかし、教師として、私は、ユーザーが自分の質問によって導かれた、これらの選択肢自体の多くを行うことができます視覚化を好む、答えとさらなる問い合わせを求めて.私はデータの可視化を作成する私の旅を開始したので、私は、私はユーザー入力に基づいてデータをレンダリングするものを作る必要があることを知っていた、それは進行中の私の現在のプロジェクトのためのコンセプトをスパークし、COVID - 19世界トラッカー.

まず、check out a quick video demoとプロジェクトの迅速なツアーのためにREADME.md fileを通じてスキム.

ユーザ相互作用目標の設計と計画

私のデザインの選択はこの指導的な質問を中心にしていました.

How can I display data and options that will allow the user to generate open-ended questions and freely investigate those questions to better understand the COVID-19 outbreak?

私の目標は、ユーザーが簡単に世界規模でcovid - 19のアウトブレークを探索し、比較することができるシンプルなプラットフォームを開発するために、リアルタイムのグローバルデータを使用して、アウトブレイク全体の歴史的なデータを見て.アプリの地図可視化部分は、現在のケースデータの迅速な分析を可能にし、ユーザーがケース番号、ケースの重症度の間の可能な相関関係を探索することができますどのようにデータが全体の人口が考慮されるときに見える.アプリの棒グラフの部分は、ユーザーが比較のための国の“コレクション”を選択して、国の最初の報告されたケースからのアウトブレイクの進化を比較することができます.アプリの2つの半分が一緒に動作します-理想的には、グローバルマップの探査の後、ユーザーは深い掘ると、地図で見たものに基づいて特定の国を比較する好奇心旺盛されます.
このポストの残りは、私がどのように反応を結合したかについて説明します.D 3によるJSユーザインタフェースJSは、この目標を達成するために、ユーザーが彼らが探索するデータの制御の詳細、彼らが尋ねる質問、および彼らが離れて歩く理解をすることができます.このポストは、マップの可視化に焦点を当てながら、私の次のポストは、棒グラフに焦点を当てます.

世界地図可視化を用いた実時間グローバルデータの探索

利用可能なデータ

Novel COVID API号から地図データを取得した.私はこのAPIを選んだので、様々な評判の源からデータを引き出し、あらゆる国の一貫した現在のデータを含んでいます.以下はアフガニスタンのデータエントリの例です.

利用可能なデータに基づくオプションの作成

最初に、このデータは、mapinputコンポーネント( response . js )でuseAffect ()フックを使用して取得します.

私はMapInputコンポーネントの一連のユーザー入力ボタンを整理するためにデータポイント(ケース、死、人口など)の各々のためにキーを使用しました.コンポーネントは、クリックしたときに、ユーザーがマップ上に表示したい特定のデータに関連する引数を使用してDisplayMapDataa ()関数(D 3 . js)を呼び出します.例えば、

<button 
    onClick={event => DisplayMapData(event.target.value, event.target.innerText, countryResults)} 
    className="cases block" 
    value="cases">
        Total Cases
</button>

CSSのボタンスタイリングとブートストラップの行colカードの書式設定の少しで、私はオプションの左側サイドバーを作成しました.

ユーザが選択したデータを視覚化する

ここから、DisplayMapData(casetType、casetitle、data)関数は、データオブジェクト内のcountryInfoオブジェクトによって提供される各国の地理座標を使用して、地図上の選択されたデータだけをプロットするためにユーザー入力(casetype)でデータを解析するために渡された引数を使用します.この関数は、最初に最後の選択(国円、凡例、およびタイトル)に関連するデータを削除し、最新情報を選択したcaseTypeの情報をレンダリングします.
You can view the code for the DisplayMapData() function in my repository

追加のインタラクティブ機能の追加

最後に、私はユーザーがさらに地図とデータを探索することができるように追加の相互作用に組み込まれています.これには:

ズームとパンビューマップ

国の境界を強調して、国名を表示する

各々のデータ円の上にホバリングしているときに、国のデータを表示している

棒グラフ可視化を用いた国固有の歴史データの比較

このポストのパート2には、アプリのバーチャートの部分を記述して目を離さない.

最後の思考

初心者プログラマとして、このプロジェクトは、私が劇的にこの2週間で設定された私のスキルを設定することを余儀なくされている.私はD 3について学ぶためにたくさん持っている.js私は、常に複雑なデータセットで視覚化の異なるタイプを作る練習を続けるつもりです、その一方で、ユーザーの経験と私のデザインの最前線での自己誘導の質問の機会を常に保ちます.
このプロジェクトは決して完全でありません、そして、私は数週でライブプロジェクトへのリンクを共有します.一方で、どのようにプロジェクトが進化を確認するために私の毎週更新のための目を離さない.
そして、あなたがそれをこれまでにしたならば-読書をありがとう!
以下のコメントを残してください.

どのようなユーザーエクスペリエンスは、このような視覚化で見たいですか?

追加の機能や相互作用を追加する必要がありますか?

この方法で探索したい他のCOVID - 19データですか?