Skip to content

Instantly share code, notes, and snippets.

@GerHobbelt
Created July 15, 2012 12:46
Show Gist options
  • Save GerHobbelt/3116650 to your computer and use it in GitHub Desktop.
Save GerHobbelt/3116650 to your computer and use it in GitHub Desktop.
d3.js: quantitative foci
# Editor backup files
*.bak
*~
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<title>Force Layouts - Quantitative Foci</title>
<script src="http://d3js.org/d3.v2.js"></script>
<link type="text/css" rel="stylesheet" href="style000.css">
<style type="text/css">
circle {
stroke: #fff;
}
</style>
</head>
<body>
<div id="body">
<div id="chart"></div>
<div id="header">quantitative foci</div>
</div>
<script type="text/javascript">
var w = 960,
h = 500;
var color = d3.scale.linear()
.domain([h - 100, 100])
.range(["hsl(180,100%,10%)", "hsl(210,100%,90%)"])
.interpolate(d3.interpolateHsl);
var force = d3.layout.force()
.gravity(0)
.charge(0)
.size([w, h]);
var nodes = force.nodes();
var svg = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
svg.append("svg:rect")
.attr("width", w)
.attr("height", h);
force.on("tick", function(e) {
var k = e.alpha * .1;
nodes.forEach(function(node) {
node.y += (node.cy - node.y) * k;
});
svg.selectAll("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
var p0;
svg.on("mousemove", function() {
var p1 = d3.svg.mouse(this);
var node = {
x: p1[0],
y: p1[1],
px: (p0 || (p0 = p1))[0],
py: p0[1],
cy: Math.random() * (h - 200) + 100
};
p0 = p1;
svg.append("svg:circle")
.data([node])
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 15)
.style("fill", function(d) { return color(d.cy); })
.transition()
.delay(3000)
.attr("r", 1e-6)
.each("end", function() { nodes.shift(); })
.remove();
nodes.push(node);
force.start();
});
</script>
</body>
</html>
<!-- This document saved from http://mbostock.github.com/d3/talk/20110921/quantitative-foci.html -->
body {
overflow: hidden;
margin: 0;
font: 14px "Helvetica Neue";
}
svg {
width: 1280px;
height: 800px;
}
#chart, #header {
position: absolute;
top: 0;
}
#header {
z-index: 1;
display: block;
}
#header {
top: 80px;
left: 140px;
font: 300 36px "Helvetica Neue";
}
rect {
fill: none;
pointer-events: all;
}
pre {
font-size: 18px;
}
line {
stroke: #000;
stroke-width: 1.5px;
}
.string, .regexp {
color: #f39;
}
.keyword {
color: #00c;
}
.comment {
color: #555;
}
.number {
color: #369;
}
.class, .special {
color: #1181B8;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment