.gitignore

.DS_Store
**/node_modules
**/d3.*

fun.json

{
  "nodes": [
    {
      "id": "super mario bros.",
      "group": 0
    },
    {
      "id": "puzzles",
      "group": 5,
      "shared": 2
    },
    {
      "id": "setting",
      "group": 5,
      "shared": 2
    },
    {
      "id": "easy to learn",
      "group": 5,
      "shared": 4
    },
    {
      "id": "curiosity",
      "group": 5,
      "shared": 4
    },
    {
      "id": "challenge",
      "group": 5,
      "shared": 5
    },
    {
      "id": "engagement",
      "group": 5,
      "shared": 3
    },
    {
      "id": "rewards",
      "group": 5,
      "shared": 2
    },
    {
      "id": "collecting",
      "group": 0
    },
    {
      "id": "replayability",
      "group": 5,
      "shared": 3
    },
    {
      "id": "expression",
      "group": 5,
      "shared": 3
    },
    {
      "id": "effectiveness",
      "group": 5,
      "shared": 3
    },
    {
      "id": "excitement",
      "group": 5,
      "shared": 4
    },
    {
      "id": "gratification",
      "group": 5,
      "shared": 5
    },
    {
      "id": "characters",
      "group": 5,
      "shared": 4
    },
    {
      "id": "street fighter 2",
      "group": 1
    },
    {
      "id": "socialization",
      "group": 5,
      "shared": 2
    },
    {
      "id": "anxiety",
      "group": 5,
      "shared": 2
    },
    {
      "id": "fantasy",
      "group": 5,
      "shared": 2
    },
    {
      "id": "story",
      "group": 1
    },
    {
      "id": "creativity",
      "group": 5,
      "shared": 2
    },
    {
      "id": "diablo 2",
      "group": 2
    },
    {
      "id": "stress relief",
      "group": 5,
      "shared": 2
    },
    {
      "id": "flow",
      "group": 5,
      "shared": 2
    },
    {
      "id": "exploration",
      "group": 2
    },
    {
      "id": "thrill",
      "group": 5,
      "shared": 3
    },
    {
      "id": "discovery",
      "group": 5,
      "shared": 2
    },
    {
      "id": "novelty",
      "group": 5,
      "shared": 3
    },
    {
      "id": "surprise",
      "group": 5,
      "shared": 3
    },
    {
      "id": "addictiveness",
      "group": 5,
      "shared": 2
    },
    {
      "id": "progress",
      "group": 5,
      "shared": 3
    },
    {
      "id": "theme",
      "group": 5,
      "shared": 2
    },
    {
      "id": "storyline",
      "group": 2
    },
    {
      "id": "game feel",
      "group": 5,
      "shared": 3
    },
    {
      "id": "environment",
      "group": 5,
      "shared": 3
    },
    {
      "id": "sensory immersion",
      "group": 5,
      "shared": 2
    },
    {
      "id": "setting/world",
      "group": 5,
      "shared": 3
    },
    {
      "id": "learnability",
      "group": 5,
      "shared": 3
    },
    {
      "id": "control",
      "group": 5,
      "shared": 2
    },
    {
      "id": "concentration",
      "group": 5,
      "shared": 2
    },
    {
      "id": "competence",
      "group": 5,
      "shared": 3
    },
    {
      "id": "predictable",
      "group": 2
    },
    {
      "id": "rewards/penalty",
      "group": 5,
      "shared": 2
    },
    {
      "id": "greed",
      "group": 2
    },
    {
      "id": "grinding",
      "group": 2
    },
    {
      "id": "feedback",
      "group": 5,
      "shared": 2
    },
    {
      "id": "frustration",
      "group": 5,
      "shared": 3
    },
    {
      "id": "fellowship",
      "group": 2
    },
    {
      "id": "the people factor",
      "group": 5,
      "shared": 2
    },
    {
      "id": "communication",
      "group": 5,
      "shared": 2
    },
    {
      "id": "relaxation",
      "group": 2
    },
    {
      "id": "starcraft",
      "group": 3
    },
    {
      "id": "difficult to master",
      "group": 5,
      "shared": 2
    },
    {
      "id": "interactivity",
      "group": 3
    },
    {
      "id": "strategy",
      "group": 3
    },
    {
      "id": "human interaction",
      "group": 3
    },
    {
      "id": "competition",
      "group": 3
    },
    {
      "id": "conflict",
      "group": 3
    },
    {
      "id": "suspense",
      "group": 3
    },
    {
      "id": "tension",
      "group": 5,
      "shared": 2
    },
    {
      "id": "arousal",
      "group": 3
    },
    {
      "id": "satisfaction",
      "group": 5,
      "shared": 2
    },
    {
      "id": "sensation",
      "group": 5,
      "shared": 2
    },
    {
      "id": "showing off",
      "group": 3
    },
    {
      "id": "overall game design",
      "group": 5,
      "shared": 3
    },
    {
      "id": "complexity",
      "group": 5,
      "shared": 2
    },
    {
      "id": "predictible",
      "group": 3
    },
    {
      "id": "sadism",
      "group": 3
    },
    {
      "id": "narrative",
      "group": 3
    },
    {
      "id": "sound design",
      "group": 3
    },
    {
      "id": "humor",
      "group": 3
    },
    {
      "id": "portal 2",
      "group": 4
    },
    {
      "id": "sensory stimuli",
      "group": 4
    },
    {
      "id": "simulation",
      "group": 4
    },
    {
      "id": "escape",
      "group": 4
    },
    {
      "id": "drama",
      "group": 4
    },
    {
      "id": "dishabituation",
      "group": 4
    },
    {
      "id": "imaginative immersion",
      "group": 4
    }
  ],

  "links": [
    {
      "source": "puzzles",
      "target": "super mario bros.",
      "value": 2
    },
    {
      "source": "setting",
      "target": "super mario bros.",
      "value": 2
    },
    {
      "source": "easy to learn",
      "target": "super mario bros.",
      "value": 3
    },
    {
      "source": "curiosity",
      "target": "super mario bros.",
      "value": 2
    },    {
      "source": "challenge",
      "target": "super mario bros.",
      "value": 3
    },
    {
      "source": "engagement",
      "target": "super mario bros.",
      "value": 3
    },    
    {
      "source": "rewards",
      "target": "super mario bros.",
      "value": 2
    },
    {
      "source": "collecting",
      "target": "super mario bros.",
      "value": 2
    },    
    {
      "source": "replayability",
      "target": "super mario bros.",
      "value": 2
    },
    {
      "source": "expression",
      "target": "super mario bros.",
      "value": 1
    },    
    {
      "source": "effectiveness",
      "target": "super mario bros.",
      "value": 1
    },
    {
      "source": "curiosity",
      "target": "super mario bros.",
      "value": 2
    },    {
      "source": "excitement",
      "target": "super mario bros.",
      "value": 2
    },
    {
      "source": "gratification",
      "target": "super mario bros.",
      "value": 2
    },    
    {
      "source": "characters",
      "target": "super mario bros.",
      "value": 1
    },
    {
      "source": "socialization",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "easy to learn",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "replayability",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "anxiety",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "challenge",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "excitement",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "engagement",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "effectiveness",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "fantasy",
      "target": "street fighter 2",
      "value": 1
    },
    {
      "source": "characters",
      "target": "street fighter 2",
      "value": 3
    },
    {
      "source": "story",
      "target": "street fighter 2",
      "value": 1
    },
    {
      "source": "rewards",
      "target": "street fighter 2",
      "value": 1
    },
    {
      "source": "curiosity",
      "target": "street fighter 2",
      "value": 2
    },
    {
      "source": "creativity",
      "target": "street fighter 2",
      "value": 1
    },
    {
      "source": "expression",
      "target": "street fighter 2",
      "value": 2
    },
    {
      "source": "gratification",
      "target": "street fighter 2",
      "value": 2
    },
    {
      "source": "setting",
      "target": "street fighter 2",
      "value": 1
    },
    {
      "source": "puzzles",
      "target": "street fighter 2",
      "value": 1
    },
    {
      "source": "easy to learn",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "challenge",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "stress relief",
      "target": "diablo 2",
      "value": 0
    },
    {
      "source": "flow",
      "target": "diablo 2",
      "value": 2
    },
    {
      "source": "exploration",
      "target": "diablo 2",
      "value": 2
    },
    {
      "source": "thrill",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "discovery",
      "target": "diablo 2",
      "value": 2
    },
    {
      "source": "novelty",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "surprise",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "addictiveness",
      "target": "diablo 2",
      "value": 2
    },
    {
      "source": "progress",
      "target": "diablo 2",
      "value": 3
    },
    {
      "source": "theme",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "storyline",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "game feel",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "environment",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "sensory immersion",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "setting/world",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "learnability",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "control",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "concentration",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "competence",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "predictable",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "gratification",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "rewards/penalty",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "greed",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "grinding",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "feedback",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "frustration",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "fellowship",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "characters",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "the people factor",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "communication",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "relaxation",
      "target": "diablo 2",
      "value": 1
    },
    {
      "source": "learnability",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "difficult to master",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "setting/world",
      "target": "starcraft",
      "value": 3
    },
    {
      "source": "interactivity",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "control",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "strategy",
      "target": "starcraft",
      "value": 4
    },
    {
      "source": "human interaction",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "challenge",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "sensory immersion",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "competition",
      "target": "starcraft",
      "value": 3
    },
    {
      "source": "conflict",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "anxiety",
      "target": "starcraft",
      "value": 3
    },
    {
      "source": "frustration",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "addictiveness",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "suspense",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "tension",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "effectiveness",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "competence",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "arousal",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "feedback",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "satisfaction",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "sensation",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "showing off",
      "target": "starcraft",
      "value": 3
    },
    {
      "source": "concentration",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "thrill",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "overall game design",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "expression",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "socialization",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "theme",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "characters",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "engagement",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "rewards/penalty",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "gratification",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "progress",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "flow",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "complexity",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "predictible",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "creativity",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "communication",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "the people factor",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "sadism",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "excitement",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "narrative",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "surprise",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "stress relief",
      "target": "starcraft",
      "value": 0
    },
    {
      "source": "novelty",
      "target": "starcraft",
      "value": 2
    },
    {
      "source": "curiosity",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "fantasy",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "sound design",
      "target": "starcraft",
      "value": 0
    },
    {
      "source": "environment",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "humor",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "replayability",
      "target": "starcraft",
      "value": 1
    },
    {
      "source": "humor",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "overall game design",
      "target": "portal 2",
      "value": 2
    },
    {
      "source": "easy to learn",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "difficult to master",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "challenge",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "sensation",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "sensory stimuli",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "excitement",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "game feel",
      "target": "portal 2",
      "value": 2
    },
    {
      "source": "novelty",
      "target": "portal 2",
      "value": 2
    },
    {
      "source": "simulation",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "discovery",
      "target": "portal 2",
      "value": 2
    },
    {
      "source": "surprise",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "learnability",
      "target": "portal 2",
      "value": 2
    },
    {
      "source": "competence",
      "target": "portal 2",
      "value": 2
    },
    {
      "source": "progress",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "gratification",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "thrill",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "environment",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "setting/world",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "game feel",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "escape",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "drama",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "complexity",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "tension",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "frustration",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "dishabituation",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "satisfaction",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "overall game design",
      "target": "portal 2",
      "value": 1
    },
    {
      "source": "imaginative immersion",
      "target": "portal 2",
      "value": 1
    }
  ]

}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fun Nodes</title>

  <style>

  .links line {
    stroke: #aaa;
  }

  .nodes circle {
    pointer-events: all;
    stroke: none;
    stroke-width: 40px;
  }

  #words {
    position: fixed;
    top: 10px;
    left: 10px;
    font-family: Monaco, monospace;
  }

  #legend {
    color: #fff;
    width: 360px;
    position: fixed;
    top: 10px;
    right: 10px;
  }

  #legend span {
    padding: 0 4px;
  }

  #super {
    background-color: hsla(224, 100%, 42%, 1);
  }

  #street {
    background-color: hsla(342, 100%, 42%, 1);
  }

  #diablo {
    background-color: hsla(17, 100%, 52%, 1);
  }

  #starcraft {
    background-color: hsla(166, 100%, 42%, 1);
  }

  #portal {
    background-color: hsla(266, 100%, 42%, 1);
  }

  #multi {
    background-color: hsla(262, 5%, 68%, 1);
  }

  </style>
