heyjordn/index.html

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

## jam.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              jam.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<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>