codybuell/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simplified version of Christopher Manning's Voronoi diagram using D3.js.

  
## index.html
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <style>

      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        width: 960px;
        height: 500px;
        position: relative;
      }

      path {
        stroke: #333;
        fill: #ccc;
      }

    </style>
  </head>
  <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

      // define width and height of svg element
      var w = 960,
          h = 500;

      // generate some random data points
      var vertices = d3.range(50).map(function(d) {
                       return [Math.random() * w, Math.random() * h];
                     });

      // setup voronoi geom
      var voronoi = d3.geom.voronoi().x(function(d) { return d.x; }).y(function(d) { return d.y; });

      // not sure why but removing this breaks drag functionality
      var zoom = d3.behavior.zoom().on("zoom", function(d,i) {
                   force.nodes(vertices).start();
                 });

      // prepare svg element
      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
                  .call(zoom);

      // setup the force
      var force = d3.layout.force()
                    .charge(-800)
                    .size([w, h])
                    .on("tick", update)
                    .nodes(vertices)
                    .start();

      // setup the path
      var path = svg.selectAll("path");

      // make it happen
      function update(e) {
          path = path.data(voronoi(vertices))
                     .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

          path.enter().append("path")
              .call(d3.behavior.drag()
                .on("drag", function(d, i) {
                  vertices[i] = {x: vertices[i].x + d3.event.dx, y: vertices[i].y + d3.event.dy};
                })
              );
      }

    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}

	path {
	stroke: #333;
	fill: #ccc;
	}

	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	// define width and height of svg element
	var w = 960,
	h = 500;

	// generate some random data points
	var vertices = d3.range(50).map(function(d) {
	return [Math.random() * w, Math.random() * h];
	});

	// setup voronoi geom
	var voronoi = d3.geom.voronoi().x(function(d) { return d.x; }).y(function(d) { return d.y; });

	// not sure why but removing this breaks drag functionality
	var zoom = d3.behavior.zoom().on("zoom", function(d,i) {
	force.nodes(vertices).start();
	});

	// prepare svg element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	.call(zoom);

	// setup the force
	var force = d3.layout.force()
	.charge(-800)
	.size([w, h])
	.on("tick", update)
	.nodes(vertices)
	.start();

	// setup the path
	var path = svg.selectAll("path");

	// make it happen
	function update(e) {
	path = path.data(voronoi(vertices))
	.attr("d", function(d) { return "M" + d.join("L") + "Z"; });

	path.enter().append("path")
	.call(d3.behavior.drag()
	.on("drag", function(d, i) {
	vertices[i] = {x: vertices[i].x + d3.event.dx, y: vertices[i].y + d3.event.dy};
	})
	);
	}

	</script>
	</body>
	</html>