Technology Delaunay Triangulation

References

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Technology Delaunay Triangulation</title>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> 
    <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400italic' rel='stylesheet' type='text/css'>
    <style type="text/css">
svg {
  display: block;
  margin: 120px 50px;
  background-color: #1a232c;
}

path {
  fill: none;
  stroke: #CCC;
  stroke-width: .5px;
}

svg text {
  fill: white;
  font-family: 'Libre Baskerville', serif;
  font-size: 120px;
  font-style: italic;
  text-anchor: middle;
  dominant-baseline: middle;
  stroke: #1a232c;
}
    </style>
  </head>
  <body></body>
  <script type="text/javascript">
var config = {"vertices": 500, "velocity": .1}
var gui = new dat.GUI()
gui.add(config, "vertices", 1, 1000).listen()
gui.add(config, "velocity", 0, 10).listen()
config.random = function(){
  gui.__controllers.forEach(function(c){
    if(c.property!='random'){
      c.setValue(Math.random()*c.__max)
    }
  })
}
gui.add(config, "random")

var width = 865,
    height = 265,
    margin = 100

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)

svg.append("g")

svg.append("text").text("Technology")
  .attr('x', width/2)
  .attr('y', height/2)

vertices = []
d3.range(config["vertices"]-vertices.length).forEach(function(d) {
  vertices.unshift([ (Math.random() * (width+(margin*2)) - margin), (Math.random() * (height+(margin*2))) - margin ])
})

d3.timer(tick)
function tick(t){
  if(vertices.length < config["vertices"]) {
    for (var i = 0; i < (config["vertices"]-vertices.length); i++) {
      if(Math.random() <= .50){
        vertices.unshift([ -margin, (Math.random() * (height+margin)) - margin ])
      } else {
        vertices.unshift([ (Math.random() * (width + margin)) - margin, - margin ])
      }
    }
  }

vertices = vertices.map(function(d) {
    d[0] = d[0] + config["velocity"]
    d[1] = d[1] + config["velocity"]
    return d
  }).filter(function(d){ return d[0] < width + margin && d[1] < height + margin })

delaunay = d3.geom.delaunay(vertices)

path = d3.select("g")
  .selectAll("path")
  .data(delaunay)

path
  .enter()
  .append("path")

path
  .attr("d", d3.svg.line())

path.exit().remove()
}
  </script>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js