Molecular clusters

by b_g_v

HTML

<p>Limited content-type, max four words distance with intermediate nodes, value is frequency</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="application/json" id="data">
{
  "nodes": [
    {
      "size": 4, 
      "atom": "AKIPRESS"
    }, 
    {
      "size": 8, 
      "atom": "Amazon"
    }, 
    {
      "size": 16, 
      "atom": "America"
    }, 
    {
      "size": 4, 
      "atom": "Asia"
    }, 
    {
      "size": 8, 
      "atom": "Australia"
    }, 
    {
      "size": 3, 
      "atom": "Bloomberg"
    }, 
    {
      "size": 11, 
      "atom": "Bob Woodward"
    }, 
    {
      "size": 50, 
      "atom": "Brett Kavanaugh Senate"
    }, 
    {
      "size": 6, 
      "atom": "Brexit"
    }, 
    {
      "size": 6, 
      "atom": "Britain"
    }, 
    {
      "size": 8, 
      "atom": "British"
    }, 
    {
      "size": 4, 
      "atom": "California"
    }, 
    {
      "size": 4, 
      "atom": "Canada"
    }, 
    {
      "size": 12, 
      "atom": "China"
    }, 
    {
      "size": 4, 
      "atom": "Chuck Grassley"
    }, 
    {
      "size": 9, 
      "atom": "Colin Kaepernick"
    }, 
    {
      "size": 4, 
      "atom": "Corbyn"
    }, 
    {
      "size": 11, 
      "atom": "Dallas Fox"
    }, 
    {
      "size": 3, 
      "atom": "David"
    }, 
    {
      "size": 30, 
      "atom": "Democratic Party"
    }, 
    {
      "size": 3, 
      "atom": "Dubai"
    }, 
    {
      "size": 14, 
      "atom": "European Union"
    }, 
    {
      "size": 3, 
      "atom": "French"
    }, 
    {
      "size": 3, 
      "atom": "GOP"
    }, 
    {
      "size": 5, 
      "atom": "Germany"
    }, 
    {
      "size": 4, 
      "atom": "Google"
    }, 
    {
      "size": 4, 
      "atom": "Idlib"
    }, 
    {
      "size": 6, 
      "atom": "Israel"
    }, 
    {
      "size": 9, 
      "atom": "Japan"
    }, 
    {
      "size": 6, 
      "atom": "Jeff Bezos"
    }, 
    {
      "size": 3, 
      "atom": "John Kelly"
    }, 
 ...

CSS

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

.link0 line {
}

.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

var connectorLines = 0;
var colorGray = '#BFBEBE';

var data = document.getElementById('data').innerHTML,
    graph = JSON.parse(data);

var width = 1900,
    height = 1000;

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])
    .gravity(0.08)
    .charge(-100)
    //.charge(0)
    .linkDistance(function(d) { return radius(d.source.size) + radius(d.target.size) + 5; });
    //.linkDistance(function(d) { return 10; });

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

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

links.filter(function(d) {
    if (connectorLines){
        d.source.connectorLines = 1;
        d.target.connectorLines = 1;
    } else {
        d.source.connectorLines = 0;
        d.target.connectorLines = 0;
    }
    if(typeof(d.source.color) === 'undefined') {
        d.source.color = d.source.atom.charAt(0) == '_' ? colorGray : color(d.source.atom);
    }
    if(typeof(d.target.color) === 'undefined') {
        d.target.color = d.target.atom.charAt(0) == '_' ? colorGray : color(d.target.atom);
    }
    return false;
});

//Draw lines
links
     .append("line")
     .filter(function(d){
         //return true;
         if (!isSelected(d.source) && (d.source.connectorLines == 0 || d.target.connectorLines == 0) )
             return false;
         else
             return true;
     })
    //.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) {
        return (d.source.atom.charAt(0) == '_' || d.target.atom.charAt(0) == '_') ? colorGray : d.source.color; })
   ...