</head>
<body>
  <div id="words">
    <p id="caption">Click nodes for title</p>
    <p id="legend"> 
      <span id="super">Super Mario Bros.</span>
      <span id="street">Street Fighter 2</span>
      <span id="starcraft">Starcraft</span>
      <span id="portal">Portal 2</span>
      <span id="diablo">Diablo 2</span>
      <span id="multi">Multiple</span>
    </p>
  </div>
  <svg width="1200" height="600"></svg>
  <script src="https://d3js.org/d3.v4.0.0-alpha.42.min.js"></script>
  <script src="nodes.js"></script>
</body>
</html>

nodes.js

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

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().distance(function(d){return 60 - (d.value * 15)}).id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody().strength(-100))
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("fun.json", function(error, graph) {
  if (error) throw error;

  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", 5)
      .attr("fill", setColor)
      .on("click", writeout)
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  node.append("title")
      .text(function(d) { 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; });
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
  simulation.fix(d);
}

function dragged(d) {
  simulation.fix(d, d3.event.x, d3.event.y);
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  simulation.unfix(d);
}

function writeout(d) {
  d3.select('#caption').html(d.id);
}

function setColor(d){
  if (d.group === 0) {
    if (d.id === 'super mario bros.'){
      return 'hsla(224, 100%, 32%, 1)';
    } else {
      return 'hsla(224, 100%, 70%, 1)'; 
    }
  } else if (d.group === 1) {
    if (d.id === 'street fighter 2'){
      return 'hsla(342, 100%, 32%, 1)';
    } else {
      return 'hsla(342, 100%, 70%, 1)'; 
    }
  } else if (d.group === 2) {
    if (d.id === 'diablo 2'){
      return 'hsla(17, 100%, 52%, 1)';
    } else {
      return 'hsla(17, 100%, 70%, 1)'; 
    }
  } else if (d.group === 3) {
    if (d.id === 'starcraft'){
      return 'hsla(166, 100%, 32%, 1)';
    } else {
      return 'hsla(166, 100%, 70%, 1)'; 
    }
  } else if (d.group === 4) {
    if (d.id === 'portal 2'){
      return 'hsla(266, 100%, 32%, 1)';
    } else {
      return 'hsla(266, 100%, 70%, 1)'; 
    }
  } else if (d.group === 5) {
      return 'hsla(262, 5%, ' + (100 - (+d.shared * 17)) + '%, 1)'; 
  } else {
    console.log('color error');
  }
}