GerHobbelt/.gitignore

## .gitignore
# Editor backup files
*.bak
*~

## README.md

      
    Raw
  

              README.md
            
          
    Quantitative foci …… ? 8

copy of http://mbostock.github.com/d3/talk/20110921/quantitative-foci.html
Radial foci is shown in gist 3125600.

  
## index.html
<!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 -->

## style000.css
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;
}
	<!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;
	}