heyjordn · February 7, 2016 06:15
diff --git a/index.html b/index.html
 <html>
 <meta charset="utf-8">
 <style>
  /* CSS goes here. */

  line {
    stroke: #999;
    stroke-width: .5px;
  }

  path {
    fill: #ddd;
    fill-opacity: .8;
    stroke: #fff;
    stroke-width: 1.5px;
  }
 </style>

 <body>
  <!--BootStrap -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <!--Include the jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap JavaScript plugins -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

  <div id="name"></div>
  <script>

    var width = 900;
    var height = 600;

    var force = d3.layout.force().size([width, height]); //Create Force Layout
    var offset = [width / 2, height / 2]; //helps with centering
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    d3.json("jam.json", function(jam) { //Load GeoJSON
      var nodes = [],
        links = [];

      var center = d3.geo.centroid(jam); //Finds center of map data
      var scale = 20650;
      var projection = d3.geo.mercator().scale(scale) //Creates projection
        .center(center)
        .translate(offset);

      var path = d3.geo.path().projection(projection); //Creates path generator
      jam.features.forEach(function(d, i) {
        var centroid = d3.geo.centroid(d); //finds center of each parish feature
        if (centroid.some(isNaN)) return;
        centroid.x = centroid[0];
        centroid.y = centroid[1];
        centroid.feature = d;
        nodes.push(centroid); //each parish, with centers added
      });
      d3.geom.voronoi().links(nodes).forEach(function(link) {
        var dx = link.source.x - link.target.x,
          dy = link.source.y - link.target.y;
        link.distance = Math.sqrt(dx * dx + dy * dy);
        links.push(link);
      });

      force //generates force graph
        .gravity(0)
        .nodes(nodes)
        .links(links)
        .linkDistance(function(d) {
          return d.distance;
        })
        .start();
      var link = svg.selectAll("line")
        .data(links)
        .enter()
        .append("line")
        .attr("x1", function(d) {
          return d.source.x;
        })
        .attr("y1", function(d) {
          return d.source.y;
        })
        .attr("x2", function(d) {
          return d.target.x;
        })
        .attr("y2", function(d) {
          return d.target.y;
        })
        .attr("transform", "scale(3.5)");

      var node = svg.selectAll("g")
        .data(nodes)
        .enter()
        .append("g")
        .call(force.drag)
        .append("path")
        .attr("d", function(d) {
          return path(d.feature); //draws parishes
        });
      force.on("tick", function(e) {
        link.attr("x1", function(d) {
            return d.source.x;
          })
          .attr("y1", function(d) {
            return d.source.y;
          })
          .attr("x2", function(d) {
            return d.target.x;
          })
          .attr("y2", function(d) {
            return d.target.y;
          });

        node.attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
      });
    });
  </script>
 </body>

 </html>
 <Paste>
diff --git a/jam.json b/jam.json
	<html>
	<meta charset="utf-8">
	<style>
	/* CSS goes here. */

	line {
	stroke: #999;
	stroke-width: .5px;
	}

	path {
	fill: #ddd;
	fill-opacity: .8;
	stroke: #fff;
	stroke-width: 1.5px;
	}
	</style>

	<body>
	<!--BootStrap -->
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

	<!--Include the jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- Bootstrap JavaScript plugins -->
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

	<div id="name"></div>
	<script>

	var width = 900;
	var height = 600;

	var force = d3.layout.force().size([width, height]); //Create Force Layout
	var offset = [width / 2, height / 2]; //helps with centering
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.json("jam.json", function(jam) { //Load GeoJSON
	var nodes = [],
	links = [];

	var center = d3.geo.centroid(jam); //Finds center of map data
	var scale = 20650;
	var projection = d3.geo.mercator().scale(scale) //Creates projection
	.center(center)
	.translate(offset);

	var path = d3.geo.path().projection(projection); //Creates path generator
	jam.features.forEach(function(d, i) {
	var centroid = d3.geo.centroid(d); //finds center of each parish feature
	if (centroid.some(isNaN)) return;
	centroid.x = centroid[0];
	centroid.y = centroid[1];
	centroid.feature = d;
	nodes.push(centroid); //each parish, with centers added
	});
	d3.geom.voronoi().links(nodes).forEach(function(link) {
	var dx = link.source.x - link.target.x,
	dy = link.source.y - link.target.y;
	link.distance = Math.sqrt(dx * dx + dy * dy);
	links.push(link);
	});

	force //generates force graph
	.gravity(0)
	.nodes(nodes)
	.links(links)
	.linkDistance(function(d) {
	return d.distance;
	})
	.start();
	var link = svg.selectAll("line")
	.data(links)
	.enter()
	.append("line")
	.attr("x1", function(d) {
	return d.source.x;
	})
	.attr("y1", function(d) {
	return d.source.y;
	})
	.attr("x2", function(d) {
	return d.target.x;
	})
	.attr("y2", function(d) {
	return d.target.y;
	})
	.attr("transform", "scale(3.5)");

	var node = svg.selectAll("g")
	.data(nodes)
	.enter()
	.append("g")
	.call(force.drag)
	.append("path")
	.attr("d", function(d) {
	return path(d.feature); //draws parishes
	});
	force.on("tick", function(e) {
	link.attr("x1", function(d) {
	return d.source.x;
	})
	.attr("y1", function(d) {
	return d.source.y;
	})
	.attr("x2", function(d) {
	return d.target.x;
	})
	.attr("y2", function(d) {
	return d.target.y;
	});

	node.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")";
	});
	});
	});
	</script>
	</body>

	</html>
	<Paste>