問題タブ [sankey-diagram]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
4 に答える
9466 参照

python - Python のサンキー ダイアグラム

Sankey ダイアグラムを生成するための Python ライブラリはありますか?

このサンキー ダイアグラム アプリケーションとライブラリのリストを見たことがありますが、いずれも Python にはありません。

0 投票する
7 に答える
13386 参照

javascript - JavaScript のサンキー ダイアグラム

Javascriptを使ってサンキーダイアグラムを描きたいです。これに利用できるアルゴリズムまたはライブラリに関して、誰かが指示を与えることができますか?

0 投票する
10 に答える
53528 参照

r - Rのサンキーダイアグラム?

R のサンキー ダイアグラムを使用してデータ フローを視覚化しようとしています。

サンキー ダイアグラムを生成する R スクリプトにリンクしているこのブログ投稿を見つけました。残念ながら、これは非常に未加工で、ある程度制限されています (サンプル コードとデータについては、以下を参照してください)。

より開発された他のスクリプト、またはパッケージを知っている人はいますか? 私の最終的な目標は、これらのサンキー ダイアグラムの例のように、ダイアグラム コンポーネントの相対的なサイズによってデータ フローとパーセンテージの両方を視覚化することです。

r-help list に似たような質問を投稿しましたが、2 週間応答がなかったので、stackoverflow で運試しをしています。

ありがとう、エリック

PS。Parallel Sets Plotは知っていますが、それは私が探しているものではありません。

上記のコードで生成されたサンキー ダイアグラム、上記のコードで生成されたサンキー ダイアグラム

0 投票する
3 に答える
27202 参照

d3.js - d3.jsサンキーダイアグラム:長方形が色を塗りつぶす

だから私はd3.jsサンキーダイアグラムで遊んでいます。

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

この(上の写真)では、色は次を使用して定義されています

各ノードには長方形があり、その長方形はスタイルを変更することで塗りつぶされます。

カスタムカラーの使用に関する提案を探しています。たとえば6色だけを使用したいが、.jsonファイルの値に基づいてノードの長方形の色を選択する場合。

たとえば、NFLのチームのスネークチャートを表示したいとします。それぞれの色は、チームがどの部門でプレーするかを表しています。したがって、チームが別の部門に移動すると、色が変わります。そして、ノードは季節ごとに作成されます。それらの線に沿った何か。

だから、実行することは可能ですか?

jsonファイルの値に基づく色で?私はifステートメントだけを考えていますが、もっと簡単な方法はありますか?jsonに16進カラーコードを含めることはできますか?

0 投票する
2 に答える
4402 参照

json - サンキーダイアグラムの遷移

新しいデータへのスムーズな移行ができるように、サンキーダイアグラムの例を簡単に変更する方法があるかどうかを知りたいです。たとえば、さまざまなデータファイル(energy1.json、energy2.json ...)があるとします。d3で最初のデータセットのサンキーダイアグラムをプロットし、待機してから、ボックスの配置を再配置して2番目のデータセットを表すにはどうすればよいでしょうか。

0 投票する
2 に答える
421 参照

python - Matplotlib:サブプロットを作成せずに、指定されたyオフセットで新しい軸を作成することは可能ですか?

Matplotlibsankey-toolboxを使用すると、sankey-diagramsを自動的にプロットできます。sankey-objectの位置は、前のオブジェクトの位置に基づいて自動的に計算され、手動で指定することはできません。サンキーダイアグラムが初期化されると、最初のサンキーオブジェクトの位置が軸の入力で割り当てられます。((0,0)ポイントはこのオブジェクトの中心点になります)

そして、これが状況です。与えられたyオフセットで2つのサンキーダイアグラムを描きたいので、2つのダイアグラムのいくつかのポートを接続する必要があります。したがって、同じサブプロットにyオフセットを持つ2つの座標系が必要です。' add_axes 'メソッドを試しましたが、このメソッドを使用すると、新しいサブプロットが作成され、グラフィックのスケーリングの問題が発生します。

これが問題です。サブプロットを作成せずに、特定のyオフセットを使用して新しい座標系を作成することは可能ですか?

0 投票する
1 に答える
1140 参照

