Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON

Developer
Dzulfikar Adi Putra
Size
6,536 Kb
Views
46,552
  1. Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON Previews
  2. Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON HTML Codes
  3. Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON CSS Codes
  4. Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON JS Codes

How do I make an force layout directed graph using dot engine dagre-d3js library, data from json?

Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON . What is a force layout directed graph using dot engine dagre-d3js library, data from json? How do you make a force layout directed graph using dot engine dagre-d3js library, data from json? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.

Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON Previews
IQ Test

Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON </title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class=""> <h3>Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON </h3> <small><i>Scroll the mouse to adjust zoom level. Click on node or arcs to display some information.</i> </small> <h4>this part try using less</h4> <div id="content-graph" class="col-md-10 col-sm-10"> <div id="zoom-indicator">zoom : <span>100</span>% </div> </div> <div id="legends" class="col-md-2 col-sm-2"> <div id="legend-vertex" class="col-md-6"> Max Node Value </div> <div id="legend-edgepath" class="col-md-6"> Max Edge Value </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> modal body </div> </div> </div> </div> </div> </div> <div class="row"> <div id="json-data" class="col-md-6 col-sm-6"> <br/> JSON data from here <a href="https://codepen.io/superpikar/pen/LnHgD.js">https://codepen.io/superpikar/pen/LnHgD.js</a> <br/> <pre> { "resourceId": 1400027639, "type": "ProcessModel", "nodes": { "Register": 1103, "Analyze Defect": 2206, "Repair (Complex)": 1447, "Test Repair": 3012, "Inform User": 1101, "Archive Repair": 999, "Repair (Simple)": 1568, "Restart Repair": 405 }, "mynodes": [ {"name":"Register", "frequency": 1103}, {"name":"Analyze Defect", "frequency": 2206}, {"name":"Repair (Complex)", "frequency": 1447}, {"name":"Test Repair", "frequency": 3012}, {"name":"Inform User", "frequency": 1101}, {"name":"Archive Repair", "frequency": 999}, {"name":"Repair (Simple)", "frequency": 1568}, {"name":"Restart Repair", "frequency": 405} ], "arcs": [ { "from": "Register", "to": "Analyze Defect", "frequency": 1103, "dependency": 0 }, { "from": "Analyze Defect", "to": "Analyze Defect", "frequency": 1103, "dependency": 0 }, { "from": "Analyze Defect", "to": "Repair (Complex)", "frequency": 528, "dependency": 0 }, { "from": "Analyze Defect", "to": "Repair (Simple)", "frequency": 420, "dependency": 0 }, { "from": "Analyze Defect", "to": "Inform User", "frequency": 155, "dependency": 0 }, { "from": "Repair (Complex)", "to": "Repair (Complex)", "frequency": 414, "dependency": 0 }, { "from": "Repair (Complex)", "to": "Test Repair", "frequency": 719, "dependency": 0 }, { "from": "Repair (Complex)", "to": "Inform User", "frequency": 312, "dependency": 0 }, { "from": "Test Repair", "to": "Test Repair", "frequency": 1331, "dependency": 0 }, { "from": "Test Repair", "to": "Inform User", "frequency": 472, "dependency": 0 }, { "from": "Test Repair", "to": "Restart Repair", "frequency": 340, "dependency": 0 }, { "from": "Test Repair", "to": "Archive Repair", "frequency": 794, "dependency": 0 }, { "from": "Inform User", "to": "Archive Repair", "frequency": 205, "dependency": 0 }, { "from": "Inform User", "to": "Repair (Simple)", "frequency": 223, "dependency": 0 }, { "from": "Inform User", "to": "Repair (Complex)", "frequency": 401, "dependency": 0 }, { "from": "Inform User", "to": "Test Repair", "frequency": 180, "dependency": 0 }, { "from": "Inform User", "to": "Restart Repair", "frequency": 65, "dependency": 0 }, { "from": "Repair (Simple)", "to": "Repair (Simple)", "frequency": 625, "dependency": 0 }, { "from": "Repair (Simple)", "to": "Test Repair", "frequency": 782, "dependency": 0 }, { "from": "Repair (Simple)", "to": "Inform User", "frequency": 161, "dependency": 0 }, { "from": "Restart Repair", "to": "Repair (Simple)", "frequency": 300, "dependency": 0 }, { "from": "Restart Repair", "to": "Repair (Complex)", "frequency": 104, "dependency": 0 }, { "from": "Restart Repair", "to": "Inform User", "frequency": 1, "dependency": 0 } ]
} </pre> </div> <div id="more-info" class="col-md-6 col-sm-6"> <br/> List of Nodes : <ul id="nodes"></ul> List of Links : <ul id="links"></ul> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='https://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js'></script>
<script src='https://raw.githubusercontent.com/trinary/d3-transform/master/src/d3-transform.js'></script> <script src="js/index.js"></script>
</body>
</html>

Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON - Script Codes CSS Codes

