|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="https://gist.github.com/N0taN3rd/f1ba6bef2fc906b87dbf#file-d3tip-js"></script> |
|
<style> |
|
svg { |
|
font: 10px sans-serif; |
|
} |
|
|
|
.axis path, .axis line { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
.background { |
|
fill: #eee; |
|
} |
|
|
|
line { |
|
stroke: #fff; |
|
} |
|
|
|
text.active { |
|
fill: red; |
|
} |
|
body { |
|
display: block; |
|
margin: 66px; |
|
} |
|
line.link { |
|
stroke: #999; |
|
stroke-opacity: .6; |
|
} |
|
|
|
.background { |
|
fill: #eee; |
|
} |
|
|
|
line { |
|
stroke: #fff; |
|
} |
|
|
|
text.active { |
|
fill: red; |
|
} |
|
.d3-tip { |
|
line-height: 1; |
|
font-weight: bold; |
|
padding: 12px; |
|
background: rgba(0, 0, 0, 0.8); |
|
color: #fff; |
|
border-radius: 2px; |
|
} |
|
|
|
.d3-tip:after { |
|
box-sizing: border-box; |
|
display: inline; |
|
font-size: 10px; |
|
width: 100%; |
|
line-height: 1; |
|
color: rgba(0, 0, 0, 0.8); |
|
content: "\25BC"; |
|
position: absolute; |
|
text-align: center; |
|
} |
|
|
|
.d3-tip.n:after { |
|
margin: -1px 0 0 0; |
|
top: 100%; |
|
left: 0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="vis1"> |
|
<p>Order: <select id="order"> |
|
<option value="name">by Name</option> |
|
<option value="count">by Frequency</option> |
|
</select> |
|
</div> |
|
<div id="vis2"> |
|
|
|
</div> |
|
|
|
<script> |
|
d3.tip = function() { |
|
var direction = d3_tip_direction, |
|
offset = d3_tip_offset, |
|
html = d3_tip_html, |
|
node = initNode(), |
|
svg = null, |
|
point = null, |
|
target = null |
|
|
|
function tip(vis) { |
|
svg = getSVGNode(vis) |
|
point = svg.createSVGPoint() |
|
document.body.appendChild(node) |
|
} |
|
|
|
// Public - show the tooltip on the screen |
|
// |
|
// Returns a tip |
|
tip.show = function() { |
|
var args = Array.prototype.slice.call(arguments) |
|
if(args[args.length - 1] instanceof SVGElement) target = args.pop() |
|
|
|
var content = html.apply(this, args), |
|
poffset = offset.apply(this, args), |
|
dir = direction.apply(this, args), |
|
nodel = d3.select(node), i = 0, |
|
coords |
|
|
|
nodel.html(content) |
|
.style({ opacity: 1, 'pointer-events': 'all' }) |
|
|
|
while(i--) nodel.classed(directions[i], false) |
|
coords = direction_callbacks.get(dir).apply(this) |
|
nodel.classed(dir, true).style({ |
|
top: (coords.top + poffset[0]) + 'px', |
|
left: (coords.left + poffset[1]) + 'px' |
|
}) |
|
|
|
return tip |
|
} |
|
|
|
// Public - hide the tooltip |
|
// |
|
// Returns a tip |
|
tip.hide = function() { |
|
nodel = d3.select(node) |
|
nodel.style({ opacity: 0, 'pointer-events': 'none' }) |
|
return tip |
|
} |
|
|
|
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. |
|
// |
|
// n - name of the attribute |
|
// v - value of the attribute |
|
// |
|
// Returns tip or attribute value |
|
tip.attr = function(n, v) { |
|
if (arguments.length < 2 && typeof n === 'string') { |
|
return d3.select(node).attr(n) |
|
} else { |
|
var args = Array.prototype.slice.call(arguments) |
|
d3.selection.prototype.attr.apply(d3.select(node), args) |
|
} |
|
|
|
return tip |
|
} |
|
|
|
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value. |
|
// |
|
// n - name of the property |
|
// v - value of the property |
|
// |
|
// Returns tip or style property value |
|
tip.style = function(n, v) { |
|
if (arguments.length < 2 && typeof n === 'string') { |
|
return d3.select(node).style(n) |
|
} else { |
|
var args = Array.prototype.slice.call(arguments) |
|
d3.selection.prototype.style.apply(d3.select(node), args) |
|
} |
|
|
|
return tip |
|
} |
|
|
|
// Public: Set or get the direction of the tooltip |
|
// |
|
// v - One of n(north), s(south), e(east), or w(west), nw(northwest), |
|
// sw(southwest), ne(northeast) or se(southeast) |
|
// |
|
// Returns tip or direction |
|
tip.direction = function(v) { |
|
if (!arguments.length) return direction |
|
direction = v == null ? v : d3.functor(v) |
|
|
|
return tip |
|
} |
|
|
|
// Public: Sets or gets the offset of the tip |
|
// |
|
// v - Array of [x, y] offset |
|
// |
|
// Returns offset or |
|
tip.offset = function(v) { |
|
if (!arguments.length) return offset |
|
offset = v == null ? v : d3.functor(v) |
|
|
|
return tip |
|
} |
|
|
|
// Public: sets or gets the html value of the tooltip |
|
// |
|
// v - String value of the tip |
|
// |
|
// Returns html value or tip |
|
tip.html = function(v) { |
|
if (!arguments.length) return html |
|
html = v == null ? v : d3.functor(v) |
|
|
|
return tip |
|
} |
|
|
|
function d3_tip_direction() { return 'n' } |
|
function d3_tip_offset() { return [0, 0] } |
|
function d3_tip_html() { return ' ' } |
|
|
|
var direction_callbacks = d3.map({ |
|
n: direction_n, |
|
s: direction_s, |
|
e: direction_e, |
|
w: direction_w, |
|
nw: direction_nw, |
|
ne: direction_ne, |
|
sw: direction_sw, |
|
se: direction_se |
|
}), |
|
|
|
directions = direction_callbacks.keys() |
|
|
|
function direction_n() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.n.y - node.offsetHeight, |
|
left: bbox.n.x - node.offsetWidth / 2 |
|
} |
|
} |
|
|
|
function direction_s() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.s.y, |
|
left: bbox.s.x - node.offsetWidth / 2 |
|
} |
|
} |
|
|
|
function direction_e() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.e.y - node.offsetHeight / 2, |
|
left: bbox.e.x |
|
} |
|
} |
|
|
|
function direction_w() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.w.y - node.offsetHeight / 2, |
|
left: bbox.w.x - node.offsetWidth |
|
} |
|
} |
|
|
|
function direction_nw() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.nw.y - node.offsetHeight, |
|
left: bbox.nw.x - node.offsetWidth |
|
} |
|
} |
|
|
|
function direction_ne() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.ne.y - node.offsetHeight, |
|
left: bbox.ne.x |
|
} |
|
} |
|
|
|
function direction_sw() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.sw.y, |
|
left: bbox.sw.x - node.offsetWidth |
|
} |
|
} |
|
|
|
function direction_se() { |
|
var bbox = getScreenBBox() |
|
return { |
|
top: bbox.se.y, |
|
left: bbox.e.x |
|
} |
|
} |
|
|
|
function initNode() { |
|
var node = d3.select(document.createElement('div')) |
|
node.style({ |
|
position: 'absolute', |
|
opacity: 0, |
|
pointerEvents: 'none', |
|
boxSizing: 'border-box' |
|
}) |
|
|
|
return node.node() |
|
} |
|
|
|
function getSVGNode(el) { |
|
el = el.node() |
|
if(el.tagName.toLowerCase() == 'svg') |
|
return el |
|
|
|
return el.ownerSVGElement |
|
} |
|
|
|
// Private - gets the screen coordinates of a shape |
|
// |
|
// Given a shape on the screen, will return an SVGPoint for the directions |
|
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), |
|
// sw(southwest). |
|
// |
|
// +-+-+ |
|
// | | |
|
// + + |
|
// | | |
|
// +-+-+ |
|
// |
|
// Returns an Object {n, s, e, w, nw, sw, ne, se} |
|
function getScreenBBox() { |
|
var targetel = target || d3.event.target, |
|
bbox = {}, |
|
matrix = targetel.getScreenCTM(), |
|
tbbox = targetel.getBBox(), |
|
width = tbbox.width, |
|
height = tbbox.height, |
|
x = tbbox.x, |
|
y = tbbox.y, |
|
scrollTop = document.documentElement.scrollTop || document.body.scrollTop, |
|
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft |
|
|
|
|
|
point.x = x + scrollLeft |
|
point.y = y + scrollTop |
|
bbox.nw = point.matrixTransform(matrix) |
|
point.x += width |
|
bbox.ne = point.matrixTransform(matrix) |
|
point.y += height |
|
bbox.se = point.matrixTransform(matrix) |
|
point.x -= width |
|
bbox.sw = point.matrixTransform(matrix) |
|
point.y -= height / 2 |
|
bbox.w = point.matrixTransform(matrix) |
|
point.x += width |
|
bbox.e = point.matrixTransform(matrix) |
|
point.x -= width / 2 |
|
point.y -= height / 2 |
|
bbox.n = point.matrixTransform(matrix) |
|
point.y += height |
|
bbox.s = point.matrixTransform(matrix) |
|
|
|
return bbox |
|
} |
|
|
|
return tip |
|
}; |
|
|
|
var margin = {top: 80, right: 0, bottom: 10, left: 80}, |
|
width = 720, |
|
height = 720; |
|
|
|
var x = d3.scale.ordinal().rangeBands([0, width]), |
|
z = d3.scale.linear().domain([0, 4]).clamp(true), |
|
c = d3.scale.category10().domain(d3.range(10)); |
|
|
|
var svg = d3.select("#vis1").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.style("margin-left", -margin.left + "px") |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
d3.json("contiguous-usa.json", function(data) { |
|
|
|
var matrix = [], |
|
nodes = data.nodes, |
|
n = nodes.length; |
|
|
|
// Compute index per node. |
|
nodes.forEach(function(node, i) { |
|
node.index = i; |
|
node.count = 0; |
|
matrix[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; }); |
|
}); |
|
|
|
|
|
// Convert links to matrix; count character occurrences. |
|
data.links.forEach(function(link) { |
|
matrix[link.source][link.target].z += link.value; |
|
matrix[link.target][link.source].z += link.value; |
|
matrix[link.source][link.source].z += link.value; |
|
matrix[link.target][link.target].z += link.value; |
|
nodes[link.source].count += link.value; |
|
nodes[link.target].count += link.value; |
|
}); |
|
|
|
// Precompute the orders. |
|
var orders = { |
|
name: d3.range(n).sort(function(a, b) { return d3.ascending(nodes[a].name, nodes[b].name); }), |
|
count: d3.range(n).sort(function(a, b) { return nodes[b].count - nodes[a].count; }) |
|
}; |
|
|
|
// The default sort order. |
|
x.domain(orders.name); |
|
|
|
svg.append("rect") |
|
.attr("class", "background") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
|
|
|
|
function order(value) { |
|
x.domain(orders[value]); |
|
|
|
var t = svg.transition().duration(2500); |
|
|
|
t.selectAll(".row") |
|
.delay(function(d, i) { return x(i) * 4; }) |
|
.attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; }) |
|
.selectAll(".cell") |
|
.delay(function(d) { return x(d.x) * 4; }) |
|
.attr("x", function(d) { return x(d.x); }); |
|
|
|
t.selectAll(".column") |
|
.delay(function(d, i) { return x(i) * 4; }) |
|
.attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; }); |
|
} |
|
|
|
var row = svg.selectAll(".row") |
|
.data(matrix) |
|
.enter().append("g") |
|
.attr("class", "row") |
|
.attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; }) |
|
.each(rr); |
|
|
|
row.append("line") |
|
.attr("x2", width); |
|
|
|
row.append("text") |
|
.attr("x", -6) |
|
.attr("y", x.rangeBand() / 2) |
|
.attr("dy", ".32em") |
|
.attr("text-anchor", "end") |
|
.text(function(d, i) { |
|
console.log(nodes[i].name); |
|
return nodes[i].name; }); |
|
|
|
var column = svg.selectAll(".column") |
|
.data(matrix) |
|
.enter().append("g") |
|
.attr("class", "column") |
|
.attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; }); |
|
|
|
column.append("line") |
|
.attr("x1", -width); |
|
|
|
column.append("text") |
|
.attr("x", 6) |
|
.attr("y", x.rangeBand() / 2) |
|
.attr("dy", ".32em") |
|
.attr("text-anchor", "start") |
|
.text(function(d, i) { return nodes[i].name; }); |
|
|
|
|
|
|
|
function mouseover(p) { |
|
d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; }); |
|
d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; }); |
|
} |
|
|
|
function mouseout() { |
|
d3.selectAll("text").classed("active", false); |
|
} |
|
|
|
d3.select("#order").on("change", function() { |
|
clearTimeout(timeout); |
|
order(this.value); |
|
}); |
|
function rr(row) { |
|
var cell = d3.select(this).selectAll(".cell") |
|
.data(row.filter(function(d) { return d.z; })) |
|
.enter().append("rect") |
|
.attr("class", "cell") |
|
.attr("x", function(d) { return x(d.x); }) |
|
.attr("width", x.rangeBand()) |
|
.attr("height", x.rangeBand()) |
|
.style("fill-opacity", function(d) { return z(d.z); }) |
|
.style("fill", function(d) { return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null;}) |
|
.on("mouseover", mouseover) |
|
.on("mouseout", mouseout); |
|
} |
|
|
|
|
|
|
|
var timeout = setTimeout(function() { |
|
order("name"); |
|
d3.select("#order").property("selectedIndex", 0).node().focus(); |
|
}, 5000); |
|
svg.append("text") |
|
.attr("x", (width / 2)) |
|
.attr("y", 0 - (margin.top / 2)) |
|
.attr("text-anchor", "middle") |
|
.style("font-size", "16px") |
|
.style("text-decoration", "underline") |
|
.text("Matrix"); |
|
|
|
}); |
|
|
|
d3.json("contiguous-usa.json", function(data) { |
|
var width = 960, height = 600; |
|
|
|
|
|
var svg = d3.select("#vis2").append("svg").attr("width", width).attr("height", height); |
|
|
|
var cc = d3.scale.category10().domain(d3.range(10)); |
|
|
|
var tip = d3.tip() |
|
.attr('class', 'd3-tip') |
|
.offset([-10, 0]) |
|
.html(function (d) { |
|
//console.log(color(d.nedges)); |
|
//''color:'+color(d.nedges)+''''color:red |
|
console.log(cc(d.nedges)); |
|
var c = "'color:" + cc(d.nedges) + ";'"; |
|
return "<strong>State:</strong> <span style=c>" + d.name + "</span>"; |
|
}); |
|
|
|
svg.call(tip); |
|
|
|
var force = d3.layout.force() |
|
.charge(-200) |
|
.linkDistance(20) |
|
.size([width, height]); |
|
|
|
force |
|
.nodes(data.nodes) |
|
.links(data.links) |
|
.start(); |
|
|
|
|
|
var link = svg.selectAll(".link") |
|
.data(data.links).enter().append("line") |
|
.attr("class", "link"); |
|
|
|
var node = svg.selectAll(".node") |
|
.data(data.nodes) |
|
.enter() |
|
.append("circle") |
|
.attr("class", "node") |
|
.attr("r", 5) |
|
.style("fill", function (d) { |
|
return d3.rgb("#0000FF"); |
|
}) |
|
.on('mouseover', tip.show) |
|
.on('mouseout', tip.hide) |
|
.call(force.drag()); |
|
|
|
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; |
|
}); |
|
}); |
|
svg.append("text") |
|
.attr("x", (width / 2)) |
|
.attr("y",25) |
|
.attr("text-anchor", "middle") |
|
.style("font-size", "16px") |
|
.style("text-decoration", "underline") |
|
.text("Node Link"); |
|
|
|
|
|
}); |
|
d3.select(self.frameElement).style("height", "1500px").style("width","1200px"); |
|
|
|
</script> |
|
</body> |
