/suto3/Graphviz:因果関係図を作ってみよう

generated at 2/11/2025, 4:20:24 PM
Graphviz:因果関係図を作ってみよう
因果関係図（Causal diagram）
有向グラフ（directed graph）
因果関係図の作り方
原因 → 結果
因果関係を正確に 把握する（情報収集が重要）
時間的にもっとも古い原因を左上に書く
なるべく上から下、あるいは左から右に流れるように配置する

↓こんな
d3.jsconst digraph = ` digraph Causal_diagram {
  label="風が吹けば桶屋が儲かる";
  s1 [label="風が吹く"];
  s2 [label="土ぼこりがたって目に入り盲人が増える"];
  s3 [label="盲人は三味線で生計を立てようとする"];
  s4 [label="三味線の胴を張る猫の皮の需要が増える"];
  s5 [label="猫が減るとねずみが増える"];
  s6 [label="ねずみが桶をかじる"];
  s7 [label="桶屋が儲かる"];
  s1->s2->s3->s4;
  s4->s5->s6->s7;
}
`

実行 https://suto3.github.io/rund3?code=https://scrapbox.io/api/code/suto3/Graphviz:因果関係図を作ってみよう/d3.js

因果関係図による分析
Graphviz:因果関係図を作ってみよう2
#Graphviz

d3.jsd3.select("#graph").graphviz()
    .fade(false)
    .renderDot(digraph);

vizScript.jsconst graph = `
  digraph Causal_diagram {
    label="風が吹けば桶屋が儲かる";
    s1 [label="風が吹く"];
    s2 [label="土ぼこりがたって目に入り盲人が増える"];
    s3 [label="盲人は三味線で生計を立てようとする"];
    s4 [label="三味線の胴を張る猫の皮の需要が増える"];
    s5 [label="猫が減るとねずみが増える"];
    s6 [label="ねずみが桶をかじる"];
    s7 [label="桶屋が儲かる"];
    s1->s2->s3->s4;
    s4->s5->s6->s7;
  }
`; 
const viz = new Viz();
viz.renderSVGElement(graph)
.then(function(element) {
  const editor = document.getElementById('editor');
  editor.appendChild(element);
});

 （実行ボタン）