Skip to content

Instantly share code, notes, and snippets.

@nivas8292

nivas8292/README.MD

Last active November 5, 2018 07:44
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nivas8292/5acca8da1517b1309ae2 to your computer and use it in GitHub Desktop.
Save nivas8292/5acca8da1517b1309ae2 to your computer and use it in GitHub Desktop.
Download ZIP
Force Layout - Directed Graph with Customized Node and Link
Raw
README.MD

This is a slight varation of example given by mbostock

Click on the Nodes to Zoom in. Double Click on the Nodes to Zoom out.

Raw
data.csv
source target value
Harry Sally 1.2
Harry Mario 1.3
Sarah Alice 0.2
Eveie Alice 0.5
Peter Alice 1.6
Mario Alice 0.4
James Alice 0.6
Harry Carol 0.7
Harry Nicky 0.8
Bobby Frank 0.8
Alice Mario 0.7
Harry Lynne 0.5
Sarah James 1.9
Roger James 1.1
Maddy James 0.3
Sonny Roger 0.5
James Roger 1.5
Alice Peter 1.1
Johan Peter 1.6
Alice Eveie 0.5
Harry Eveie 0.1
Eveie Harry 2.0
Henry Mikey 0.4
Elric Mikey 0.6
James Sarah 1.5
Alice Sarah 0.6
James Maddy 0.5
Peter Johan 0.7
Raw
index.html
<html>
<head>
<title>D3 Force Layout Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
circle {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
</style>
</head>
<body>
<script>
var w = 800;
var h = 450;
var margin = {
top: 20,
bottom: 20,
left: 20,
right: 20
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("id", "chart")
.attr("height", h)
.attr("width", w);
var linkScale = d3.scale.linear()
.range([0.25, 1.0]);
var colorScale = d3.scale.category20();
d3.csv("data.csv", function (error, links) {
var nodes = {};
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});
link.value = +link.value;
});
linkScale.domain(d3.extent(links, function (d) {
return d.value;
}));
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();
svg.append("svg:defs").selectAll('marker')
.data(['end'])
.enter()
.append("svg:marker")
.attr('id', function (d) {
return d;
})
.attr('viewBox', '0 -5 10 10')
.attr('refX', 15)
.attr('refY', -1.5)
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.append('svg:path')
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter()
.append("svg:path")
.classed("link", true)
.attr("marker-end", "url(#end)");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter()
.append("g")
.classed("node", true)
.on("click", click)
.on("dblclick", dblclick)
.call(force.drag());
node.append("circle")
.attr("r", 5)
.style("fill", function (d) {
return colorScale(d.name)
});
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function (d) {
return d.name;
});
function tick() {
path.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" +
d.source.x + "," + d.source.y +
"A" + dr + "," + dr + " 0 0,1 " +
d.target.x + "," + d.target.y;
}).style("opacity", function (d) {
return linkScale(d.value);
});
node.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
function click() {
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 22)
.style("fill", "steelblue")
.style("stroke", "lightsteelblue")
.style("stroke-width", ".5px")
.style("font", "20px sans-serif");
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function dblclick() {
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 12)
.style("fill", "black")
.style("stroke", "none")
.style("stroke-width", "none")
.style("font", "10px sans-serif");
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 6);
}
});
</script>
</body>
</html>
Raw
main.css
body, html {
margin:0;
padding:0;
font-family:"Arial", sans-serif;
font-size:0.95em;
text-align:center;
}
#chart {
background-color:#F5F2EB;
border: 1px solid #CCC;
}
.bar {
fill:purple;
shape-rendering:crispEdges;
}
.bar-label {
text-anchor:end;
fill:white;
}
.axis path,
.axis line {
fill:none;
stroke:#000;
shape-rendering:crispEdges;
}
.gridline path,
.gridline line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.trendline {
fill: none;
stroke: #ccc;
stroke-width: 2;
/*stroke-dasharray:10;*/
}
.area {
fill: #ccc;
stroke: #ccc;
opacity: 0.25;
}
.donut {
opacity:0.1;
}
.axis-label {
text-anchor: middle;
}
.chart-header {
text-transform: capitalize;
font-size: 110%;
}
.temperature {
stroke:#95cddf;
stroke-width:2px;
}
.rain {
fill:none;
stroke:#cc627a;
stroke-width:0.5;
}
#cursor {
stroke: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment