Webサイトの1つのグラフに3つのデータを表示するより良い方法


7

最も古い答えは、この最後の編集の前に私のグラフを参照していたことに注意してください。それは素晴らしい答えでした、私の編集のためにそれを割引しないでください。

私が行った調査の量と、週ごとに完了したページの数を、日ごとに分割して表示したいと考えています。以下のように実行しました。 ここに画像の説明を入力してください

グラフを理解できないと言われたことがありますが、それ以外にどのように表示できるのかわかりません。

これらをより明確に表示するにはどうすればよいですか?


それらを独立した折れ線グラフの束として表示することもできましたが、12週間後にはばらばらに乱雑に見えます。

その場合、あなたはグループに分割できますAll timeMonthWeekここには、拡大できるrepチャートがあります。チャートの上にあるリンクをクリックすると、グラフにさらに深く入ることができるなど、他の方法もあります。ある種のグラフィカルチャートを提供するサービス、そしておそらくチャートスクリプト/プラグインを提供するサービスを調べて、それらが提供するものを確認することができます。例:nvd3
Joonas

1
これは私にはかなり簡単に思えます。多分あなたの友人はグラフを読むことができません。:)
Lauren-Clear-Monica-Ipsum 2014

@LaurenIpsum私はそれを考慮しました;)。

回答:


2

さて、私はIllustratorでこれを試してみましたが、このプロセスを自動化する方法がわからず、手作業でやりました。私は1日と1週間あたりのページを見て、次のグラフにたどり着きました。

1週間あたり1日あたりのページ数

基本的に、週の合計ページ数を示すバーの上にオーバーレイされた、曜日ごとの進捗状況を示すミニチャート。

同様の方法で時間を視覚化し始めました。1時間の完全な円と30時間の学習の半円を使用しました。

おそらく、1日あたりの学習時間をページのバーの上に置き、同じ色分けを保つかどうかを決めます。あなたはそれを試してみて、何が一番良かったかを見なければなりません。各バーの上に小さな数を配置する余地もあります。


3

まず、混乱を招く理由を診断します。

  • さまざまなメッセージが互いに競合しています。最初に、視聴者は第1週が第2週よりもはるかに生産的であることに気づきます-これは最も目を引くメッセージです。次に、第1週には第2週よりも多くの日があったため、これはあまり意味がないことに気付きました。
  • 次に、個々の日を見て、順序が混乱します。ほとんどの「時間経過」のデータグラフィックには、日数が等間隔で整然としています。ここでは、ほとんどの日が上から下に移動することを理解する前に、キーをいくつかの色で調べる必要があります。それから、2週目が異なるように見えるのは混乱しています(土曜日、日曜日、金曜日?週が別の日に始まるのはなぜですか?)
  • 次に、特定の日をチェックするために、キーとチャートの間で大量の跳ね返りがあります。

したがって、おそらく、理想的なソリューションでは、次のようになります。

  • 時間の経過とともに進行状況を追跡するのは簡単で直感的で、
  • 生産的な日とそうでない日を見つけやすい
  • まだ行われていない日や何らかの理由で作業が行われなかった日によって歪められることなく、作業の大部分が行われた週がわかりやすい

かなり単純なデータのミニセットがたくさんある場合に本当に良いテクニックは、すべて同じスケールの小さなグラフのグリッドです。これは「スモールマルチプル」と呼ばれることもあります。それぞれが独立して機能し、セット全体を簡単にスキャンして、パターンと全体的な傾向を確認できます。

これは非常に簡単な簡単な例(タイトルが必要)で、すぐに確認できます。

  • 彼らはプロジェクトの最後の2週間で作業率を上げました、
  • 彼らはほとんどの週をよく始めて、金曜日に追いつくために一生懸命働く前に集中力を失います
  • 彼らは第4週のほとんどを離れていましたが、週末に追いつくために懸命に働きました

ここに画像の説明を入力してください

線で塗りつぶした領域を優先して、毎週のボリュームを簡単かつ直感的に把握できるようにします。

列も機能します。特定の日を検索するのがやや明確で簡単ですが、ボリュームと方向の直感的な感覚が少し少なく、一見するとより忙しく見えます。

ここに画像の説明を入力してください


とても良い答えです。これで何ができるかわかります。どうもありがとうございました。

好奇心から、あなたのサンプルデータはどこから来ましたか?

私はそれを作りました:)
user56reinstatemonica8

ああ、とても素敵です:)

どんなソフトウェア?エクセル?

2

回答をいくつかの部分に分けます。

I.リーダーのタイプ

グラフを使用する人には3つのタイプがあります。

a)グラフを読むことができる人。

b)グラフがほとんど読めないもの。

c)非常に具体的な情報を探している人。

私は第一種については気にしません。どんな醜いグラフでも十分です。

タイプbの場合、多くの労力、インタラクティブなグラフ、さまざまなアプローチを示すいくつかのグラフ(日別、週別、常時、日別、週別)移動グラフ、漫画...

しかし、ほとんどの場合のアプローチは、ユーザーが非常に具体的なデータを表示する必要があると考えることです。

読者がどんな種類のデータを探しているか知っている思います

グラフで最も重要なことは、1週間の全体的な学習時間と、各週の成績です。それが必要な場合、このタイプのグラフは問題ありません。

残りのデータはグラフでは重要ではありません。

II。ビジュアル情報

さて、あなたが正しいタイプのグラフとアプローチを選択したと仮定しているので、これはグラフィックデザインサイトなので、グラフを分析します。

画像の分析

表示されるデータ

1)地球上の誰も、そのように多くの小数点で時間を読みません。「4.1582時間勉強しました... !!」小数を1に減らします。

excellテーブルでそれらを削除することにより、意味のないすべての0を削除します。

2)バーで日が上がる場合(月曜日が一番下、日曜日が一番上)、カラーデイテーブルで読むとき、読者の脳は矛盾する次元の間をジャンプする必要があります。左から右は、実際には下から上です。あなたのカラーデイテーブルをバーと同じ垂直次元に置きます。

3)同じ情報を繰り返さないでください。このタイトルは、グラフのタイトルと同じです。

4)週、週、週、週、週を繰り返さないでください...

スタイル

3-4)このタイトルを読みやすくし、より良いフォントサイズを使用します。グラフの目的は、すべての情報を一目で確認することです。

5)チャートの全体的な比率と間隔(列の間)は、データが多すぎるという感覚を与えます。より快適にしてください。

6)月曜日と月曜日を結ぶ、この小さな線のような視覚補助を与えることができます。

7)全体的な視覚スタイルをより快適にします。情報は同じでもかまいませんが、より興味深い方法で提示された場合、観察者は情報を詳しく調べようとします。

追加のヒント:

合計時間のデータを列の上部に配置する方法が見つかりませんでした。おそらくそれは便利です。

日の横にある色の四角形のサイズを大きくする方法が見つかりませんでした。それは読みやすいでしょう。


0

ライブギャップチャートをここに画像の説明を入力してください 使用したこの編集のように、積み上げ横棒で表示する方が良いと思います


本当によさそうだ。好奇心から、あなたは開発者ですか?

はい、livegapチャート(charts.livegap.com)とlivegapエディター(editor.livegap.com)は私のWebアプリです
Omar Sedki

非常に興味深い、おかげで、私は明日、より良い外観を持つことになります
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.