christophermanning/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Created by Christopher Manning
References


Delaunay Triangulation
D3.js Voronoi Geom


## index.html
<!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='http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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='http://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+(margin2)) - 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>