Skip to content

Instantly share code, notes, and snippets.

@sushant-hiray

sushant-hiray/index.html

Last active December 31, 2015 12:39
Show Gist options
  • Save sushant-hiray/7988082 to your computer and use it in GitHub Desktop.
Save sushant-hiray/7988082 to your computer and use it in GitHub Desktop.
Download ZIP
A d3.js visualization for our STAB team
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.node,
.leaf {
font: 9px sans-serif;
}
.node circle,
.leaf circle {
fill: #fff;
stroke-width: 1.5px;
}
.node text,
.leaf text {
fill: #aaa !important;
}
.node circle {
stroke: red;
}
.leaf circle {
stroke: steelblue;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
.focus text, .root text {
stroke: #ccc;
stroke-width: 0.2px;
fill: black !important;
font: 13px sans-serif;
}
.focus.current text, .focus.leaf text {
font: 13px sans-serif;
}
.focus .link{
font: 13px sans-serif;
}
.path {
stroke: steelblue;
}
#profiles-loading {
text-align: center !important;
color: #888;
margin-top: 100px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
d3.selection.prototype.moveToFront = function() {
return this.each(function() { this.parentNode.appendChild(this);});
};
function highlight_path(curr_node,i) {
var focus = d3.event.type === 'mouseover' ? true : false;
d3.select(this).classed('current', focus);
while (curr_node.depth>0) {
d3.select('#id-' + curr_node.user_id).classed('path', focus);
d3.select('#node-id-' + curr_node.user_id).classed('focus', focus);
curr_node = curr_node.parent;
}
d3.selectAll('.focus').moveToFront();
}
var diameter = 960;
var tree = d3.layout.tree()
.size([360, diameter / 2 - 120])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
d3.json("stab.json", function(error, root) {
var nodes = tree.nodes(root),
links = tree.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal)
.attr('id', function(d, i) { return 'id-' + d.target.user_id; });
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr('class', function(d, i) {
var node = d.children ? 'node' : 'leaf';
var root = d.parent ? null : 'root';
return node+' '+root;
})
.attr('id', function(d, i) { return 'node-id-' + d.user_id; })
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.on('mouseover', highlight_path)
.on('mouseout', highlight_path);
node.append("circle")
.attr("r", 4.5)
.attr('id', function(d, i) { return 'circle-id-' + d.user_id; });
node.append('a')
.attr('xlink:href', function(d) { return d.url; })
.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.text(function(d) { return d.name; })
.attr('id', function(d, i) { return 'text-id-' + d.user_id; });
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
Raw
stab.json
{
"name": "STAB","user_id":68,"url":"http://stab-iitb.org",
"children": [
{
"name": "WnCC","user_id":0,"url":"http://github.com/wncc",
"children": [
{
"name": "Sushant","user_id":1,"url":"http://facebook.com/sushant.hiray",
"children": [
{"name": "Manish", "size": 3938,"user_id":2,"url":"https://www.facebook.com/manish.goregaokar"},
{"name": "Ranveer", "size": 3812,"user_id":3,"url":"https://www.facebook.com/ranveeraggarwal"},
{"name": "Aditya", "size": 6714,"user_id":4,"url":"https://www.facebook.com/adityakumar.akash"},
{"name": "Prateek", "size": 743,"user_id":5,"url":"https://www.facebook.com/prateekchandan5545"}
]
},
{
"name": "Guna","user_id":11,"url":"https://www.facebook.com/gunaprsd",
"children": [
{"name": "Syamantak", "size": 3534,"user_id":6,"url":"https://www.facebook.com/thesyamantaknaskar?fref=ts"},
{"name": "Pranav", "size": 5731,"user_id":7,"url":"https://www.facebook.com/pranav.tiwari.104?fref=ts"},
{"name": "Sai Priyatham", "size": 7840,"user_id":8,"url":"https://www.facebook.com/kmspriyatham"},
{"name": "Rohit", "size": 3416,"user_id":10,"url":"https://www.facebook.com/rohitkumarbihari?fref=ts"}
]
}
]
},
{
"name": "Elec","user_id":12,"url":"http://stab-iitb.org/electronics-club/",
"children": [
{
"name": "Jayesh","user_id":13,"url":"https://www.facebook.com/profile.php?id=100002530993734&fref=ts",
"children": [
{"name": "Sachin", "size": 3938,"user_id":66,"url":"http://www.facebook.com/sachin.garg1809"},
{"name": "Parth", "size": 3812,"user_id":65,"url":"http://www.facebook.com/parthpandya999?fref=ts"},
{"name": "Deepak", "size": 6714,"user_id":64,"url":"http://www.facebook.com/deepak.sharma124?fref=ts"},
{"name": "Ankita", "size": 6714,"user_id":70,"url":"http://www.facebook.com/ankita.pasad.9?fref=ts"},
{"name": "Samrudh", "size": 6714,"user_id":74,"url":"https://www.facebook.com/samrudh.kelkar?fref=ts"},
{"name": "Bhoumik", "size": 743,"user_id":63,"url":"http://www.facebook.com/Bhoumik.Shah.93?fref=ts"}
]
},
{
"name": "Lalit ","user_id":14,"url":"https://www.facebook.com/lalit0611?fref=ts",
"children": [
{"name": "Sreeja", "size": 3534,"user_id":62,"url":"http://www.facebook.com/sreeja.vasantham?fref=ts"},
{"name": "Pulkit", "size": 5731,"user_id":61,"url":"http://www.facebook.com/pulkit.tandon.18?fref=ts"},
{"name": "Riddhish", "size": 7840,"user_id":60,"url":"http://www.facebook.com/riddhish.bhalodia?fref=ts"},
{"name": "Chirag", "size": 5914,"user_id":59,"url":"http://www.facebook.com/chirag.shetty.144?fref=ts"},
{"name": "Anant", "size": 3416,"user_id":58,"url":"http://www.facebook.com/anant.jaikray?fref=ts"}
]
}
]
},
{
"name": "Robotics","user_id":15,"url":"http://stab-iitb.org/robotics-club/",
"children": [
{
"name": "Himani","user_id":16,"url":"https://www.facebook.com/himani.singhal.7?fref=ts",
"children": [
{"name": "Ankit", "size": 3938,"user_id":57,"url":"https://www.facebook.com/ankit.kumar.5249?fref=ts"},
{"name": "Chetan", "size": 3812,"user_id":56,"url":"https://www.facebook.com/chetan.agrawal.946?fref=ts"},
{"name": "Nimit", "size": 6714,"user_id":55,"url":"https://www.facebook.com/nimit.kumarsingh?fref=ts"},
{"name": "Vineetha", "size": 6714,"user_id":71,"url":"https://www.facebook.com/vineetha.reddy.1?fref=ts"},
{"name": "Kunal", "size": 743,"user_id":54,"url":"https://www.facebook.com/kt.tyagi.kunal?fref=ts"}
]
},
{
"name": "Krishnakant","user_id":17,"url":"https://www.facebook.com/lolwa.saboo?fref=ts",
"children": [
{"name": "Mukul", "size": 3534,"user_id":53,"url":"https://www.facebook.com/mukul.ghan?fref=ts&ref=br_tf"},
{"name": "Agneya", "size": 5731,"user_id":52,"url":"https://www.facebook.com/agneya.loya?fref=ts"},
{"name": "Shardul", "size": 7840,"user_id":51,"url":"https://www.facebook.com/shardul.jade?fref=ts"},
{"name": "Sajal", "size": 3416,"user_id":49,"url":"https://www.facebook.com/sajal147?fref=ts"}
]
}
]
},
{
"name": "Technovation","user_id":18,"url":"http://technovation.stab-iitb.org/",
"children": [
{
"name": "Kunal","user_id":19,"url":"https://www.facebook.com/kunal.phalak?fref=ts",
"children": [
{"name": "Sai Tej", "size": 3534,"user_id":48,"url":"https://www.facebook.com/saitej.tst"},
{"name": "Amit", "size": 5731,"user_id":47,"url":"https://www.facebook.com/amitkohad11356?fref=ts"},
{"name": "Dewashish", "size": 3416,"user_id":44,"url":"https://www.facebook.com/kela.kalu388?fref=ts"}
]
}
]
},
{
"name": "Publi","user_id":20,"url":"#",
"children": [
{
"name": "Anurag","user_id":21,"url":"https://www.facebook.com/anuragmundhada?fref=ts"
},
{
"name": "Pranav","user_id":22,"url":"#"
}
]
},
{
"name": "MnP","user_id":23,"url":"http://stab-iitb.org/math-and-physics-club/",
"children": [
{
"name": "Rahul","user_id":24,"url":"https://www.facebook.com/rahul.kumar.011?fref=ts&ref=br_tf",
"children": [
{"name": "Anchal", "size": 3534,"user_id":35,"url":"https://www.facebook.com/anchal.scientist?fref=ts"},
{"name": "Ashlesha", "size": 5731,"user_id":36,"url":"https://www.facebook.com/ashlesha.patil.581?fref=ts"},
{"name": "Roshan", "size": 7840,"user_id":37,"url":"https://www.facebook.com/groshan.lal?fref=ts"},
{"name": "Ashrith", "size": 5914,"user_id":38,"url":"https://www.facebook.com/ashrith.reddy.12?fref=ts"},
{"name": "Venu", "size": 3416,"user_id":39,"url":"https://www.facebook.com/venu.madhav.71?fref=ts"}
]
}
]
},
{
"name": "Aero","user_id":25,"url":"http://stab-iitb.org/1956-2/",
"children": [
{
"name": "Varun","user_id":26,"url":"https://www.facebook.com/varunssiitb",
"children": [
{"name": "Prashanth", "size": 3534,"user_id":30,"url":"https://www.facebook.com/prashanth.kumar.3110567"},
{"name": "Tharun Raj", "size": 5731,"user_id":31,"url":"https://www.facebook.com/tharunraj.gujjala?fref=ts"},
{"name": "Roonica", "size": 7840,"user_id":32,"url":"https://www.facebook.com/ronica.roopak"},
{"name": "Ashtesh", "size": 5914,"user_id":33,"url":"https://www.facebook.com/ashtesh.kumar"},
{"name": "Kuldeep", "size": 5914,"user_id":72,"url":"https://www.facebook.com/profile.php?id=100004128217224"},
{"name": "Ryan", "size": 3416,"user_id":34,"url":"#"}
]
}
]
},
{
"name": "Web","user_id":27,"url":"http://stab-iitb.org/",
"children": [
{
"name": "Prithviraj","user_id":67,"url":"https://www.facebook.com/prithviraj.m.billa?fref=ts",
"children": [
{"name": "Hetal", "size": 24593,"user_id":29,"url":"https://www.facebook.com/hetalrathod2225?fref=ts"}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment