Skip to content

Instantly share code, notes, and snippets.

@tejastank

tejastank/index.html

Forked from revskill10/index.html
Created February 21, 2017 09:12
Show Gist options
  • Save tejastank/d745ebbce4fed01f99904d7d2ec80911 to your computer and use it in GitHub Desktop.
Save tejastank/d745ebbce4fed01f99904d7d2ec80911 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js drawing nodes and links from json structure
Raw
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tags</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="d3.v2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {$('.resizable').resize(); })
});
</script>
<style type="text/css">
circle.node {
stroke: #fff;
stroke-width: 1.5px;
}
line.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<svg id="tags" width="100%" height="1600">
<defs>
<marker id="arrow" viewbox="0 -5 10 10" refX="15" refY="-0.5"
markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,-5L10,0L0,5Z">
</marker>
</defs>
</svg>
<div id="text"></div>
</body>
</html>
Raw
main.js
var w = $('#tags').width(), h = $('#tags').height();
var fill = d3.scale.category10();
var vis = d3.select('#tags').append("svg:g");
d3.json("tags.json", function(json) {
var force = d3.layout.force()
.charge(-3000)
.distance(200)
.gravity(0.2)
.nodes(json.nodes)
.links(json.links)
.size([700, 1500])
.start();
var link = vis.selectAll('line.link')
.data(json.links)
.enter().append('svg:line')
.attr("class", "link")
.attr("marker-end", "url(#arrow)")
.attr("stroke", "red")
.style('stroke-width', 2)
.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; });
var node = vis.selectAll("circle.node")
.data(json.nodes)
.enter().append("svg:circle")
.attr("class", "node")
.attr("name", function(d) { return d.name; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 40)
.style("fill", function(d) { return fill(d.color); })
.on('dblclick', function(d) {
alert(d.name);}
)
.call(force.drag);
var text = vis.selectAll("text")
.data(json.nodes)
.enter().append("svg:text")
.attr("x", function(d) { return d.x ; })
.attr("y", function(d) { return d.y -10; })
.attr("stroke", function(d) { return fill(d.color); })
.text(function(d) { return d.name; })
.attr("font-size","40")
.call(force.drag);
node.append('title')
.text(function(d) { return d.name; });
force.on("tick", function(e) {
node.each(function(d) {
d.x += ((5-d.group) * 350 - d.x) ;
d.x = 1500 - d.x;
});
text.each(function(d) {
d.x += ((5-d.group) * 350 - d.x) ;
d.x = 1500 - d.x;
});
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("cx", function(d) { return d.x ; })
.attr("cy", function(d) { return d.y; });
text.attr("x", function(d) { return d.x ; })
.attr("y", function(d) { return d.y; });
});
});
Raw
server.js
var express = require("express"),
app = express(),
port = parseInt(process.env.PORT, 10) || 4567;
app.get("/", function(req, res) {
res.redirect("/index.html");
});
app.configure(function(){
app.use(express.methodOverride());
app.use(express.bodyParser());
app.use(express.static(__dirname + '/public'));
app.use(express.errorHandler({
dumpExceptions: true,
showStack: true
}));
app.use(app.router);
});
app.listen(port);
Raw
tags.json
{
"nodes": [
{ "name": "Ma1", "group": 1, "color": 1 },
{ "name": "1", "group": 1, "color": 1 },
{ "name": "2", "group": 1, "color": 1 },
{ "name": "3", "group": 1 , "color": 2 },
{ "name": "4", "group": 1, "color": 2 },
{ "name": "5", "group": 1, "color": 2 },
{ "name": "6", "group": 1, "color": 2 },
{ "name": "7", "group": 2 , "color": 3 },
{ "name": "8", "group": 2, "color": 3 },
{ "name": "9", "group": 2 , "color": 3 },
{ "name": "10", "group": 2 , "color": 3 },
{ "name": "11", "group": 3 , "color": 3 },
{ "name": "12", "group": 4 , "color": 3 },
{ "name": "13", "group": 4 , "color": 4 } ,
{ "name": "14", "group": 4 , "color": 4 },
{ "name": "15", "group": 4 , "color": 4 },
{ "name": "16", "group": 4 , "color": 4 },
{ "name": "17", "group": 5 , "color": 4 },
{ "name": "18", "group": 5 , "color": 5 },
{ "name": "19", "group": 5 , "color": 5 }
],
"links": [
{ "source": 6, "target": 16, "value" : 1 },
{ "source": 0, "target": 7, "value" : 2 },
{ "source": 0, "target": 10, "value" : 2 },
{ "source": 1, "target": 8, "value" : 4 },
{ "source": 11, "target": 13, "value" : 5 },
{ "source": 11, "target": 14, "value" : 6 },
{ "source": 9, "target": 11, "value" : 6},
{ "source": 13, "target": 16, "value" : 7},
{ "source": 13, "target": 18, "value" : 7}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment