Molecular clusters

by b_g_v

HTML

<p>Limited synonyms-type, max four words distance with intermediate nodes</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="application/json" id="data">
{
    "nodes": [
      {
        "atom": "Coronavirus",
        "itemIndex": 0,
        "size": 60,
        "md5": "12ffb13cd973dc2702501efdb3dc3b63",
        "value": "707",
        "_index": 0
      },
      {
        "atom": "Trump Organization",
        "itemIndex": 1,
        "size": 14,
        "md5": "571bb8d573a4e57682aeb6ef6094fdc4",
        "value": "172",
        "_index": 1
      },
      {
        "atom": "United States Of America",
        "itemIndex": 2,
        "size": 100,
        "md5": "1f122dd19db580fd03635dd699fb49de",
        "value": "1170",
        "_index": 2
      },
      {
        "atom": "Democratic party",
        "itemIndex": 3,
        "size": 41,
        "md5": "fba8c783125cd5f360801e9224a3eb24",
        "value": "486",
        "_index": 3
      },
      {
        "atom": "Senate",
        "itemIndex": 4,
        "size": 33,
        "md5": "396e36e9741a2bb47d82e7ed884beacc",
        "value": "387",
        "_index": 4
      },
      {
        "atom": "_8",
        "itemIndex": 5,
        "size": 1,
        "md5": "dd494b805517113d9d15b8adf0a09b5c",
        "value": 1,
        "_index": 5
      },
      {
        "atom": "_9",
        "itemIndex": 6,
        "size": 1,
        "md5": "9748632a03a999f14fd0c94056c4aa24",
        "value": 1,
        "_index": 6
      },
      {
        "atom": "Republican Party",
        "itemIndex": 7,
        "size": 32,
        "md5": "7beb31126a3a23b163419f576013a3ea",
        "value": "380",
        "_index": 7
      },
      {
        "atom": "Biden Administration",
        "itemIndex": 8,
        "size": 28,
        "md5": "ad4c19d1805f0c11db7bbef3961fdd9a",
        "value": "330",
        "_index": 8
      },
      {
        "atom": "_22",
        "itemIndex": 9,
        "size": 1,
        "md5":...

CSS

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

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

.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

var data = document.getElementById('data').innerHTML,
    graph = JSON.parse(data);
/*
var width = 1700,
    height = 900;
*/
var width = 2800,
    height = 1850;

var color = d3.scale.category20();

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

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

var force = d3.layout.force()
    .size([width, height])
    .charge(-200)
    .linkDistance(function(d) { return radius(d.source.size) + radius(d.target.size) + 10; });
    //.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-dasharray", function(d) {return d.source.atom.charAt(0) == '_' || d.target.atom.charAt(0) == '_' ? '0,2 1' : ''; });

  //link.filter(function(d) { return d.bond > 1; }).append("line")
  //    .attr("class", "separator");


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

  node.append("circle")
      .attr("r", function(d) { return d.atom.charAt(0) == '_' ? 1 : radius(d.size); })
      .style("fill", function(d) { return d.atom.charAt(0) == '_' ? 'gray' : (typeof(d.color) === 'undefined' ? color(d.atom) : d.color); });

  node.append("text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.atom.charAt(0) == '_' ? '' : d.atom; })
      .style("font-size", adaptLabelFontSize);

svg.append("svg:defs").selectAll("marker")
      .data(force.links())
      .enter().append("svg:marker")
      .attr("id", function(link, idx){ return 'triangle-'...