block by GerHobbelt 3116650

d3.js: quantitative foci

Full Screen

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="//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 //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;
}