HP Mentions per Book Force Layout

forked from mbostock's block: Multi-Foci Force Layout

<!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>

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 => {
      d.Position = +d.Position //convert position from str to int
    });
		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) {
   		 return "<p><strong>Book #</strong> <span>" + d.Book + "</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);

</script>
</body>

https://d3js.org/d3.v4.min.js

https://unpkg.com/d3-force-cluster@latest

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js