D3 Examples - Force Directed Graph

xxxxxxxxxx
 
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Force Directed Graph</title>
​
<!-- JavaScript Libraries //-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<link href="d3-tip.css" rel="stylesheet" type="text/css">
​
<!-- CSS Style //-->
<link href="style.css" rel="stylesheet" type="text/css">
​
<script type="text/javascript" src="main.js"></script>
</head>
​
<body>
    <div style="margin:16px;" class="forceDirectedChart"></div>
</body>
<script>
​
    var inputData = [];
    inputData.push({source:"Positive Cashflow",target:"Wallet",type:"positive_cashflow",value:1000});
    inputData.push({source:"Positive Cashflow",target:"Bank",type:"positive_cashflow",value:4000});
    inputData.push({source:"Positive Cashflow",target:"Government",type:"positive_cashflow",value:5000});
    inputData.push({source:"Positive Cashflow",target:"eCommerce",type:"positive_cashflow",value:500});
​
    inputData.push({source:"Negative Cashflow",target:"Telecom",type:"negative_cashflow",value:500});
    inputData.push({source:"Negative Cashflow",target:"Wallet",type:"negative_cashflow",value:1500});
    inputData.push({source:"Negative Cashflow",target:"Bank",type:"negative_cashflow",value:5000});
    inputData.push({source:"Negative Cashflow",target:"Food",type:"negative_cashflow",value:2500});
​
    var totalMaxValue = 20000;
​
    var defaultColorScheme = ["#E57373","#BA68C8","#7986CB","#A1887F","#90A4AE","#AED581","#9575CD","#FF8A65","#4DB6AC","#FFF176","#64B5F6","#00E676"];
​
    renderForceDirectedGraph (inputData,totalMaxValue,".forceDirectedChart", true, defaultColorScheme, "Person")</script>
</html>
    