web-dev-qa-db-ja.com

欠落データを日次データフィードの折れ線/棒グラフで表示するためのデザインパターン

アプリに毎日のデータフィード、つまり1日あたり1つの値を表示しています。データは棒グラフまたは折れ線グラフで表示されます。特定の日にデータポイントが欠落している場合は、その日に値が欠落していることをどういうわけか示したいと思います。ここでは、視覚的に非常に煩わしい、または強力ないくつかの初期設計コンセプトを示します。気を散らすことなく、よりエレガントなデザインを目指しています。

enter image description here

enter image description here

(質問の文言が具体的でない場合は、コメントを残してください。改善します。)

7
ted.strauss

現在取り組んでいる分析製品でも同じ問題に直面しています。

私の考え方は

データの存在を表すすべての位置/バーに実線のベースライン(軸)を使用します。以下のモックアップに示すように、データが欠落しているすべての位置に点線のベースラインを使用します。

enter image description here

点線のある軸ラベルを強調表示し、欠損データに関するツールチップ情報を提供します。

これは自然な類推だと思います。実線は存在/存在するものを示し、点線は欠落または仮想のものを示します。

そして、点線はそこにないものを埋めるためのものであることはよく知られています。

6
Chetan

データが欠落している日を表示しないでください。X軸で、日が連続していない場合は3つのドットを追加します。下の画像を参照してください。

enter image description here

3
DesignerAnalyst

私は本 Super Graphic で同様のシナリオを見ました。数年にわたる収入のグラフがありましたが、1年、データは報告されませんでした。

著者はちょうどその年を省いたが、ギャップを示すためにスペースを確保した。グラフを再作成してインタラクティブに作成し、最終製品の外観を確認できるようにしました。 enter image description here

これは、みなさんがこれを検討するための方法の1つです。 http://www.zingchart.com/demos/fictional-fortunes-chart/

2
Merrily

薄い灰色が機能し、テキストは「データなし」、「?」、「NA」などになります。

その部分の関連性を低くしたい場合は、日付テキストを含めてコントラストを減算から垂直スペースを追加し、追加する内容を曲げる必要があることを考慮に入れる必要がありますほかのすべて。

enter image description hereenter image description here

1

省略してください。

データに忠実である。データが欠落している場合(およびスケールがゼロ以外で始まる場合)は省略します。空白は、ギャップを示すことでデータに忠実です。

Tufteは 表形式のデータ と空白について話すとき、その効果について何か言います。申し訳ありませんが、正確な見積もりはわかりません。多分誰かがこれを研究することができます。 $$$、時間、および/または興味がある場合は、彼の book を確認してください。

適切にラベルを付ける

視覚化の非常に重要な側面は、ラベル付けです。ヘルプテキストを使用して、データが不足していることを簡単に説明できます。

...必要なアクションを示さない限り

上部にあるようなアイコンを追加すると、それはアラートのようになり、何らかのアクションを促します。ユーザーが問題を修正する必要がある場合は、プロンプトを追加しても問題ありません。

1
Ken

D3言語の作成者であるMichael Bostockが次のように表示しています: http://bl.ocks.org/mbostock/3035090 ギャップは明らかで自明です。

enter image description here

私もあなた自身の解決策が好きですが、私は三角形を薄い灰色(#f3f3f3または#dddddd)にします。

1
Zoe K