jalapic/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from jalapic's block: network fade
forked from jalapic's block: network fade 2

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<style>

.node circle {
  stroke-width: 2px;
}

.node text {
  font-family: sans-serif;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.link {
  stroke-width: 4px;
}


text {
  font: 18px sans-serif;
  pointer-events: none;
}

#end-arrow {
  fill: #88A;
}


</style>
<body>

  <h1>  This is work in progress and is not working yet !!! </h1>


<p>
  <label for="nHeightx"
         style="display: inline-block; width: 240px; text-align: right">
         heightx = <span id="nHeightx-value">…</span>
  </label>
  <input type="range" min="1" max="280" id="nHeightx">
</p>

<p>Use the slider to filter by edge weight:</p>

<script>


  function bar() {
  console.log("click");
  force.stop();
  force.start();
}


  var links2 = [
  {source: "A", target: "D", weight: "1"},
  {source: "A", target: "K", weight: "2"},
  {source: "B", target: "G", weight: "3"},
  {source: "H", target: "B", weight: "4"},
  {source: "C", target: "A", weight: "5"},
  {source: "C", target: "L", weight: "7"},
  {source: "E", target: "A", weight: "9"},
  {source: "F", target: "B", weight: "11"},
  {source: "F", target: "G", weight: "15"},
  {source: "K", target: "J", weight: "20"},
  {source: "F", target: "I", weight: "25"},
  {source: "G", target: "H", weight: "30"},
  {source: "E", target: "K", weight: "31"},
  {source: "E", target: "G", weight: "32"},
  {source: "E", target: "F", weight: "33"},
  {source: "E", target: "M", weight: "34"},
];


var links = [];


// Slider.........................................

// Add the initial text values
updateHeightx(150);

// this changes the text value on the slider
d3.select("#nHeightx").on("input", function() {
  updateHeightx(+this.value);
});

  // Update the height attributes
function updateHeightx(nHeightx) {

  // adjust the text on the range slider
  d3.select("#nHeightx-value").text(nHeightx);
  d3.select("#nHeightx").property("value", nHeightx);


for(var i=0; i<links2.length;i++) {
    if (links2[i].weight >= nHeightx/15) links.push(links2[i]);
}

}


//for(var i=0; i<links2.length;i++) {
//    if (links2[i].weight >= 5) links.push(links2[i]);
//  }


////////////////////////////////


var nodes = {};


// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var width = 960,
    height = 700;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(105)
    .charge(-775)
    .on("tick", tick)
    .start();


force.on("start", function () {
    console.log("start");
});
force.on("end", function () {
    console.log("end");
});

R=18


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// add defs-marker
// add defs-markers
svg.append('svg:defs').selectAll("marker")
    .data([{id:"end-arrow", opacity:1}, {id:"end-arrow-fade", opacity:0.075}])
  .enter().append('marker')
    .attr('id', function(d) { return d.id; })
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 2+R)
    .attr('refY', 5)
    .attr('markerWidth', 4)
    .attr('markerHeight', 4)
    .attr('orient', 'auto')
  .append('svg:path')
    .attr('d', 'M0,0 L0,10 L10,5 z')
    .style("opacity", function(d) { return d.opacity; });

//phantom marker
  svg.append('svg:defs')
    .append('svg:marker')
    .attr('id', 'end-arrow-phantom')
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 2+R)
    .attr('refY', 5)
     .attr('markerWidth', 4)
     .attr('markerHeight', 4)
    .attr('orient', 'auto')
    .attr('fill', '#EEE')
    .append('svg:path')
    .attr('d', 'M0,0 L0,10 L10,5 z');


var link = svg.selectAll(".link")
    .data(force.links())
    .enter()
    .append("line")
    .attr("class", "link")
    .attr("stroke", "#88A")
    .attr('marker-end', 'url(#end-arrow)')
    .on("mouseout", fade(1))
;

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", R)
    .attr("stroke", '#777')
    .attr("fill", '#DDD')
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1))

;

node.append("text")
    .attr("x", 0)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });


function tick() {
  link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; })
    ;

  node
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}


   var linkedByIndex = {};
    links.forEach(function(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 function(d) {

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


          link.style("stroke-opacity", function(o) {
                return opacity === 1 ||  o.source === d || o.target === d ? 1 : opacity/2;
            });


            link.attr("marker-end", function(o) {
                return opacity === 1 || o.source === d || o.target === d ? 'url(#end-arrow)' : 'url(#end-arrow-phantom)';
            });


        };
 }


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<style>

	.node circle {
	stroke-width: 2px;
	}

	.node text {
	font-family: sans-serif;
	text-anchor: middle;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	}

	.link {
	stroke-width: 4px;
	}


	text {
	font: 18px sans-serif;
	pointer-events: none;
	}

	#end-arrow {
	fill: #88A;
	}







	</style>
	<body>

	<h1> This is work in progress and is not working yet !!! </h1>


	<p>
	<label for="nHeightx"
	style="display: inline-block; width: 240px; text-align: right">
	heightx = <span id="nHeightx-value">…</span>
	</label>
	<input type="range" min="1" max="280" id="nHeightx">
	</p>

	<p>Use the slider to filter by edge weight:</p>

	<script>


	function bar() {
	console.log("click");
	force.stop();
	force.start();
	}



	var links2 = [
	{source: "A", target: "D", weight: "1"},
	{source: "A", target: "K", weight: "2"},
	{source: "B", target: "G", weight: "3"},
	{source: "H", target: "B", weight: "4"},
	{source: "C", target: "A", weight: "5"},
	{source: "C", target: "L", weight: "7"},
	{source: "E", target: "A", weight: "9"},
	{source: "F", target: "B", weight: "11"},
	{source: "F", target: "G", weight: "15"},
	{source: "K", target: "J", weight: "20"},
	{source: "F", target: "I", weight: "25"},
	{source: "G", target: "H", weight: "30"},
	{source: "E", target: "K", weight: "31"},
	{source: "E", target: "G", weight: "32"},
	{source: "E", target: "F", weight: "33"},
	{source: "E", target: "M", weight: "34"},
	];




	var links = [];


	// Slider.........................................

	// Add the initial text values
	updateHeightx(150);

	// this changes the text value on the slider
	d3.select("#nHeightx").on("input", function() {
	updateHeightx(+this.value);
	});

	// Update the height attributes
	function updateHeightx(nHeightx) {

	// adjust the text on the range slider
	d3.select("#nHeightx-value").text(nHeightx);
	d3.select("#nHeightx").property("value", nHeightx);


	for(var i=0; i<links2.length;i++) {
	if (links2[i].weight >= nHeightx/15) links.push(links2[i]);
	}

	}


	//for(var i=0; i<links2.length;i++) {
	// if (links2[i].weight >= 5) links.push(links2[i]);
	// }


	////////////////////////////////


	var nodes = {};


	// Compute the distinct nodes from the links.
	links.forEach(function(link) {
	link.source = nodes[link.source] \|\| (nodes[link.source] = {name: link.source});
	link.target = nodes[link.target] \|\| (nodes[link.target] = {name: link.target});
	});

	var width = 960,
	height = 700;

	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([width, height])
	.linkDistance(105)
	.charge(-775)
	.on("tick", tick)
	.start();



	force.on("start", function () {
	console.log("start");
	});
	force.on("end", function () {
	console.log("end");
	});

	R=18



	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	// add defs-marker
	// add defs-markers
	svg.append('svg:defs').selectAll("marker")
	.data([{id:"end-arrow", opacity:1}, {id:"end-arrow-fade", opacity:0.075}])
	.enter().append('marker')
	.attr('id', function(d) { return d.id; })
	.attr('viewBox', '0 0 10 10')
	.attr('refX', 2+R)
	.attr('refY', 5)
	.attr('markerWidth', 4)
	.attr('markerHeight', 4)
	.attr('orient', 'auto')
	.append('svg:path')
	.attr('d', 'M0,0 L0,10 L10,5 z')
	.style("opacity", function(d) { return d.opacity; });

	//phantom marker
	svg.append('svg:defs')
	.append('svg:marker')
	.attr('id', 'end-arrow-phantom')
	.attr('viewBox', '0 0 10 10')
	.attr('refX', 2+R)
	.attr('refY', 5)
	.attr('markerWidth', 4)
	.attr('markerHeight', 4)
	.attr('orient', 'auto')
	.attr('fill', '#EEE')
	.append('svg:path')
	.attr('d', 'M0,0 L0,10 L10,5 z');


	var link = svg.selectAll(".link")
	.data(force.links())
	.enter()
	.append("line")
	.attr("class", "link")
	.attr("stroke", "#88A")
	.attr('marker-end', 'url(#end-arrow)')
	.on("mouseout", fade(1))
	;

	var node = svg.selectAll(".node")
	.data(force.nodes())
	.enter().append("g")
	.attr("class", "node")
	.call(force.drag);

	node.append("circle")
	.attr("r", R)
	.attr("stroke", '#777')
	.attr("fill", '#DDD')
	.on("mouseover", fade(.1))
	.on("mouseout", fade(1))

	;

	node.append("text")
	.attr("x", 0)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });




	function tick() {
	link
	.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; })
	;

	node
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
	}



	var linkedByIndex = {};
	links.forEach(function(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 function(d) {

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


	link.style("stroke-opacity", function(o) {
	return opacity === 1 \|\| o.source === d \|\| o.target === d ? 1 : opacity/2;
	});


	link.attr("marker-end", function(o) {
	return opacity === 1 \|\| o.source === d \|\| o.target === d ? 'url(#end-arrow)' : 'url(#end-arrow-phantom)';
	});




	};
	}


	</script>