D3 Examples - Data Driven Lava Lamp

xxxxxxxxxx
 
​
<!DOCTYPE html>
​
<head>
  <title>Data Driven Lava Lamp</title>
</head>
<meta charset="utf-8">
<style>
​
svg {
  height: 1000px;
  width: 1000px;
}
​
</style>
<body>
<div id="viz">
<svg></svg>
</div>
</body>
​
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="d3-glyphEdge.js" charset="utf-8" type="text/javascript"></script>
<script>
​
d3.json("sotu.json", dendrogram);
​
function dendrogram(data) {
  data = data;
​
  treeChart = d3.layout.tree();
      treeChart.size([500,500])
      .children(function(d) {return d["children"]})
​
  var linkGenerator = d3.svg.diagonal()
​
  var filter = d3.select("svg").append("defs").append("filter").attr("id", "gooeyCodeFilter");
  filter.append("feGaussianBlur").attr("id", "gaussblurrer").attr("in", "SourceGraphic").attr("stdDeviation", 6).attr("color-interpolation-filters", "sRGB").attr("result", "blur");
  filter.append("feColorMatrix").attr("in", "blur").attr("mode", "matrix").attr("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 34 -7").attr("result", "gooey");
​
  var chartG = d3.select("svg")
    .append("g")
    .style("filter", "url(#gooeyCodeFilter)")
    .attr("class", "dendrogram")
    .attr("transform", "translate(0,20)");
​
    chartG
    .selectAll("g.link")
    .data(treeChart.links(treeChart(data)))
    .enter().append("g")
    .attr("class", "link")
    .append("path")
    .attr("d", linkGenerator)
    .style("fill", "none")
    .style("stroke", "lightgray")
    .style("stroke-width", "0px")
    .each(function (d) {
      d.particles = [];
      d.frequency = d.target.blockCalls ? particleScale(d.target.blockCalls) : 0;
      d.speed = Math.random() + 1;
    })
​
    chartG
    .selectAll("circle")
    .data(treeChart(data))
    .enter().append("ellipse")
    .attr("rx", 4)
    .attr("ry", 2)
    .style("stroke-width", 1)
    .attr("cx", function (d) {return d.x})
    .attr("cy", function (d) {return d.y})
    .style("fill", "white")
    .style("stroke", "#f5e0b7")
​
  var t = d3.timer(tick, 1000);
​
  function tick(elapsed, time) {
    particles();
  }
​
function step(timestamp) {
  if (!start) start = timestamp;
//  var progress = timestamp - start;
  particles();
  window.requestAnimationFrame(step);
}
​
window.requestAnimationFrame(step);
​
}
​
var blockScale = d3.scale.linear().domain([1,5,50,1000,3000]).range(["#b9e3c5", "#6f89b6", "#827abf", "#f62150", "#5b1e37"]).clamp(true)
​
var particleScale = d3.scale.linear().domain([0,3000]).range([0.01,0.05])
​
function particles() {
​
    d3.selectAll("g.link")
      .each(function (d, i) {
          d3_glyphEdge.mutate.particle(d, d3.select(this).select("path").node(), 3, d.speed);
          d3.select(this).selectAll("circle")
            .data(d.particles)
            .enter()
            .append("circle")
            .style("fill", d.target.blockCalls ? blockScale(d.target.blockCalls) : "blue")
            .attr("r", 5);
​
          d3.select(this).selectAll("circle")
            .data(d.particles)
            .exit()
            .remove();
​
          d3.select(this).selectAll("circle")
            .attr("cx", function (p) {return p.x})
            .attr("cy", function (p) {return p.y});
      })
​
}
​
</script>
    