web-dev-qa-db-ja.com

Google Analyticsビジターフローのようなグラフ/図を生成する方法は？

最近のGoogleAnalyticsの「VisitorFlow」で提示されたものと同様の図を生成しようとしています。これらは 沖積図 としても知られています。

自分で実行できる限り、Webまたは非Webベースのソリューションを使用できます。

視覚化したいデータは次のとおりです。

  • 時間t1で、私はx1ユニットを持ち、n1個の部分に分割されています
  • 時間t2で、n1個のパーツがx2個のユニットでn2個のパーツに分割（またはマージ）されます
    • 分割/マージが行われている場所を示したいと思います。

私のデータは現在 NetworkX のDiGraphで表されていますが、必要な任意の形式でデータを出力できるため、これは関係ない可能性があります。

Similar to the diagram below

pythonvisualizationgraphvizd3.js
41
pocketfullofcheese

これは興味深い質問だと思ったので、d3を使用して沖積図の例を作成しました： http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html

そして、d3はアニメーションがとても上手で、見た目もかっこいいと思ったので、アニメーション版も作成しました： http://nickrabinowitz.com/projects/d3/alluvial/alluvial-dynamic.html

それはあなたが望むかもしれないすべてをカバーしているわけではありませんが、うまくいけばそれはいくつかの基礎を提供するでしょう。最初のコードの大きなブロックは、偽のデータを作成するだけです。これを実際のデータに置き換えるか、d3.jsonを使用してロードできます。予想される形式は、d3がネットワークグラフに期待するDOMノード構造に似ています。

{
    // list of time slots t1 through tn
    times: [
        // list of t1 nodes
        [
            {
                nodeName: "Node 1",
                id: 1,
                nodeValue: 24332
            },
            // etc ...
        ],
        // etc ...
    ],
    // list of all links
    links: [
        {
            source: 1, // id of source node
            target: 5, // id of target node
            value: 3243
        },
        // ... etc
    ]
}

これがお役に立てば幸いです。これは一般的なSOの応答ではなく、ニーズに合わせてカスタマイズするにはある程度の作業が必要になる可能性がありますが、役立つと思いました。

59
nrabinowitz