Man 2017 Bayesian Belief Network

force.css

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  fill: #000;
  font: 12px sans-serif;
  pointer-events: none;
}

force.js

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    width = w.innerWidth || e.clientWidth || g.clientWidth,
    height = w.innerHeight|| e.clientHeight|| g.clientHeight,
    margin = 12,
    width = width - margin*2,
    height = height - margin*2;

var int_width = 1000
var int_height = 1000

d3.json("force.json", function(json) {
  var force = d3.layout.force()
      .nodes(json.nodes)
      .links(json.links)
      .charge(-500)
      .linkDistance(function(link) {
       return 25+(200000/(2**link.weight));
    })
      .size([int_width, int_height])
      .on("tick", tick) // new
      .start();

      // .linkDistance(function(link) {
       // return 500/link.weight;
    // })
  
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", "0 0 1200 1000")
    .attr("preserveAspectRatio", "none");
    //.append("g");
        // .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
    // .append("g");


// 2024, 954

function updateWindow(){
    width = w.innerWidth || e.clientWidth || g.clientWidth;
    height = w.innerHeight|| e.clientHeight|| g.clientHeight;
    width = width - margin*2,
    height = height - margin*2;  
    svg.attr("width", width).attr("height", height);
    force.size([int_width, int_height]).resume();
}
window.onresize = updateWindow;

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("class", "link")
    .attr("marker-end", "url(#end)");
//    .style("stroke-width", function(d) {return d.weight/5})

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

// add the nodes
node.append("circle")
    .attr("r", 5);

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

// add the curvy lines
function tick() {
    path.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + 
            d.source.x + "," + 
            d.source.y + "A" + 
            dr + "," + dr + " 0 0,1 " + 
            d.target.x + "," + 
            d.target.y;
    });
    // .style("stroke-width", function(d) {return (2**d.weight)/3000});

    node
        .attr("transform", function(d) { 
  	    return "translate(" + d.x + "," + d.y + ")"; });
}
});

force.json

{"graph": {}, "links": [{"target": 13, "weight": 11.395140644692184, "source": 1}, {"target": 26, "weight": 12.35898098811617, "source": 3}, {"target": 10, "weight": 11.04178212679358, "source": 6}, {"target": 38, "weight": 11.19357131241202, "source": 7}, {"target": 42, "weight": 11.302870256484391, "source": 9}, {"target": 28, "weight": 11.50216158893607, "source": 15}, {"target": 11, "weight": 11.811094111530611, "source": 15}, {"target": 4, "weight": 11.022075200218836, "source": 15}, {"target": 22, "weight": 11.126778079064259, "source": 15}, {"target": 20, "weight": 11.341782565337985, "source": 17}, {"target": 28, "weight": 11.011687151737835, "source": 18}, {"target": 29, "weight": 11.472195449405936, "source": 18}, {"target": 17, "weight": 11.014462029716022, "source": 19}, {"target": 25, "weight": 12.30033817779011, "source": 21}, {"target": 30, "weight": 12.038010590796887, "source": 23}, {"target": 9, "weight": 11.606155160163992, "source": 27}, {"target": 35, "weight": 11.51097952701783, "source": 30}, {"target": 32, "weight": 11.1355903472037, "source": 31}, {"target": 30, "weight": 11.411063297906525, "source": 33}, {"target": 41, "weight": 11.765085371116779, "source": 34}, {"target": 0, "weight": 11.085716904673998, "source": 36}, {"target": 2, "weight": 11.218476985662207, "source": 36}, {"target": 41, "weight": 11.382357785485407, "source": 37}, {"target": 10, "weight": 11.117555676414097, "source": 37}, {"target": 5, "weight": 11.172688143733005, "source": 37}, {"target": 3, "weight": 11.104657028595675, "source": 37}, {"target": 27, "weight": 12.034697611576576, "source": 37}, {"target": 24, "weight": 12.250357483513058, "source": 39}, {"target": 14, "weight": 12.752503031215731, "source": 40}, {"target": 15, "weight": 11.35961478742438, "source": 41}, {"target": 23, "weight": 11.329784860281228, "source": 42}, {"target": 18, "weight": 11.37326133815717, "source": 42}, {"target": 8, "weight": 11.320608790113102, "source": 43}, {"target": 16, "weight": 11.027339131377776, "source": 43}, {"target": 2, "weight": 11.298977810483615, "source": 43}, {"target": 29, "weight": 11.43623723462659, "source": 43}, {"target": 12, "weight": 11.33941036875731, "source": 44}, {"target": 10, "weight": 11.11939718447071, "source": 44}], "nodes": [{"id": "doesn_t_let_the_little", "name": "doesn_t_let_the_little"}, {"id": "feminist", "name": "feminist"}, {"id": "prioritises_clarity_and", "name": "prioritises_clarity_and"}, {"id": "makes_the_first_move_sexually", "name": "makes_the_first_move_sexually"}, {"id": "protects_those_who_are_less", "name": "protects_those_who_are_less"}, {"id": "powers_through_a_problem_when", "name": "powers_through_a_problem_when"}, {"id": "does_not_perceive_something_as", "name": "does_not_perceive_something_as"}, {"id": "is_willing_to_endure_suffering", "name": "is_willing_to_endure_suffering"}, {"id": "is_unashamed_of_his_sexual", "name": "is_unashamed_of_his_sexual"}, {"id": "maintains_his_physical_strength", "name": "maintains_his_physical_strength"}, {"id": "does_not_speak_ill_of_others", "name": "does_not_speak_ill_of_others"}, {"id": "conservative", "name": "conservative"}, {"id": "cultivates_as_many_interests_as", "name": "cultivates_as_many_interests_as"}, {"id": "how_would_you_describe_your", "name": "how_would_you_describe_your"}, {"id": "keeps_his_feelings_to_himself", "name": "keeps_his_feelings_to_himself"}, {"id": "has_a_penis", "name": "has_a_penis"}, {"id": "would_rather_try_and_fail_than", "name": "would_rather_try_and_fail_than"}, {"id": "is_always_keen_to_explore_and", "name": "is_always_keen_to_explore_and"}, {"id": "has_the_confidence_that_if", "name": "has_the_confidence_that_if"}, {"id": "cultivates_practical_skills_and", "name": "cultivates_practical_skills_and"}, {"id": "is_willing_to_challenge_the", "name": "is_willing_to_challenge_the"}, {"id": "puts_the_lives_of_others_over", "name": "puts_the_lives_of_others_over"}, {"id": "is_secure_in_his_convictions", "name": "is_secure_in_his_convictions"}, {"id": "shows_sportsmanship_and_does", "name": "shows_sportsmanship_and_does"}, {"id": "is_able_to_provide_financially", "name": "is_able_to_provide_financially"}, {"id": "puts_the_needs_and_feelings_of", "name": "puts_the_needs_and_feelings_of"}, {"id": "takes_the_lead_in_bed", "name": "takes_the_lead_in_bed"}, {"id": "may_take_a_beating_of_whatever", "name": "may_take_a_beating_of_whatever"}, {"id": "dresses_practically", "name": "dresses_practically"}, {"id": "will_defend_his_integrity_if_it", "name": "will_defend_his_integrity_if_it"}, {"id": "helps_other_men_to_be_good_men", "name": "helps_other_men_to_be_good_men"}, {"id": "is_open_clear_and_consistent_in", "name": "is_open_clear_and_consistent_in"}, {"id": "settles_disputes_by_applying", "name": "settles_disputes_by_applying"}, {"id": "accepts_survival_of_the_fittest", "name": "accepts_survival_of_the_fittest"}, {"id": "puts_his_bonds_with_other_men", "name": "puts_his_bonds_with_other_men"}, {"id": "channels_his_anger_and", "name": "channels_his_anger_and"}, {"id": "does_not_let_his_feelings_cloud", "name": "does_not_let_his_feelings_cloud"}, {"id": "is_ready_to_use_physical_force", "name": "is_ready_to_use_physical_force"}, {"id": "has_a_cause_he_believes_in_and", "name": "has_a_cause_he_believes_in_and"}, {"id": "is_financially_independent", "name": "is_financially_independent"}, {"id": "does_not_trouble_others_with", "name": "does_not_trouble_others_with"}, {"id": "does_man_s_work_and_lets_women", "name": "does_man_s_work_and_lets_women"}, {"id": "is_quick_to_respond_in_a_time", "name": "is_quick_to_respond_in_a_time"}, {"id": "speaks_his_mind", "name": "speaks_his_mind"}, {"id": "appreciates_beauty_in_all_of", "name": "appreciates_beauty_in_all_of"}], "directed": true, "multigraph": false}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <link type="text/css" rel="stylesheet" href="force.css"/>
  </head>
  <body>
    <script type="text/javascript" src="force.js"></script>
  </body>
</html>