Data Driven Lava Lamp

A data-driven lava lamp. That's the D3 library, can't you tell?

<!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>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js