Model 1 - Cash Reward and Non Offer

.block

license: mit

README.md

Built with blockbuilder.org

force_directed_graph_2.json

{
 "nodes": [
 {
   "id": "Impressions GDN Cash Reward",
   "group": 1
 },
 {
   "id": "Impressions GSP Cash Reward",
   "group": 1
 },
 {
   "id": "Impressions LinkedIn Non Offer",
   "group": 2
 },
 {
   "id": "Impressions LinkedIn Cash Reward",
   "group": 2
 },
 {
   "id": "Impressions Bing Search Non Offer",
   "group": 1
 },
 {
   "id": "Impressions Bing Search Cash Reward",
   "group": 1
 },
 {
   "id": "Impressions Google Search Non Offer",
   "group": 1
 },
 {
   "id": "Impressions Google Search Cash Reward",
   "group": 1
 },
 {
   "id": "Impressions Natural Search",
   "group": 3
 },
 {
   "id": "Click GDN Cash Reward",
   "group": 1
 },
 {
   "id": "Click LinkedIn Cash Reward",
   "group": 2
 },
 {
   "id": "Click LinkedIn No Offer",
   "group": 2
 },
 {
   "id": "Click Bing Search Cash Reward",
   "group": 1
 },
 {
   "id": "Click Bing Search Non Offer",
   "group": 1
 },
 {
   "id": "Click Google Search Non Offer",
   "group": 1
 },
 {
   "id": "Click Google Search Cash Reward",
   "group": 1
 },
 {
   "id": "Click Natural Search",
   "group": 3
 },
 {
   "id": "Impressions LinkedIn Remarketing",
   "group": 2
 },
 {
   "id": "Click LinkedIn Remarketing",
   "group": 2
 },
 {
   "id": "Natural Search Leads",
   "group": 3
 },
 {
   "id": "Paid Leads",
   "group": 1
 },
 {
   "id": "LinkedIn Leads",
   "group": 2
 }],
"links": [
  {
    "source": "Impressions GDN Cash Reward",
    "target": "Impressions LinkedIn Cash Reward",
    "value": 0.58642511
  },
  {
    "source": "Impressions GDN Cash Reward",
    "target": "Impressions Bing Search Cash Reward",
    "value": 0.473147165
  },
  {
    "source": "Impressions GDN Cash Reward",
    "target": "Impressions Bing Search Non Offer",
    "value": 0.017262516
  },
  {
    "source": "Impressions GDN Cash Reward",
    "target": "Impressions Google Search Cash Reward",
    "value": 0.087297134
  },
  {
    "source": "Impressions GDN Cash Reward",
    "target": "Impressions Google Search Non Offer",
    "value": 0.241022325
  },
  {
    "source": "Impressions GDN Cash Reward",
    "target": "Click GDN Cash Reward",
    "value": 0.568512824
  },
  {
    "source": "Impressions GSP Cash Reward",
    "target": "Impressions Bing Search Cash Reward",
    "value": 0.222056014
  },
  {
    "source": "Impressions GSP Cash Reward",
    "target": "Impressions Bing Search Non Offer",
    "value": 0.024422372
  },
  {
    "source": "Impressions GSP Cash Reward",
    "target": "Impressions Google Search Non Offer",
    "value": 0.849572594
  },
  {
    "source": "Impressions GSP Cash Reward",
    "target": "Impressions Natural Search",
    "value": 0.737379232
  },
  {
    "source": "Impressions LinkedIn Cash Reward",
    "target": "Impressions LinkedIn Non Offer",
    "value": 0.561397782
  },
  {
    "source": "Impressions LinkedIn Cash Reward",
    "target": "Impressions Bing Search Cash Reward",
    "value": 0.044427047
  },
  {
    "source": "Impressions LinkedIn Cash Reward",
    "target": "Impressions Bing Search Non Offer",
    "value": 0.009614199
  },
  {
    "source": "Impressions LinkedIn Cash Reward",
    "target": "Impressions Google Search Cash Reward",
    "value": 0.669694589
  },
  {
    "source": "Impressions LinkedIn Cash Reward",
    "target": "Impressions Google Search Non Offer",
    "value": 0.126600485
  },
  {
    "source": "Impressions LinkedIn Cash Reward",
    "target": "Impressions Natural Search",
    "value": 0.203491111
  },
  {
    "source": "Impressions LinkedIn Cash Reward",
    "target": "Click LinkedIn Cash Reward",
    "value": 0.853121019
  },
  {
    "source": "Impressions LinkedIn Non Offer",
    "target": "Impressions Natural Search",
    "value": 0.019253398
  },
  {
    "source": "Impressions LinkedIn Non Offer",
    "target": "Click LinkedIn No Offer",
    "value": 0.916839455
  },
  {
    "source": "Impressions Bing Search Cash Reward",
    "target": "Impressions Bing Search Non Offer",
    "value": 0.987036683
  },
  {
    "source": "Impressions Bing Search Cash Reward",
    "target": "Click Bing Search Cash Reward",
    "value": 0.775570828
  },
  {
    "source": "Impressions Bing Search Non Offer",
    "target": "Impressions Google Search Cash Reward",
    "value": 0.132941689
  },
  {
    "source": "Impressions Bing Search Non Offer",
    "target": "Impressions Google Search Non Offer",
    "value": 0.061078561
  },
  {
    "source": "Impressions Bing Search Non Offer",
    "target": "Click Bing Search Non Offer",
    "value": 0.81054064
  },
  {
    "source": "Impressions Google Search Cash Reward",
    "target": "Impressions Google Search Non Offer",
    "value": 0.110594733
  },
  {
    "source": "Impressions Google Search Cash Reward",
    "target": "Click Google Search Cash Reward",
    "value": 0.364364091
  },
  {
    "source": "Impressions Google Search Non Offer",
    "target": "Impressions Natural Search",
    "value": 0.009227584
  },
  {
    "source": "Impressions Google Search Non Offer",
    "target": "Click Google Search Non Offer",
    "value": 0.456888086
  },
  {
    "source": "Impressions Natural Search",
    "target": "Click Natural Search",
    "value": 0.744030783
  },
  {
    "source": "Click GDN Cash Reward",
    "target": "Impressions LinkedIn Remarketing",
    "value": 0.49778948
  },
  {
    "source": "Click GDN Cash Reward",
    "target": "Paid Leads",
    "value": 0.019277096
  },
  {
    "source": "Click LinkedIn Cash Reward",
    "target": "LinkedIn Leads",
    "value": 0.376274951
  },
  {
    "source": "Click LinkedIn No Offer",
    "target": "LinkedIn Leads",
    "value": -0.047450039
  },
  {
    "source": "Click Bing Search Non Offer",
    "target": "Paid Leads",
    "value": -0.014416807
  },
  {
    "source": "Click Google Search Cash Reward",
    "target": "Impressions LinkedIn Remarketing",
    "value": 0.004251087
  },
  {
    "source": "Click Google Search Cash Reward",
    "target": "Paid Leads",
    "value": 0.122052343
  },
  {
    "source": "Click Google Search Non Offer",
    "target": "Paid Leads",
    "value": 0.127178671
  },
  {
    "source": "Click Natural Search",
    "target": "Natural Search Leads",
    "value": 0.121579969
  },
  {
    "source": "Impressions LinkedIn Remarketing",
    "target": "Click LinkedIn Remarketing",
    "value": 0.953461017
  },
  {
    "source": "Click LinkedIn Remarketing",
    "target": "LinkedIn Leads",
    "value": 0.291926003
  }
]}

index.html

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

.legend rect {
  fill:white;
  stroke:black;
  opacity:0.8;}

  </style>
</head>
  <body>
<h3 align='center'>Inner Model</h3>
<svg id='viz'></svg>
<div align='center'>
<p>1. Scroll to Zoom In/Out <br>
2. Hover on the Nodes to select neighbouring Nodes <br>
3. Hover on the Paths to see the Path Coefficients <br>
4. Click and drag nodes to drag at places<br>
5. Click and drag anywhere to drag the full graph
</div>

<script src='https://d3js.org/d3.v5.min.js'></script>
<!-- <script src='./d3.v5.js'></script> -->
<script src="d3.legend.js"></script>
<script>
var width = 900;
var height = 500;
var color = d3.scaleOrdinal(d3.schemeCategory10);

d3.json("force_directed_graph_2.json").then(function(graph) {

var label = {
    'nodes': [],
    'links': []
};

graph.nodes.forEach(function(d, i) {
    label.nodes.push({node: d});
    label.nodes.push({node: d});
    label.links.push({
        source: i * 2,
        target: i * 2 + 1
    });
});

var labelLayout = d3.forceSimulation(label.nodes)
	// push nodes apart to space them out
    .force("charge", d3.forceManyBody().strength(-50))
	// pull nodes together based on the links between them
    .force("link", d3.forceLink(label.links).distance(0).strength(2));

var graphLayout = d3.forceSimulation(graph.nodes)
    .force("charge", d3.forceManyBody().strength(-3000))
	// and draw them around the centre of the space
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("x", d3.forceX(width / 2).strength(1))
    .force("y", d3.forceY(height / 2).strength(1))
    .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1))
    .on("tick", ticked);

