public
Created

starting point for my labels v.2

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="https://raw.github.com/ZJONSSON/d3-plugins/master/force_labels/force_labels.js"></script>
<style>
.anchor { fill:blue}
.labelbox { fill:black;opacity:0.8}
.labeltext { fill:white;font-weight:bold;text-anchor:middle;font-size:16;font-family: serif}
.link { stroke:gray;stroke-width:0.35}
</style>
</head>
 
<body>
 
<script type="text/javascript">
var w=960,h=500,
x_mean = w/2,
x_std = w/10,
y_mean = h/2,
y_std = h/10,
labelBox,link,
data=[];
 
 
var svg=d3.select("body")
.append("svg:svg")
.attr("height",h)
.attr("width",w)
function refresh() {
// plot the data as usual
anchors = svg.selectAll(".anchor").data(data,function(d,i) { return i})
anchors.exit().attr("class","exit").transition().duration(1000).style("opacity",0).remove()
anchors.enter().append("circle").attr("class","anchor").attr("r",4).attr("cx",function(d) { return d.x}).attr("cy",function(d) { return h-d.y})
anchors.transition()
.delay(function(d,i) { return i*10})
.duration(1500)
.attr("cx",function(d) { return d.x})
.attr("cy",function(d) { return h-d.y})
// Now for the labels
anchors.call(labelForce.update) // This is the only function call needed, the rest is just drawing the labels
labels = svg.selectAll(".labels").data(data,function(d,i) { return i})
labels.exit().attr("class","exit").transition().delay(0).duration(500).style("opacity",0).remove()
// Draw the labelbox, caption and the link
newLabels = labels.enter().append("g").attr("class","labels")
 
newLabelBox = newLabels.append("g").attr("class","labelbox")
newLabelBox.append("circle").attr("r",11)
newLabelBox.append("text").attr("class","labeltext").attr("y",6)
newLabels.append("line").attr("class","link")
labelBox = svg.selectAll(".labels").selectAll(".labelbox")
links = svg.selectAll(".link")
labelBox.selectAll("text").text(function(d) { return d.num})
 
}
 
function redrawLabels() {
labelBox
.attr("transform",function(d) { return "translate("+d.labelPos.x+" "+d.labelPos.y+")"})
 
links
.attr("x1",function(d) { return d.anchorPos.x})
.attr("y1",function(d) { return d.anchorPos.y})
.attr("x2",function(d) { return d.labelPos.x})
.attr("y2",function(d) { return d.labelPos.y})
}
 
// Initialize the label-forces
labelForce = d3.force_labels()
.linkDistance(0.0)
.gravity(0)
.nodes([]).links([])
.charge(-60)
.on("tick",redrawLabels)
 
 
 
// and now for the data functionality
function randomize(count) {
z1=d3.random.normal()
z2=d3.random.normal()
data=data.concat(d3.range(count || 100).map(function(d,i) { return {z1:z1(),z2:z2(),num:data.length+i}}))
correlate()
}
 
function correlate() {
// var corr = 0;
// data.forEach(function(d) { d.x = x_mean+(d.z1*x_std),
d.y = y_mean+y_std*(corr*d.z1+d.z2*Math.sqrt(1-Math.pow(corr,2)))})
refresh()
}
 
randomize()
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.