.container { padding: 50px;
}
.vertex rect { stroke: #afc6e9; stroke-width: 2px; fill: #214478;
}
.vertex:hover rect { fill: #ff7f2a;
}
.vertex-clicked rect { stroke: #5a606e; fill: #5a606e;
}
#legends { width: 140px;
}
.legends-box { width: 50px; padding: 5px 0 10px; border: 1px solid;
}
.vertex-range-1 { background: #2c5ba0;
}
.vertex-range-1 rect { fill: #2c5ba0;
}
.vertex-range-1 tspan { fill: white;
}
.edgePath-range-1 { background: #6c6c6c;
}
.edgePath-range-1 path { stroke-width: 3px; fill: none; stroke: #6c6c6c;
}
.vertex-range-2 { background: #3771c8;
}
.vertex-range-2 rect { fill: #3771c8;
}
.vertex-range-2 tspan { fill: white;
}
.edgePath-range-2 { background: #8a8a8a;
}
.edgePath-range-2 path { stroke-width: 3px; fill: none; stroke: #8a8a8a;
}
.vertex-range-3 { background: #5f8ed3;
}
.vertex-range-3 rect { fill: #5f8ed3;
}
.vertex-range-3 tspan { fill: white;
}
.edgePath-range-3 { background: #a9a9a9;
}
.edgePath-range-3 path { stroke-width: 3px; fill: none; stroke: #a9a9a9;
}
.vertex-range-4 { background: #87aade;
}
.vertex-range-4 rect { fill: #87aade;
}
.edgePath-range-4 { background: #c7c7c7;
}
.edgePath-range-4 path { stroke-width: 3px; fill: none; stroke: #c7c7c7;
}
.vertex-range-5 { background: #afc6e9;
}
.vertex-range-5 rect { fill: #afc6e9;
}
.edgePath-range-5 { background: #e6e6e6;
}
.edgePath-range-5 path { stroke-width: 3px; fill: none; stroke: #e6e6e6;
}
.edgeLabel rect { fill: #fff;
}
.edgePath path:hover { stroke-width: 3px; fill: none; stroke: #ff9955;
}
.edgePath-repeat path { stroke-width: 3px; fill: none; stroke: #2ca02c;
}
.edgePath-clicked path { stroke: #5a606e; fill: none;
}

Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON - Script Codes JS Codes