var adjlist = [];

graph.links.forEach(function(d) {
    adjlist[d.source.index + "-" + d.target.index] = true;
    adjlist[d.target.index + "-" + d.source.index] = true;
});

function neigh(a, b) {
    return a == b || adjlist[a + "-" + b] ;
}


var svg = d3.select("#viz").attr("width", width).attr("height", height).style("padding-left", "50px");
var container = svg.append("g");

svg.call(
    d3.zoom()
        .scaleExtent([.1, 4])
        .on("zoom", function() { container.attr("transform", d3.event.transform); })
);

// build the arrow.
	svg.append("defs").selectAll("marker")
    .data(["end"])      
	.enter() // Different link/path types can be defined here
	.append("marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 1.75)
    .attr("markerHeight", 1.75)
    .attr("orient", "auto")
	.attr("xoverflow", "visible")
	.append("svg:path")
    .attr("d", "m0,-5L10,0L0,5");

var link = container.append("g").attr("class", "links")
    .selectAll("path")
    .data(graph.links)
    .enter()
    .append("path")
    .attr("stroke", "#778899")
    .attr("stroke-width", function(d){ return Math.sqrt(d.value * 100)})
	.attr("marker-mid", "url(#end)")
	.style("fill", "none")
	
	link.append("title")
	.text(function (d){ return d.value;});

var node = container.append("g").attr("class", "nodes")
    .selectAll("g")
    .data(graph.nodes)
    .enter()
    .append("circle")
    .attr("r", 15)
    .attr("fill", function(d) { return color(d.group); })
	
node.on("mouseover", focus).on("mouseout", unfocus);

node.call(
    d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
);

// for putting lable on nodes
var labelNode = container.append("g").attr("class", "labelNodes")
    .selectAll("text")
    .data(label.nodes)
    .enter()
    .append("text")
    .text(function(d, i) { return i % 2 == 0 ? "" : d.node.id; })
	.attr("text-anchor", "left")
	//.attr('x', function(d) {return d.x})
	//.attr('y', function(d) {return d.y})
    .style("fill", "#555")
    .style("font-family", "Arial")
    .style("font-size", 12)
    .style("pointer-events", "none") // to prevent mouseover/drag capture
	.style("font-weight", "bold");

	legend = container.append("g").attr("class", "legend")
	.attr("transform", "translate(50,30)")
	.style("font-size", "12px")
	.call(d3.legend)
	
// For Putting coefficients on path
//var	edgepaths = container.append("g").attr("class", "edgepath")
//	.selectAll(".edgepath")
//    .data(label.links)
//    .enter()
//    .append("path")
//    .attr("fill-opacity", 0)
//    .attr("stroke-opacity", 0)
//	.attr("id", function (d, i) {return "edgepath" + i})
//    .style("pointer-events", "none");

//var edgelabels = container.append("g").attr("class", "edgelabel")
//	.selectAll(".edgelabel")
//    .data(label.links)
//    .enter()
//    .append("text")
//    .style("pointer-events", "none")
//    .attr("id", function (d, i) {return "edgelabel" + i})
//    .attr("font-size", 10)
//    .attr("fill", "#aaa");

//	edgelabels.append('textPath')
//            .attr('xlink:href', function (d, i) {return '#edgepath' + i})
//            .style("text-anchor", "middle")
//            .style("pointer-events", "none")
//            .attr("startOffset", "50%")
//           .text(function (d) {return d.value});
	
//node.on("mouseover", focus).on("mouseout", unfocus);

function ticked() {

    node.call(updateNode);
    link.call(updateLink);

    labelLayout.alphaTarget(0.3).restart();
    labelNode.each(function(d, i) {
        if(i % 2 == 0) {
            d.x = d.node.x;
            d.y = d.node.y;
        } else {
            var b = this.getBBox();

            var diffX = d.x - d.node.x;
            var diffY = d.y - d.node.y;

            var dist = Math.sqrt(diffX * diffX + diffY * diffY);

            var shiftX = b.width * (diffX - dist) / (dist * 2);
            shiftX = Math.max(-b.width, Math.min(0, shiftX));
            var shiftY = 16;
            this.setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
        }
    });
    labelNode.call(updateNode);
//	edgepaths.call(updateEdge);
//	edgelabels.call(updateLabels);
}

function fixna(x) {
    if (isFinite(x)) return x;
    return 0;
}

function focus(d) {
    var index = d3.select(d3.event.target).datum().index;
    node.style("opacity", function(o) {
        return neigh(index, o.index) ? 1 : 0.1;
    });
    labelNode.attr("display", function(o) {
      return neigh(index, o.node.index) ? "block": "none";
    });
    link.style("opacity", function(o) {
        return o.source.index == index || o.target.index == index ? 1 : 0.1;
    });
}

function unfocus() {
   labelNode.attr("display", "block");
   node.style("opacity", 1);
   link.style("opacity", 1);
}

function updateLink(link) {
// For Curved Line
	link.attr("d", function(d) {
	var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + 
            fixna(d.source.x) + "," + 
            fixna(d.source.y) + "A" + 
            dr + "," + dr + " 0 0,1 " + 
            fixna(d.target.x) + "," + 
            fixna(d.target.y);
	});
}
// For Simple Line
	//link.attr("x1", function(d) { return fixna(d.source.x); })
    //    .attr("y1", function(d) { return fixna(d.source.y); })
    //    .attr("x2", function(d) { return fixna(d.target.x); })
    //    .attr("y2", function(d) { return fixna(d.target.y); });

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

//function updateEdge(link){
//	link.attr('d', function (d) {
//            return 'M ' + fixna(d.source.x) + ' ' + fixna(d.source.y) + ' L ' + fixna(d.target.x) + ' ' + fixna(d.target.y);
//        });
//}

//function updateLabels(link){
//	link.attr('transform', function (d) {
//        if (d.target.x < d.source.x) {
//        var bbox = this.getBBox();
//
//            rx = bbox.x + bbox.width / 2;
//            ry = bbox.y + bbox.height / 2;
//            return 'rotate(180 ' + rx + ' ' + ry + ')';
//        }
//       else {
//            return 'rotate(0)';
//        }
//    });
//}

function dragstarted(d) {
    d3.event.sourceEvent.stopPropagation();
    if (!d3.event.active) graphLayout.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;
}

function dragended(d) {
    if (!d3.event.active) graphLayout.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}
}); // d3.json
</script>
</body>