Skip to content

Instantly share code, notes, and snippets.

@srinivashavanur

srinivashavanur/README.md

Last active April 3, 2016 01:38
Show Gist options
  • Save srinivashavanur/ab441b0f43779f5ea140 to your computer and use it in GitHub Desktop.
Save srinivashavanur/ab441b0f43779f5ea140 to your computer and use it in GitHub Desktop.
Download ZIP
Visual Implementation (Node Link View)
Raw
d3.legend.js
(function() {
d3.legend = function(g) {
g.each(function() {
var g= d3.select(this),
items = {},
svg = d3.select(g.property("nearestViewportElement")),
legendPadding = g.attr("data-style-padding") || 5,
lb = g.selectAll(".legend-box").data([true]),
li = g.selectAll(".legend-items").data([true])
lb.enter().append("rect").classed("legend-box",true)
li.enter().append("g").classed("legend-items",true)
svg.selectAll("[data-legend]").each(function() {
var self = d3.select(this)
items[self.attr("data-legend")] = {
pos : self.attr("data-legend-pos") || this.getBBox().y,
color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke")
}
})
items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})
li.selectAll("text")
.data(items,function(d) { return d.key})
.call(function(d) { d.enter().append("text")})
.call(function(d) { d.exit().remove()})
.attr("y",function(d,i) { return i+"em"})
.attr("x","1em")
.text(function(d) { ;return d.key})
li.selectAll("circle")
.data(items,function(d) { return d.key})
.call(function(d) { d.enter().append("circle")})
.call(function(d) { d.exit().remove()})
.attr("cy",function(d,i) { return i-0.25+"em"})
.attr("cx",0)
.attr("r","0.4em")
.style("fill",function(d) { console.log(d.value.color);return d.value.color})
// Reposition and resize the box
var lbbox = li[0][0].getBBox()
lb.attr("x",(lbbox.x-legendPadding))
.attr("y",(lbbox.y-legendPadding))
.attr("height",(lbbox.height+2*legendPadding))
.attr("width",(lbbox.width+2*legendPadding))
})
return g
}
})()
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Node-Link View</title>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
.legend rect {
fill:white;
stroke:black;
opacity:0.8;}
</style>
<body>
<h1>Node Link View - Color Coding with starting letter</h1>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.legend.js"></script>
<script>
var width = 1060,
height = 600;
d3.select(self.frameElement).style("height", "900px");
var color = d3.scale.category10();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("USstates.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 8)
.style("fill", function(d) { return color(d.group); })
.attr("data-legend",function(d) { return d.category; })
.call(force.drag);
legend = svg.append("g")
.attr("class","legend")
.attr("transform","translate(800,140)")
.style("font-size","16px")
.call(d3.legend);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".25em")
.style("text-anchor", "end")
.text(function(d) { return d; });
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
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; });
});
});
</script>
Raw
USstates.json
{"nodes": [
{"group": 1, "name": "AL", "category":"A"},
{"group": 1, "name": "AR", "category":"A"},
{"group": 1, "name": "AZ", "category":"A"},
{"group": 2, "name": "CA", "category":"C"},
{"group": 2, "name": "CO", "category":"C"},
{"group": 2, "name": "CT", "category":"C"},
{"group": 3, "name": "DC", "category":"D"},
{"group": 3, "name": "DE", "category":"D"},
{"group": 4, "name": "FL", "category":"F"},
{"group": 5, "name": "GA", "category":"G"},
{"group": 6, "name": "IA", "category":"I"},
{"group": 6, "name": "ID", "category":"I"},
{"group": 6, "name": "IL", "category":"I"},
{"group": 6, "name": "IN", "category":"I"},
{"group": 7, "name": "KS", "category":"K"},
{"group": 7, "name": "KY", "category":"K"},
{"group": 8, "name": "LA", "category":"L"},
{"group": 9, "name": "MA", "category":"M"},
{"group": 9, "name": "MD", "category":"M"},
{"group": 9, "name": "ME", "category":"M"},
{"group": 9, "name": "MI", "category":"M"},
{"group": 9, "name": "MN", "category":"M"},
{"group": 9, "name": "MO", "category":"M"},
{"group": 9, "name": "MS", "category":"M"},
{"group": 9, "name": "MT", "category":"M"},
{"group": 10, "name": "NC", "category":"N"},
{"group": 10, "name": "ND", "category":"N"},
{"group": 10, "name": "NE", "category":"N"},
{"group": 10, "name": "NH", "category":"N"},
{"group": 10, "name": "NJ", "category":"N"},
{"group": 10, "name": "NM", "category":"N"},
{"group": 10, "name": "NV", "category":"N"},
{"group": 10, "name": "NY", "category":"N"},
{"group": 11, "name": "OH", "category":"O"},
{"group": 11, "name": "OK", "category":"O"},
{"group": 11, "name": "OR", "category":"O"},
{"group": 12, "name": "PA", "category":"P"},
{"group": 13, "name": "RI", "category":"R"},
{"group": 14, "name": "SC", "category":"S"},
{"group": 14, "name": "SD", "category":"S"},
{"group": 15, "name": "TN", "category":"T"},
{"group": 15, "name": "TX", "category":"T"},
{"group": 16, "name": "UT", "category":"U"},
{"group": 17, "name": "VA", "category":"V"},
{"group": 17, "name": "VT", "category":"V"},
{"group": 18, "name": "WA", "category":"W"},
{"group": 18, "name": "WI", "category":"W"},
{"group": 18, "name": "WV", "category":"W"},
{"group": 18, "name": "WY", "category":"W"}
],
"links": [
{"source": 0, "target": 8, "value": 1},
{"source": 0, "target": 9, "value": 1},
{"source": 0, "target": 23, "value": 1},
{"source": 0, "target": 40, "value": 1},
{"source": 1, "target": 16, "value": 1},
{"source": 1, "target": 22, "value": 1},
{"source": 1, "target": 23, "value": 1},
{"source": 1, "target": 34, "value": 1},
{"source": 1, "target": 40, "value": 1},
{"source": 1, "target": 41, "value": 1},
{"source": 2, "target": 3, "value": 1},
{"source": 2, "target": 30, "value": 1},
{"source": 2, "target": 31, "value": 1},
{"source": 2, "target": 42, "value": 1},
{"source": 3, "target": 31, "value": 1},
{"source": 3, "target": 35, "value": 1},
{"source": 4, "target": 14, "value": 1},
{"source": 4, "target": 27, "value": 1},
{"source": 4, "target": 30, "value": 1},
{"source": 4, "target": 34, "value": 1},
{"source": 4, "target": 42, "value": 1},
{"source": 4, "target": 48, "value": 1},
{"source": 5, "target": 17, "value": 1},
{"source": 5, "target": 32, "value": 1},
{"source": 5, "target": 37, "value": 1},
{"source": 6, "target": 18, "value": 1},
{"source": 6, "target": 43, "value": 1},
{"source": 7, "target": 18, "value": 1},
{"source": 7, "target": 29, "value": 1},
{"source": 7, "target": 36, "value": 1},
{"source": 8, "target": 9, "value": 1},
{"source": 9, "target": 25, "value": 1},
{"source": 9, "target": 38, "value": 1},
{"source": 9, "target": 40, "value": 1},
{"source": 10, "target": 12, "value": 1},
{"source": 10, "target": 21, "value": 1},
{"source": 10, "target": 22, "value": 1},
{"source": 10, "target": 27, "value": 1},
{"source": 10, "target": 39, "value": 1},
{"source": 10, "target": 46, "value": 1},
{"source": 11, "target": 24, "value": 1},
{"source": 11, "target": 31, "value": 1},
{"source": 11, "target": 35, "value": 1},
{"source": 11, "target": 42, "value": 1},
{"source": 11, "target": 45, "value": 1},
{"source": 11, "target": 48, "value": 1},
{"source": 12, "target": 13, "value": 1},
{"source": 12, "target": 15, "value": 1},
{"source": 12, "target": 22, "value": 1},
{"source": 12, "target": 46, "value": 1},
{"source": 13, "target": 15, "value": 1},
{"source": 13, "target": 20, "value": 1},
{"source": 13, "target": 33, "value": 1},
{"source": 14, "target": 22, "value": 1},
{"source": 14, "target": 27, "value": 1},
{"source": 14, "target": 34, "value": 1},
{"source": 15, "target": 22, "value": 1},
{"source": 15, "target": 33, "value": 1},
{"source": 15, "target": 40, "value": 1},
{"source": 15, "target": 43, "value": 1},
{"source": 15, "target": 47, "value": 1},
{"source": 16, "target": 23, "value": 1},
{"source": 16, "target": 41, "value": 1},
{"source": 17, "target": 28, "value": 1},
{"source": 17, "target": 32, "value": 1},
{"source": 17, "target": 37, "value": 1},
{"source": 17, "target": 44, "value": 1},
{"source": 18, "target": 36, "value": 1},
{"source": 18, "target": 43, "value": 1},
{"source": 18, "target": 47, "value": 1},
{"source": 19, "target": 28, "value": 1},
{"source": 20, "target": 33, "value": 1},
{"source": 20, "target": 46, "value": 1},
{"source": 21, "target": 26, "value": 1},
{"source": 21, "target": 39, "value": 1},
{"source": 21, "target": 46, "value": 1},
{"source": 22, "target": 27, "value": 1},
{"source": 22, "target": 34, "value": 1},
{"source": 22, "target": 40, "value": 1},
{"source": 23, "target": 40, "value": 1},
{"source": 24, "target": 26, "value": 1},
{"source": 24, "target": 39, "value": 1},
{"source": 24, "target": 48, "value": 1},
{"source": 25, "target": 38, "value": 1},
{"source": 25, "target": 40, "value": 1},
{"source": 25, "target": 43, "value": 1},
{"source": 26, "target": 39, "value": 1},
{"source": 27, "target": 39, "value": 1},
{"source": 27, "target": 48, "value": 1},
{"source": 28, "target": 44, "value": 1},
{"source": 29, "target": 32, "value": 1},
{"source": 29, "target": 36, "value": 1},
{"source": 30, "target": 34, "value": 1},
{"source": 30, "target": 41, "value": 1},
{"source": 31, "target": 35, "value": 1},
{"source": 31, "target": 42, "value": 1},
{"source": 32, "target": 36, "value": 1},
{"source": 32, "target": 44, "value": 1},
{"source": 33, "target": 36, "value": 1},
{"source": 33, "target": 47, "value": 1},
{"source": 34, "target": 41, "value": 1},
{"source": 35, "target": 45, "value": 1},
{"source": 36, "target": 47, "value": 1},
{"source": 39, "target": 48, "value": 1},
{"source": 40, "target": 43, "value": 1},
{"source": 42, "target": 48, "value": 1},
{"source": 43, "target": 47, "value": 1}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment