Molecular clusters

by b_g_v

HTML

<p>Links all unfiltered</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="application/json" id="data">
</script>

CSS

.link line {
  /*stroke: #696969;*/
  /*stroke: #EEEDED;*/
  stroke: #BFBEBE;
  /*stroke-dasharray: 0,2 1;*/
}

.link1 line {
  /*stroke-dasharray: 0,2 1;*/
  stroke: gray;
}

.link line.separator {
  stroke: #fff;
  stroke-width: 1px;
}

.node circle {
  stroke: gray;
  stroke-width: 1.5px;
}
.node text {
  font: 10px sans-serif;
  pointer-events: none;
}
div.tooltip {
  position: absolute;
  text-align: center;
                /*width: 200px;*/
                /*height: 10px;*/
                min-height: 10px;
                padding: 8px;
                font: 10px sans-serif;
                background: #ffff99;
                border: solid 1px #aaa;
                border-radius: 8px;
                pointer-events: none;
            }

JavaScript

const dataSource = 1;
var url = 'http://127.0.0.1/aadmin/users/hce/projects/ukr_refugee_01-fact-checking_02a/data/processors/accounts-1_accounts_chart_d3_network1.json';

(async () => {
  var dataJson = null;

  if(dataSource == 0){
	  const user = 'hce', passwd = 'events12345';
		const headers = new Headers({
      'Authorization': `Basic ${btoa(user + ':' + passwd)}`,
      'Origin':'https://jsfiddle.net'
    });
    var options = {headers: headers, credentials: "include"};
    dataJson = await fetch(url, options).then(response => response.json());
  }else if(dataSource == 1){
    dataJson = await fetch(url).then(response => response.json());
  }else{
    var dataTag = document.getElementById('data').innerHTML;
    dataJson = JSON.parse(dataTag);
  }

  drawChart(dataJson);

})();


function drawChart(graph){
  var width = 1400,
      height = 1000;
  var intermed_node_start = '~';

  var color = d3.scale.category20();

  var radius = d3.scale.sqrt()
      .range([0, 3]);

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  var force = d3.layout.force()
      .size([width, height])
      .gravity(0.06)
      .charge(-28)
      //.charge(0)
      .linkDistance(function(d) { return radius(d.source.size) + radius(d.target.size) + 20; });
      //.linkDistance(function(d) { return 10; });

  force.nodes(graph.nodes)
        .links(graph.links)
        .on("tick", tick)
        .start();

  var link = svg.selectAll(".link")
        .data(graph.links)
        .enter().append("g")
        .attr("class", "link");

    //Draw line
  link.append("line")
      .attr("marker-end", function(link, idx){ return 'url(#triangle-' + idx+')'})
      .style("stroke-width", function(d) { return (d.bond * 2 - 1) * 2 + "px"; })
      .style("stroke", function(d) {
             if(typeof(d.source.color) === 'undefined') d.source.color = color(d.source.atom);
             return !isSelected(d.source) && (d.source.atom.charAt(0) ==...