(d3v4) Force Layout w curved connections

D3 v4 forcelayout example with dropdown filters.

forked from mbostock's block: Force Dragging I

forked from almsuarez's block: Force Layout v4 with Filters

forked from almsuarez's block: Force Layout v4 with Filters v2

forked from almsuarez's block: (d3v4) Force Layout w highlights

forked from almsuarez's block: (d3v4) Force Layout w complex nodes

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
/* 	  stroke: #c1c1c1; */
    stroke-width: 2px;
    pointer-events: all;
	}

.node circle {
	  pointer-events: all;
	  stroke: #777;
	  stroke-width: 1px;
	}
  path {
  	fill: none;
    stroke-width: 3;
  }
  
	div.tooltip {
    position: absolute;
    background-color: white;
    max-width; 200px;
    height: auto;
    padding: 1px;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    pointer-events: none;
  }

</style>
<body>
</body>
<svg width="960" height="700"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script>

var colorScale = d3.schemeCategory20

var color = d3.scaleOrdinal(colorScale).domain(['Am',
 'An',
 'Ar',
 'As',
 'Ba',
 'Br',
 'Ch',
 'Cn',
 'Cy',
 'Gl',
 'Gy',
 'Li',
 'Os',
 'Pr',
 'Vi',
 'Zy']);

var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);
  
  
d3.json("dataframe.json", function(error, graph) {
  if (error) throw error;
  
  // DATA FORMATTING

_.each(graph.links, function(link) {

// find other links with same target+source or source+target
        var same = _.where(graph.links, {
            'source': link.source,
            'target': link.target
        });
        var sameAlt = _.where(graph.links, {
            'source': link.target,
            'target': link.source
        });
        var sameAll = same.concat(sameAlt);

_.each(sameAll, function(s, i) {
            s.sameIndex = (i + 1);
            s.sameTotal = sameAll.length;
            s.sameTotalHalf = (s.sameTotal / 2);
            s.sameUneven = ((s.sameTotal % 2) !== 0);
            s.sameMiddleLink = ((s.sameUneven === true) && (Math.ceil(s.sameTotalHalf) === s.sameIndex));
            s.sameLowerHalf = (s.sameIndex <= s.sameTotalHalf);
            s.sameArcDirection = s.sameLowerHalf ? 0 : 1;
            s.sameIndexCorrected = s.sameLowerHalf ? s.sameIndex : (s.sameIndex - Math.ceil(s.sameTotalHalf));
        });
    });

var maxSame = _.chain(graph.links)
        .sortBy(function(x) {
            return x.sameTotal;
        })
        .last()
        .value().sameTotal;

_.each(graph.links, function(link) {
        link.maxSameHalf = Math.round(maxSame / 2);
    });
  console.log(maxSame)
 	const svg = d3.select('svg'),
        width = +svg.attr('width'),
  			height = +svg.attr('height');

//  const width = 960;
//   const height = 700;

const simulation = d3.forceSimulation()
    .nodes(graph.nodes)
    .force('link', d3.forceLink().id(d => d.id).distance(100))
    .force('charge', d3.forceManyBody().strength(-50))
    .force('center', d3.forceCenter(width / 2, height / 2))
  	.force('collide', d3.forceCollide(25))
    .on('tick', ticked);

simulation.force('link')
    .links(graph.links);

const R = 6;

let link = svg.selectAll('path')
    .data(graph.links)
    .enter().append('path')
  	.attr('stroke', function(d){return color(d.T);});

link  
    .attr('class', 'link')
  	.on('mouseover.tooltip', function(d) {
      	tooltip.transition()
        	.duration(300)
        	.style("opacity", .8);
      	tooltip.html("Source:"+ d.source.id + 
                     "<p/>Target:" + d.target.id +
                    "<p/>T:"  + d.T)
        	.style("left", (d3.event.pageX) + "px")
        	.style("top", (d3.event.pageY + 10) + "px");
    	})
    	.on("mouseout.tooltip", function() {
	      tooltip.transition()
	        .duration(100)
	        .style("opacity", 0);
	    })
  		.on('mouseout.fade', fade(1))
	    .on("mousemove", function() {
	      tooltip.style("left", (d3.event.pageX) + "px")
	        .style("top", (d3.event.pageY + 10) + "px");
	    });
;

let node = svg.selectAll('.node')
    .data(graph.nodes)
    .enter().append('g')
    .attr('class', 'node')
    .call(d3.drag()
    	.on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));;

node.append('circle')
    .attr('r', R)
  	.attr("fill", function(d) { return "#CCC";}) 	
    .on('mouseover.tooltip', function(d) {
      	tooltip.transition()
        	.duration(300)
        	.style("opacity", .8);
      	tooltip.html("Project:" + d.id + "<p/>T:" + d.T)
        	.style("left", (d3.event.pageX) + "px")
        	.style("top", (d3.event.pageY + 10) + "px");
    	})
  	.on('mouseover.fade', fade(0.1))
    .on("mouseout.tooltip", function() {
        tooltip.transition()
	        .duration(100)
	        .style("opacity", 0);
	    })
  	.on('mouseout.fade', fade(1))
	    .on("mousemove", function() {
	      tooltip.style("left", (d3.event.pageX) + "px")
	        .style("top", (d3.event.pageY + 10) + "px");
	    })
  	.on('dblclick',releasenode)
    
	
  node.append('text')
    .attr('x', 0)
    .attr('dy', '.35em')
    .text(d => d.name);

function ticked() {
//     link
//       .attr('x1', d => d.source.x)
//       .attr('y1', d => d.source.y)
//       .attr('x2', d => d.target.x)
//       .attr('y2', d => d.target.y);
    link.attr("d", linkArc)

node
      .attr('transform', d => `translate(${d.x},${d.y})`);
  }

function dragstarted(d) {
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
    }

function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

return "M" + d.source.x + "," + d.source.y + "A" + arc + "," + arc + " 0 0," + d.sameArcDirection + " " + d.target.x + "," + d.target.y;
    }
  
  const linkedByIndex = {};
  graph.links.forEach(d => {
    linkedByIndex[`${d.source.index},${d.target.index}`] = 1;
  });

function isConnected(a, b) {
    return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index;
  }

function fade(opacity) {
    return d => {
      node.style('stroke-opacity', function (o) {
        const thisOpacity = isConnected(d, o) ? 1 : opacity;
        this.setAttribute('fill-opacity', thisOpacity);
        return thisOpacity;
      });

link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity));

};
  }
  var sequentialScale = d3.scaleOrdinal(colorScale)
  .domain(['Am',
 'An',
 'Ar',
 'As',
 'Ba',
 'Br',
 'Ch',
 'Cn',
 'Cy',
 'Gl',
 'Gy',
 'Li',
 'Os',
 'Pr',
 'Vi',
 'Zy']);

svg.append("g")
  .attr("class", "legendSequential")
  .attr("transform", "translate("+(width-140)+","+(height-400)+")");

var legendSequential = d3.legendColor()
    .shapeWidth(30)
    .cells(11)
    .orient("vertical")
		.title("Link legend:")
		.titleWidth(100)
    .scale(sequentialScale)

svg.select(".legendSequential")
  .call(legendSequential);

})

</script>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js