9

量的情報の視覚的表示の中で、Edward Tufte は非常に最小限のタイプのチャートを表す「slopegraph」という用語を作り出しました (詳細情報)。正式な例は次のようになります。

傾きグラフの例

野生のd3.jsには、slopegraph の少なくとも 2 つの実装があります。

私はより宣言的な実装を試み、また両方の列の値が 100% 一致するようにしましたが、うまくいきませんでした。予想どおり、類似または同じ値を持つアイテムがデータセットに表示されると、グラフィックが重なり、チャートが判読できなくなります。

単純なバージョン( source ) はlinearスケールを使用して水平位置を計算しますが、位置を「正規化」しようとする試み( source ) はordinalスケールを使用します。

重なり合うアイテムの座標に基づいてオフセットを計算する順序スケールを使用すると、より良い結果が得られると思います。両方の列のオフセットを別々に計算する必要がありますか?データに基づいて事前に計算する必要がありますか?それとも、属性の設定中にオンザフライで計算する必要がありますか? 同じ値を持つアイテムが互いの下に配置され、他のアイテムがそれに応じて調整され、両方の列の値が同じ水平位置に留まるように、コードベースを拡張するにはどうすればよいでしょうか?

4

3 に答える 3

5

よく書かれた質問と、デバッグステートメント、小道具を含む素敵な開始コード!

私が考えたすべてのことをコーディングすることはできませんでしたが、少なくとも議論のために、ここに行きます。(コーディングは簡単ですが、何をコーディングするか/これがどのように見えるべきかを考えるのは難しいです。)

  1. [最適化されていない] バージョンでは、リニア スケールをガイドとして使用しますが、後続のすべてのエントリを下にシフトすることにより、重複するエントリのスペースを空けます。(これは事実上 Y 軸を引き伸ばすだけだと思います。残念ながら、これにより非常に背の高い画像になります。2008 年と 2009 年のように近い年を比較してみてください。画像はそれほど引き伸ばされていません。) http://bl.ocks.org/2547496 (要旨）

  2. 序数スケールにも同じ方法が適用されます。スケール版は斜面を通して絶対的な情報を伝えようとしないlinearので、私はスケール版を好みます。ordinalただし、これにより、よりコンパクトなイメージになります。http://bl.ocks.org/2573074 (要旨)

  3. 近い値をグループ化します。（興味があれば実装します。）

例 1 と例 2 はどちらも不完全な実装であることに注意してください。どちらかがあなたが探しているものなら、私はそれらを修正できます。

于 2012-04-30T02:45:57.620 に答える
4

ジェフクラークからの別の例を共有したかっただけです：

http://neoformix.com/Projects/ObesitySlope/

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

彼はProcessingを使用しましたが、上記の問題のいくつかを非常に優雅に処理します（正規化された変数を使用すると、少し単純化されたと主張することもできます）

  1. 拡張集計を使用して視覚化を簡素化し、データポイントの初期数を減らします。
  2. 主に各ポイントの勾配の片側にラベルを付けます
  3. ホバーされるまで、近くの/重なっているポイントのラベルを非表示にします（その時点で、最初のラベルは一時的に消えます）

全体として、ジェフはこれで素晴らしい仕事をしました。彼は細部に非常に注意を払っていると思います。D3で同様の例を見たいと思います！

于 2013-03-01T21:22:23.383 に答える
3

ごちゃごちゃしたテキストラベルの問題に対処するために、最初の例を少しいじっていましたが、それがどれほど役立つかはわかりませんが、議論に追加される場合に備えて、共有すると思いました..

私の最初の試みは、ホバーされたデータ ポイントのテキスト ラベルを囲むテキストをフェードすることでした。これは、現在選択されているラベルの境界ボックスに重なるテキスト ラベルを選択し、ほぼゼロの不透明度に移行するだけです: http://bl.ocks .org/2554902

次に、テキスト ラベルをコンパクトな方法で配置して、それぞれを表示できるようにしようとしましたが、ビジュアライゼーションの境界を拡張しすぎているように見えたため、実装を完了しませんでした (現在もそうではありません)。年を変更する場合はうまく機能します..)、しかし、「コンパクト」なデータが少し少ない場合は、次のようなものを検討する価値があるかもしれません: http://bl.ocks.org/2554910

編集：これらはFirefoxで意図したとおりに機能しないようです.getBBox（）の問題のようです..

于 2012-04-30T02:22:11.187 に答える