D3 Examples - HP Mentions per Book Force Layout

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    .d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 6px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 1px;
    font: 14px sans-serif;
    }
    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
    }
    .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
        }
  </style>
  <body>
    
  <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-force-cluster@latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
​
    <script>
​
    var width = 960,
     height = 500,
     padding = 1.5, // separation between same-color nodes
       clusterPadding = 6, // separation between different-color nodes
     maxRadius = 8;
​
  
    var n = 432, // total number of nodes
       m = 7; // number of distinct clusters--# of books
​
    var color = d3.scaleSequential(d3.interpolateRainbow)
    .domain(d3.range(m));
    const books = ["1: SS","2: CoS","3: PoA", "4: GoF","5: OotP", "6: HBP", "7: DH"];
    var kbArr = [['1: SS',1], ['2: CoS', 2],['3: PoA',3], ['4: GoF',4], ['5: OotP',5], ['6: HBP',6], ['7: DH',7]];
    var bookMap = new Map(kbArr); //convert arr into map
      
  // The largest node for each cluster.
    var clusters = new Array(m);
​
      
    d3.json('mentions.json', function(err, data) { 
        data.forEach(d => {
      console.log(d);
      d.Position = +d.Position //convert position from str to int
      d.Spell=d.Spell
    });
        var nodes = data.map(function (d) {
     //make i be according to book
      //radius size kept random for now
      var book = d.Book;
   console.log(bookMap.get(book)) 
   // i = Math.floor(Math.random() * m)
     var i = bookMap.get(book),
       r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
          n = {
            cluster: i,
            radius: 7,
            x: Math.cos(i / m * 2 * Math.PI) * 150 + width / 2 + Math.random(),
            y: Math.sin(i / m * 2 * Math.PI) * 150 + height / 2 + Math.random(),
          Book: book
        };
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = n;
    return n;
    });
​
   var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-6, 0])
    .html(function(d) {console.log("tooltip:"+d.stringify);
         return "<p><strong>Book #</strong> <span>" + d.Spell+ "</span></p>";
    });
    var simulation = d3.forceSimulation()
    // keep entire simulation balanced around screen center
    .force('center', d3.forceCenter(-100+width/2, height/2))
​
    // cluster by section
    .force('cluster', d3.forceCluster()
    .centers(function (d) { return clusters[d.cluster]; })
    .strength(0.5))
​
    // apply collision with padding
    .force('collide', d3.forceCollide(function (d) { return d.radius + padding; }))
​
    .on('tick', layoutTick)
    .nodes(nodes);
   
  var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
    
    svg.call(tip);
​
    var node = svg.selectAll('circle')
    .data(nodes)
    .enter().append('circle')
    .style('fill', function (d) { return color(d.cluster/7); })
    .style('opacity',0.8)
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);
  
    function layoutTick (e) {
    node
        .attr('cx', function (d) { return d.x; })
        .attr('cy', function (d) { return d.y; })
        .attr('r', function (d) { return d.radius; });          
    }
 });
      
​
  </script>
</body>
    