問題を解決するための進化的アプローチは、データの視覚化に最適です。 単純なものから複雑なものへ、1次元データから反復後の多次元反復へと分けます。 この記事では、最も単純な1次元から非標準の自家製多次元まで、円グラフのさまざまなオプションを検討します。 D3.jsをツールとして使用します。 私は猫の下で興味があるすべての人に尋ねます。
注：ロシア語の括弧内の用語には英語版が表示されます。
円グラフ
円形、円形、または放射状の棒グラフは、古典的な棒グラフのテーマのバリエーションです。
横軸（X）としての円と座標グリッドとしての同心円。これらは、通常の棒グラフとは異なり、このタイプのグラフの特徴です。 すべて次のようになります。
注意点が1つあります。つまり、使用するスケールはどれですか。 事実、中心から遠くなるほど、外部アークの長さ（ C =2πR ）とセクターの面積（ S〜πR2 ）が大きくなります。 したがって、列の異なる視覚的重みを補正するか、グリッドの規則性を維持するために、より重要なものを決定する必要があります。
最初のオプションでは、Mike Bostockによって提案されたスケールを使用できます。
(function(global, factory) { typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("d3-scale")) : typeof define === "function" && define.amd ? define(["exports", "d3-scale"], factory) : (factory(global.d3 = global.d3 || {}, global.d3)); }(this, function(exports, d3Scale) { 'use strict'; function square(x) { return x * x; } function radial() { var linear = d3Scale.scaleLinear(); function scale(x) { return Math.sqrt(linear(x)); } scale.domain = function(_) { return arguments.length ? (linear.domain(_), scale) : linear.domain(); }; scale.nice = function(count) { return (linear.nice(count), scale); }; scale.range = function(_) { return arguments.length ? (linear.range(_.map(square)), scale) : linear.range().map(Math.sqrt); }; scale.ticks = linear.ticks; scale.tickFormat = linear.tickFormat; return scale; } exports.scaleRadial = radial; Object.defineProperty(exports, '__esModule', {value: true}); }));
通常のグリッドの場合、標準の線形スケール（ d3.scaleLinear()
）を使用します。 例で使用しました。
問題の声明
しばらく前に、私はモスクワ運輸省のユニットの代表者と話をする機会があり、モスクワ環状道路の交通事故データを視覚化するタスクについて考えることを提案しました。 事故の場所と時間、および道路区間の制限速度に関するデータがあると想定されました。 速度モードと事故数の間に関係があるかどうかを確認する必要がありました。 空間的および時間的パターンを見つけます（存在する場合）。 最初の問題は、散布図と回帰を使用して解決されます。 2番目の方法はより創造的であり、私たちはそれを行うためにここにいます。
はい、データは提供されませんでしたので、いくつかのスケッチや議論を超えたものにはなりませんでした。
以下、レポート期間中のモスクワ環状道路での「仮説的な」（ランダムな）事故数を表示します。 横軸はキロメートルのカットオフに分割され、それに応じて回転します。 視覚化の主な目的は、潜在的な空間的および時間的な異常またはパターンを見つけることです。 はい、道路の「トポロジー」、つまりループバックを維持する必要があります。 それは美しく、この場合は非常に論理的です。
2つの変数が一挙に
モスクワ環状道路の交通は双方向なので、統計を一度に2方向に表示する必要があります。 これはさまざまな方法で行うことができますが、より詳細に検討してください。 すべてのグラフはクリック可能で、 bl.ocks.orgのソースにつながります。 図の各バージョンには、読みやすさに関する解説が付いています*。 グラフの欠点のいくつかは、インタラクティブを使用して中和できます。さまざまなホバー効果、フォーカスなどです。しかし、ここではグラフの可能性を静的な画像としてのみ考えます。
*グラフの可読性-グラフに表示される情報の知覚の速度と完全性を決定する一連のグラフプロパティ。
グループ化されたパイ棒グラフ
おそらく最初に頭に浮かぶのは、インジケーターをグループ化することです。
読みやすさ：
列全体が比較しやすいため、全体像の評価は非常に困難ですが、2つの傾向を一度に評価することは困難です。
2つの円グラフ
宇宙の道路とデータを壊してみましょう。
読みやすさ：
グラフは2つだけです。 トレンドは簡単に追跡できます。 ペアワイズ比較も機能しますが、さらに悪いことです。 片方が治り、もう片方が不自由になります。
円グラフ
繰り返しますが、累積チャートの形でインジケーターを組み合わせてみてください。
累積図の変形は非常に可能です。 しかし、累積チャートはそう呼ばれる無駄ではありません。インディケーター全体とそのコンポーネントを同時に見ることが重要である場合、それらは良いです。 状況は少し異なります。 また、このタイプのグラフは多数の列では機能しませんが、多くの列があります。 美しい「フェンス」のある写真を取得します。
読みやすさ：
ペアワイズ比較があり、合計値は（必須ではありませんが）、初期レベルが異なるため、2番目のインジケーターの傾向を追跡することは非常に困難です。
パイ累積発散棒グラフ
負の値を持つオプション累積グラフ。 それらはありませんが、ここでは列に共通の基盤があることが重要です。 いずれかの列の符号を変更してから、オフセット付きの累積図を作成します： stack.offset（[offset]） 。 d3.stackOffsetDivergingをオフセット関数として渡します。
読みやすさ：
ペアワイズ比較です。 外部の傾向は見えますが、内部の傾向も見えますが、もっと悪いです。 写真は全体として今ではそこにありますが、まだはっきりとは見えません。
円グラフの反対側の棒グラフ
著者の名前とスケジュール自体（私は開拓者ではないかもしれませんが、見た目が悪いだけです）。 ここで、以前のバージョンのグラフを反転させることにしました。 これが起こったことです。
このチャートは、ゲシュタルトの原理に基づいています。
閉鎖の原則について：私たちの目は「開いた」数字を閉じようとしています。
原則として、背景図。
一方では、数字の小さい方がメイングラフとして認識され、他方では、凸グラフが凹グラフよりも優先されます。 これは不安定性を生み出しますが、色のためにそれを制御できます。
コードの観点から見ると、固有シフト関数の主な違いは、この場合、次のようになります。
function stackOffsetOpposing(series, order) { // Check if no staks (amount of series < 1) if (!((n = series.length) > 1)) return; // find max sum var stackSums = []; var stackMaxes = []; for (var i = 0, n = series.length; i < n; i++) { var stackMax = d3.max(series[i], function(d) { return Math.abs(d[1] - d[0])}); stackMaxes.push(stackMax); } var max = d3.sum(stackMaxes); // Redifining baselines for (var i, j = 0, d, dy, yp, yn, n, m = series[order[0]].length; j < m; ++j) { for (yp = 0, yn = max, i = 0; i < n; ++i) { if ((dy = (d = series[order[i]][j])[1] - d[0]) >= 0) { //d[0] -bottom; d[1] -top d[0] = yp, d[1] = yp += dy; } else if (dy < 0) { d[1] = yn; yn += dy; d[0] = yn; } else { d[0] = yp; } } } }
読みやすさ：
ペアワイズ比較です。 両方の傾向が見られます。 全体像があります。
はい、グラフは累積されたままなので、サブカテゴリを追加できます。
利点：
- 逆位相ではっきり見えるデータ
- 遠くを見る必要はありません、コンテキストは失われません
- 両方の傾向が見える
- 「空の」チャートによる全体像
一時的なリング
木の年輪と同様に、異なるレポート期間のデータを含む輪を追加できます。 主なことは、無理をせず、リングの適切な幅を選択することです。 このように見えるかもしれません。
私の意見では、画面上に大きなフォーマットで印刷するための良いオプションは、かなり重いようです。
おわりに
円グラフのさまざまなオプション、その長所と短所を調べました。 このクラスの図は読みやすさの点では最高とは言えませんが、視覚的な魅力の点では優れています。 したがって、有用な情報を抽出する速度よりも「見る人」の注意を引くことが重要である場合、このオプションは有効です。 上記の例が実際の作業で役立つことを願っています。 はい、JSコードは最新の標準を満たしていませんが、明確にする必要があります。 いずれにせよ、これらは単なる例であり、実際の視覚化のための空白です。
そして最後に
実際のデータがある場合、インタラクティブな追加、フィルタリングの固定などが可能になります。そして、そうではなく、記事はトレーニング中なので、これについて詳しく見ていきましょう。 しかし、誰か（DPC、Yandex？）が突然、実際のデータを含むサンプルを提供した場合、研究は継続できます。
どのようなスケジュールをお勧めしますか？ コメントに独自のオプションを書いてください=）