/* this is d3js part */
var width=800, height=500;
// Create a new directed graph
var g = new dagreD3.Digraph();
var zoom = d3.behavior.zoom() .scaleExtent([0.5, 2]) .on("zoom", zoomed);
var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended);
var svg = d3.select("#content-graph").append("svg") .attr("width", width) .attr("height", height) .call(zoom);
var container = svg.append("g");
var layout = dagreD3.layout() //.nodeSep(10) //.edgeSep(10) .rankSep(30) .rankDir("TB");
var renderer = new dagreD3.Renderer() .edgeInterpolate("cardinal") .edgeTension(0.8) ;
d3.json("https://codepen.io/superpikar/pen/LnHgD.js", function(error, graph){ var nodes = graph.nodes; var links = graph.arcs; for(node in nodes){ g.addNode( node,{ label: node+" | "+nodes[node] }); $("#nodes").append("<li>"+node+"</li>"); } links.forEach(function(link,i){ g.addEdge(link.from+"_to_"+link.to, link.from, link.to, { label: link.frequency.toString() }); $("#links").append("<li>"+link.from+" to "+link.to+"</li>"); }); var oldDrawNodes = renderer.drawNodes(); renderer.drawNodes(function(graph, root) { var svgNodes = oldDrawNodes(graph, root); svgNodes.attr("id", function(u) { return removeSpecialChar(u); }); svgNodes.attr("class", "vertex enter"); return svgNodes; }); var oldDrawEdgePaths = renderer.drawEdgePaths(); renderer.drawEdgePaths(function(graph, root) { var svgEdgePaths = oldDrawEdgePaths(graph, root); svgEdgePaths.attr("id", function(u) { return removeSpecialChar(u); }); return svgEdgePaths; }); var oldDrawEdgeLabels = renderer.drawEdgeLabels(); renderer.drawEdgeLabels(function(graph, root) { var svgEdgeLabels = oldDrawEdgeLabels(graph, root); svgEdgeLabels.attr("id", function(u) { return "label_"+removeSpecialChar(u); }); return svgEdgeLabels; }); renderer.layout(layout).run(g, d3.select("svg g")); // add data attribute for node var nodeFrequency = []; for(node in nodes){ var name = "g#"+removeSpecialChar(node); var name2 = "g#"+removeSpecialChar(node)+" g text"; d3.select(name) .attr("data-frequency", nodes[node]); nodeFrequency.push(nodes[node]); } var linkFrequency = []; links.forEach(function(link,i){ var name = link.from+" to "+link.to; var elem = d3.select("g#"+removeSpecialChar(name)); elem.attr("data-name", name) .attr("data-from", removeSpecialChar(link.from)) .attr("data-to", removeSpecialChar(link.to)) .attr("data-frequency", link.frequency); if(link.to == link.from){ elem.classed({"edgePath-repeat":true}); var source = getNodePosition(elem.attr("data-from")); var recWidth = d3.select("#"+removeSpecialChar(link.from)+" rect").attr("width")/1.8; var arc = {radius:40, degStart:130, degEnd:440}; elem.select("path").attr("data-x", source.x); elem.select("path").attr("d", describeArc(source.x-recWidth, source.y, arc.radius, arc.degStart, arc.degEnd)); d3.select("#label_"+removeSpecialChar(name)) .attr("transform", function(d,i){ return "translate ("+(source.x-recWidth-arc.radius)+","+source.y+")"; }); } linkFrequency.push(link.frequency); }); //console.log(linkFrequency); var maxNodeFrequency = d3.max(nodeFrequency); var minNodeFrequency = d3.min(nodeFrequency); var maxLinkFrequency = d3.max(linkFrequency); var minLinkFrequency = d3.min(linkFrequency); var nodeRange = setRangeColor(minNodeFrequency, maxNodeFrequency, ["vertex-range-1", "vertex-range-2", "vertex-range-3", "vertex-range-4", "vertex-range-5"]); var linkRange = setRangeColor(minLinkFrequency, maxLinkFrequency, ["edgePath-range-1", "edgePath-range-2","edgePath-range-3","edgePath-range-4", "edgePath-range-5"]); displayLegendBox("#legend-vertex", nodeRange); displayLegendBox("#legend-edgepath", linkRange); var a = function(){ return "vertex enter"; } // display modal on node click d3.selectAll("g.vertex") .attr("class", function(){ return getClassRange($(this).attr("data-frequency"), nodeRange)+" vertex enter"; }) //classed({"node":true, "enter":true}) .on("click", function(){ $('#myModal').modal(); var title = $(this).find("g text tspan").text(); var content = "frequency : "+$(this).attr("data-frequency"); setModal(title, content); d3.select(this) .classed({"vertex-clicked":true}); }) ; // display modal on node click d3.selectAll("g.edgePath") .attr("class", function(){ return getClassRange($(this).attr("data-frequency"), linkRange)+" "+$(this).attr("class"); }) .on("click", function(){ $('#myModal').modal(); var title = $(this).attr("data-name"); var content = "frequency : "+$(this).attr("data-frequency"); setModal(title, content); d3.select(this).classed({"edgePath-clicked":true}); }) ; d3.select("#myModal").on("click", function(){ d3.select(".node-clicked").classed({"node-clicked":false}); d3.select(".edgePath-clicked").classed({"edgePath-clicked":false}); });
});
function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) };
}
function describeArc(x, y, radius, startAngle, endAngle){ var start = polarToCartesian(x, y, radius, endAngle); var end = polarToCartesian(x, y, radius, startAngle); var arcSweep = endAngle - startAngle <= 180 ? "0" : "1"; var d = [ "M", start.x, start.y, "A", radius, radius, 0, arcSweep, 0, end.x, end.y ].join(" "); return d;
}
function getNodePosition(nodeId){ var node = d3.select("#"+nodeId), strPos = node.attr("transform").match(/\(([^)]+)\)/)[1], thePos = strPos.split(","); return {x:parseInt(thePos[0]), y:parseInt(thePos[1])};
}
function drawLinkArc(source, target) { var dx = target.x - source.x, dy = target.y - source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + source.x + "," + source.y + "A" + dr + "," + dr + " 0 0,1 " + target.x + "," + target.y;
}
function displayLegendBox(elem, objRange){ d3.select(elem) .selectAll('div') .data(objRange) .enter() .append("div") .attr("class", function(d){ return d.theClass; }) .classed({"legends-box":true}) .text(function(d){ return d.max; });
}
/* set color range by input value */
function setRangeColor(minValue, maxValue, arrClass){ var diff = Math.round(maxValue/arrClass.length); var count=0; var result = []; arrClass.reverse().forEach(function(d, i){ if(i==0){ result.push({min:0, max:diff, theClass:d}); } else if(i == arrClass.length - 1){ result.push({min:count+1, max:maxValue, theClass:d}); } else{ result.push({min:count+1, max:count+diff, theClass:d}); } count += diff; }); return result.reverse();
}
/* get Class Range by current value */
function getClassRange(val, arrRange){ var result; arrRange.forEach(function(d,i){ if(i != arrRange.length){ if(val<= d.max) result = d.theClass } }); return result;
}
function setModal(title, content){ $('#myModal h4').text(title); $('#myModal .modal-body').text(content);
}
function removeSpecialChar(theString){ return theString.replace(/[^A-Z0-9]+/ig, "_");
}
function zoomed() { container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); zoomIndicator("#zoom-indicator span",d3.event.scale );
}
function zoomIndicator(elem, zoomScale){ var calculate = zoomScale.toPrecision(2)*100; $(elem).html(calculate);
}
function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true);
}
function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) { d3.select(this).classed("dragging", false);
}
Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON - Script Codes
Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON - Script Codes
Home Page Home
Developer Dzulfikar Adi Putra
Username superpikar
Uploaded September 06, 2022
Rating 3
Size 6,536 Kb
Views 46,552
Do you need developer help for Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dzulfikar Adi Putra (superpikar) Script Codes
Name
Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object
D3JS Simple JSON SVG barchart vertical
A Pen by Dzulfikar Adi Putra
Multiple Expand Collapse
Image Map
SVG Animation Follow Path - d3js
JS Tree Example JSON Data
Centering Image and Icon in Semantic-UI card
Bulma breadcrumbs
Expand and collapse element using jquery expander
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!