Party Web by pstuffa

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  
.nodes circle {
  fill: #ccc;
  stroke: #000;
}

.links {
  stroke: #999;
  stroke-width: 1.5px;
}

.text {
  pointer-events: none;
  text-anchor: middle;
  font: 10px sans-serif;
}

</style>
<svg width="900" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody().strength(-500))
    .force("link", d3.forceLink().id(function(d) { return d.id; }).strength(0.25))
    .force("x", d3.forceX(width / 2).strength(.024))
    .force("y", d3.forceY(height / 2));

var color = d3.scaleOrdinal(d3.schemeCategory20c);

d3.json("data.json", function(error, data) {

  var graph = {
   "nodes": data.nodes,
   "links": data.links 
  }
  
  console.log(graph)

  var link = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(graph.links)
    .enter().append("line");

  var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 20)
      .style("fill","lightgray")   
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged));
  

  var text = svg.append("g")
      .attr("class", "text")
      .selectAll("text")
      .data(graph.nodes)
    .enter().append("text")
      .text(function(d, i) { return d.id; })

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {

    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

    text.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });

    }
}); 
  
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}


</script>


</script>

data.json

{ "nodes": [
{"id":"Paul-Willa"},
{"id":"Brian-Tara"},
{"id":"Mom-Dad"},
{"id":"Dave-Nicole"},
{"id":"Katherine-Winston"},
{"id":"Nathan-Amy"},
{"id":"Jenny"},
{"id":"Lauren"},
{"id":"Luan-Taurus"},
{"id":"John-Tiffany"},
{"id":"Orion-Jaime"},
{"id":"Tim-Kim"},
{"id":"Lily-Chunhui"},
{"id":"Melissa-Steph"},
{"id":"Simon-Brigid"},
{"id":"Harry-Roxy"},
{"id":"Nicky"},
{"id":"Daniel"},
{"id":"Hobie-Elise"},
{"id":"Chris-Jessie"},
{"id":"Derek"},
{"id":"Chris-Nicole"},
{"id":"Grant-Natalie"},
{"id":"Kim-Christian"},
{"id":"Sam"},
{"id":"Alex"},
{"id":"Jordan-Renae"},
{"id":"Quinn-Andrea"},
{"id":"Art-Shannon"},
{"id":"Adam-Krista"},
{"id":"Ben-Melissa"},
{"id":"Lynda-Howard"},
{"id":"Alana-Rick"},
{"id":"Cindy-Scott"},
{"id":"Marcia-Gabriel"},
{"id":"Tom-Julie"},
{"id":"Tim-Joanne"},
{"id":"Roger-Randall"}
], "links": [
{"source": "Brian-Tara", "target": "Nathan-Amy" },
{"source": "Dave-Nicole", "target": "Mom-Dad" },
{"source": "Katherine-Winston", "target": "Jenny" },
{"source": "Katherine-Winston", "target": "Lauren" },
{"source": "Katherine-Winston", "target": "Luan-Taurus" },
{"source": "Katherine-Winston", "target": "John-Tiffany" },
{"source": "Katherine-Winston", "target": "Orion-Jaime" },
{"source": "Katherine-Winston", "target": "Tim-Kim" },
{"source": "Luan-Taurus", "target": "Jenny" },
{"source": "Luan-Taurus", "target": "Lauren" },
{"source": "Luan-Taurus", "target": "John-Tiffany" },
{"source": "Luan-Taurus", "target": "Tim-Kim" },
{"source": "Luan-Taurus", "target": "Orion-Jaime" },
{"source": "Jenny", "target": "John-Tiffany" },
{"source": "Jenny", "target": "Tim-Kim" },
{"source": "Jenny", "target": "Orion-Jaime" },
{"source": "Jenny", "target": "Lauren" },
{"source": "John-Tiffany", "target": "Tim-Kim" },
{"source": "John-Tiffany", "target": "Orion-Jaime" },
{"source": "John-Tiffany", "target": "Lauren" },
{"source": "Tim-Kim", "target": "Orion-Jaime" },
{"source": "Tim-Kim", "target": "Lauren" },
{"source": "Lauren", "target": "Orion-Jaime" },
{"source": "Brian-Tara", "target": "Simon-Brigid" },
{"source": "Nathan-Amy", "target": "Simon-Brigid" },
{"source": "Harry-Roxy", "target": "Hobie-Elise" },
{"source": "Harry-Roxy", "target": "Nicky" },
{"source": "Harry-Roxy", "target": "Daniel" },
{"source": "Harry-Roxy", "target": "Derek" },
{"source": "Harry-Roxy", "target": "Chris-Jessie" },
{"source": "Harry-Roxy", "target": "Sam" },
{"source": "Harry-Roxy", "target": "Alex" },
{"source": "Harry-Roxy", "target": "Jordan-Renae" },
{"source": "Harry-Roxy", "target": "Adam-Krista" },
{"source": "Harry-Roxy", "target": "Ben-Melissa" },
{"source": "Nicky", "target": "Hobie-Elise" },
{"source": "Nicky", "target": "Daniel" },
{"source": "Nicky", "target": "Derek" },
{"source": "Nicky", "target": "Chris-Jessie" },
{"source": "Nicky", "target": "Roger-Randall" },
{"source": "Nicky", "target": "Sam" },
{"source": "Nicky", "target": "Alex" },
{"source": "Nicky", "target": "Adam-Krista" },
{"source": "Nicky", "target": "Jordan-Renae" },
{"source": "Nicky", "target": "Ben-Melissa" },
{"source": "Derek", "target": "Jordan-Renae" },
{"source": "Derek", "target": "Hobie-Elise" },
{"source": "Chris-Jessie", "target": "Ben-Melissa" },
{"source": "Chris-Jessie", "target": "Daniel" },
{"source": "Daniel", "target": "Ben-Melissa" },
{"source": "Jordan-Renae", "target": "Ben-Melissa" },
{"source": "Jordan-Renae", "target": "Daniel" },
{"source": "Jordan-Renae", "target": "Hobie-Elise" },
{"source": "Daniel", "target": "Hobie-Elise" },
{"source": "Ben-Melissa", "target": "Hobie-Elise" },
{"source": "Sam", "target": "Adam-Krista" },
{"source": "Sam", "target": "Jordan-Renae" },
{"source": "Sam", "target": "Ben-Melissa" },
{"source": "Sam", "target": "Alex" },
{"source": "Alex", "target": "Adam-Krista" },
{"source": "Adam-Krista", "target": "Ben-Melissa" },
{"source": "Dave-Nicole", "target": "Harry-Roxy" },
{"source": "Dave-Nicole", "target": "Nicky" },
{"source": "Dave-Nicole", "target": "Daniel" },
{"source": "Dave-Nicole", "target": "Sam" },
{"source": "Dave-Nicole", "target": "Adam-Krista" },
{"source": "Dave-Nicole", "target": "Alex" },
{"source": "Dave-Nicole", "target": "Ben-Melissa" },
{"source": "Mom-Dad", "target": "Ben-Melissa" },
{"source": "Mom-Dad", "target": "Harry-Roxy" },
{"source": "Mom-Dad", "target": "Nicky" },
{"source": "Mom-Dad", "target": "Daniel" },
{"source": "Mom-Dad", "target": "Sam" },
{"source": "Mom-Dad", "target": "Alex" },
{"source": "Mom-Dad", "target": "Adam-Krista" },
{"source": "Mom-Dad", "target": "Quinn-Andrea" },
{"source": "Dave-Nicole", "target": "Quinn-Andrea" },
{"source": "Dave-Nicole", "target": "Art-Shannon" },
{"source": "Mom-Dad", "target": "Lynda-Howard" },
{"source": "Mom-Dad", "target": "Alana-Rick" },
{"source": "Mom-Dad", "target": "Cindy-Scott" },
{"source": "Mom-Dad", "target": "Marcia-Gabriel" },
{"source": "Mom-Dad", "target": "Tom-Julie" },
{"source": "Mom-Dad", "target": "Tim-Joanne" },
{"source": "Mom-Dad", "target": "Roger-Randall" },
{"source": "Dave-Nicole", "target": "Roger-Randall" },
{"source": "Dave-Nicole", "target": "Marcia-Gabriel" },
{"source": "Dave-Nicole", "target": "Lynda-Howard" },
{"source": "Dave-Nicole", "target": "Alana-Rick" },
{"source": "Dave-Nicole", "target": "Cindy-Scott" },
{"source": "Kim-Christian", "target": "Chris-Nicole" },
{"source": "Chris-Nicole", "target": "Grant-Natalie" },
{"source": "Brian-Tara", "target": "Paul-Willa" },
{"source": "Mom-Dad", "target": "Paul-Willa" },
{"source": "Dave-Nicole", "target": "Paul-Willa" },
{"source": "Katherine-Winston", "target": "Paul-Willa" },
{"source": "Nathan-Amy", "target": "Paul-Willa" },
{"source": "Jenny", "target": "Paul-Willa" },
{"source": "Lauren", "target": "Paul-Willa" },
{"source": "Luan-Taurus", "target": "Paul-Willa" },
{"source": "John-Tiffany", "target": "Paul-Willa" },
{"source": "Orion-Jaime", "target": "Paul-Willa" },
{"source": "Tim-Kim", "target": "Paul-Willa" },
{"source": "Lily-Chunhui", "target": "Paul-Willa" },
{"source": "Melissa-Steph", "target": "Paul-Willa" },
{"source": "Simon-Brigid", "target": "Paul-Willa" },
{"source": "Harry-Roxy", "target": "Paul-Willa" },
{"source": "Nicky", "target": "Paul-Willa" },
{"source": "Daniel", "target": "Paul-Willa" },
{"source": "Hobie-Elise", "target": "Paul-Willa" },
{"source": "Chris-Jessie", "target": "Paul-Willa" },
{"source": "Derek", "target": "Paul-Willa" },
{"source": "Chris-Nicole", "target": "Paul-Willa" },
{"source": "Grant-Natalie", "target": "Paul-Willa" },
{"source": "Kim-Christian", "target": "Paul-Willa" },
{"source": "Sam", "target": "Paul-Willa" },
{"source": "Alex", "target": "Paul-Willa" },
{"source": "Jordan-Renae", "target": "Paul-Willa" },
{"source": "Quinn-Andrea", "target": "Paul-Willa" },
{"source": "Art-Shannon", "target": "Paul-Willa" },
{"source": "Adam-Krista", "target": "Paul-Willa" },
{"source": "Ben-Melissa", "target": "Paul-Willa" },
{"source": "Lynda-Howard", "target": "Paul-Willa" },
{"source": "Alana-Rick", "target": "Paul-Willa" },
{"source": "Cindy-Scott", "target": "Paul-Willa" },
{"source": "Marcia-Gabriel", "target": "Paul-Willa" },
{"source": "Tom-Julie", "target": "Paul-Willa" },
{"source": "Tim-Joanne", "target": "Paul-Willa" },
{"source": "Roger-Randall", "target": "Paul-Willa" },
{"source": "Lynda-Howard", "target": "Paul-Willa" },
{"source": "Alana-Rick", "target": "Paul-Willa" },
{"source": "Cindy-Scott", "target": "Paul-Willa" },
{"source": "Marcia-Gabriel", "target": "Paul-Willa" },
{"source": "Tom-Julie", "target": "Paul-Willa" },
{"source": "Tim-Joanne", "target": "Paul-Willa" },
{"source": "Roger-Randall", "target": "Paul-Willa" }
]}