Molecular clusters

by b_g_v

HTML

<p>JA, Full size content-type, min frequency 40, max 4 words distance, without intermediate nodes, value is pop-word's frequency</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="application/json" id="data">
{
  "nodes": [
    {
      "size": 1, 
      "atom": "_0"
    }, 
    {
      "size": 1, 
      "atom": "_1"
    }, 
    {
      "size": 1, 
      "atom": "_2"
    }, 
    {
      "size": 1, 
      "atom": "_3"
    }, 
    {
      "size": 1, 
      "atom": "_4"
    }, 
    {
      "size": 1, 
      "atom": "_5"
    }, 
    {
      "size": 1, 
      "atom": "_6"
    }, 
    {
      "size": 1, 
      "atom": "_7"
    }, 
    {
      "size": 62, 
      "atom": "アメリカ"
    }, 
    {
      "size": 76, 
      "atom": "ソフトバンク"
    }, 
    {
      "size": 73, 
      "atom": "中国"
    }, 
    {
      "size": 94, 
      "atom": "優勝"
    }, 
    {
      "size": 48, 
      "atom": "全国"
    }, 
    {
      "size": 100, 
      "atom": "大会"
    }, 
    {
      "size": 65, 
      "atom": "広島"
    }, 
    {
      "size": 96, 
      "atom": "拡大"
    }, 
    {
      "size": 47, 
      "atom": "政府"
    }, 
    {
      "size": 61, 
      "atom": "日本一"
    }, 
    {
      "size": 61, 
      "atom": "東京"
    }, 
    {
      "size": 46, 
      "atom": "死亡"
    }
  ], 
  "links": [
    {
      "source": 15, 
      "target": 8, 
      "bond": 1
    }, 
    {
      "source": 13, 
      "target": 8, 
      "bond": 1
    }, 
    {
      "source": 8, 
      "target": 19, 
      "bond": 1
    }, 
    {
      "source": 8, 
      "target": 16, 
      "bond": 1
    }, 
    {
      "source": 10, 
      "target": 8, 
      "bond": 1
    }, 
    {
      "source": 11, 
      "target": 0, 
      "bond": 1
    }, 
    {
      "source": 0, 
      "target": 9, 
      "bond": 1
    }, 
    {
      "source": 15, 
      "target": 9, 
      "bond": 1
    }, 
    {
      "source": 9, 
      "target": 1, 
      "bond": 1
    }, 
    {
      "source": 1, 
      "target": 17, 
     ...

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

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

var width = 1900,
    height = 900;

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.001)
    .charge(-5)
    //.linkDistance(function(d) { return (radius(d.source.size) + radius(d.target.size))*6; });
    //.linkDistance(function(d) { return Math.log(radius(d.source.size) + radius(d.target.size)) * 100; });
    .linkDistance(function(d) { var v = (10 -Math.log(radius(d.source.size) + radius(d.target.size))) * 70;
                                console.log(v);
                                return v;});
//.linkDistance(function(d) { return 400; });

  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) == '_' ||
                             d.target.atom.charAt(0) == '_') ? ''/*'#BFBEBE'*/ : d.source.color; })
    .style("stroke-dasharray", function(d) {return d.source.atom.charAt(0) == '_' ||
                                            d.target.atom.charAt(0) == '_' || d.distance > 0 ? '0,3 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")
     ...