backbone.js - JavaScript - Backbone.js アプリケーションのインタラクティブな図

背景:私は現在、JavaScript を使用して、jQueryBackbone.jsを使用して Web アプリケーションのクライアント側を開発しています(これらは提案者によって必要とされます)。
これは、グラフィカル モードでデータを視覚化および編集するためのアプリケーションです (主にデータを表すインタラクティブな図を使用)。

用語:上記のデータは複数のドキュメントの形式であり、それぞれにアイテムのリストが含まれています。
この質問の目的のために、アイテムを識別子テキストによる説明、および他のドキュメント内のアイテムへのリンクで構成するとします。リンクは対称である必要があります (i1 -> i2存在する場合にのみi2 -> i1存在します)。

現在の目標:このフェーズでは、アプリケーションは 2 つのドキュメントを読み取り、両方のリストを並べて表示し、リンクに従って両方のドキュメント間の項目を結ぶ線を引くことができる必要があります。
これらの行は編集可能である必要があります。つまり、ユーザーは新しいリンクを作成したり、既存のリンクを削除したりできる必要があります(アイテム モデルの変更を反映)。

これらのドキュメントは、数十項目 (現実的なシナリオでは数百項目) など、やや長くなる可能性があります。もちろん、ページはスクロール可能で、ユーザーはすべてを見ることができます。

また、ユーザーの利便性のために、ビューをスケーリングするためのスライダーが必要です (ズームイン/アウト効果を可能にするため、ユーザーにはグローバルビューとローカルビューが与えられます。後者は編集に、前者は分析に適しています)。
さらに、ユーザーが特定のアイテムを非表示にできるようにする必要があります (アイテムに多くのリンクがあり、視覚的なごみを作成する場合に役立ちます)。

私がなんとかしたこと:

  • データを読み取り、バックボーン モデルとコレクションにマップします。
  • 両方のドキュメントを横に並べて表示 (バックボーン ビュー) し、アイテムを接続します。
  • バックボーン モデルの変更を反映して、これらの接続の対話性を許可します (ドラッグ アンド ドロップで線を作成し、クリックして削除します)。
  • 特定のアイテムを非表示にします。
  • スケール効果。

jsPlumbに出くわした後、SVGを使用してこれを達成しました。

手元の問題:アプリケーションにはまだ調整が必要です (スケーリング効果の強調)。いずれにせよ、jsPlumb は快適に使用できることがわかりました。ただし、スライダーを使用する場合、レンダリングのパフォーマンスが少し不足しているようです (スライダーのステップが小さすぎて、イベントの発生が多すぎる可能性があります)。

提案者は、この種のデータを表現するために、代わりにサンキー ダイアグラムを試すことを提案しました。彼らはまた、 Raphaël.jsに基づいて、tamcによる Sankeyを試すことを提案しました。 もちろん、視覚的要因も寄与しています。

私の質問:このライブラリは Backbone と良好な互換性がありますか? おそらく、結果の SVG 要素をバックボーン ビューの要素として使用する場合。
また、この 2 つのいずれかで、レンダリング パフォーマンスが他よりも大幅に優れているものはありますか?

最後に、このシナリオにより適切で、アプリケーションを書き直す価値のある他のライブラリはありますか?

0 投票する
0 に答える
1595 参照

javascript - d3pyを使用して、Pythonで生成された漂砂図またはサンキー図?

d3py、d3.js、およびそのsankey.jsプラグインを使用してサンキーまたは沖積図を作成したいのですが、d3pyからこの JavaScript ライブラリとプラグインにアクセスする方法がわかりません。

誰かが私をここから始めさせてもらえますか?

0 投票する
2 に答える
281 参照

javascript - Google フローの視覚化のようなフローの視覚化を実装する API はありますか

Googleフロー視覚化のようなフロー視覚化図を実装しようとしています。このタイプの実装用の API を提案してください。どんな助けでも大歓迎です。

編集:この要件を達成するためにサンキー図を使用しました。以下は私のコードです:

上記の例では、1 回目3 回目のインタラクションに「 page1 \n 50」があります。このため、3 番目の対話で 1 つのノードのみが作成されます。この問題を克服する方法。私を助けてください。

前もって感謝します