relations-circle/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Game of Thrones: Relations</title>
    <meta charset="UTF-8">
    <meta name="description" content="Game of Thrones: Relations">
    <meta name="author" content="Jeffrey Lancaster">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style.css" />
  </head>
  <body>
    <svg></svg>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <!-- for using style objects to apply multiple styles at once -->
    <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
    <script>

/* HELPFUL FUNCTIONS */

// to convert scene start/end times into seconds
function sec(timeString){
  var sec = 0;
  if (timeString.length == 0) return sec;
  var splitArray = timeString.split(":");
  sec = 3600*parseFloat(splitArray[0])+60*parseFloat(splitArray[1])+parseFloat(splitArray[2]);
  return sec;
}

// to convert seconds into hh:mm:ss
function secondsToHMS(d) {
  var date = new Date(null);
  date.setSeconds(d); // specify value for SECONDS here
  return date.toISOString().substr(11, 8);
}

// to dedpulicate an array
function onlyUnique(value, index, self) { 
  return self.indexOf(value) === index;
}

//   // "characterName",
//   // "credited",
//   // "actors",
//   // "actorName",
//   // "actorLink",
//   // "characterImageThumb",
//   // "characterImageFull",
//   // "characterNameAlt",
//   // "characterLink",
//   // "nickname",
//   // "parents",
//   "killedBy",
//   "siblings", // need to deduplicate?
//   "parentOf",
//   "marriedEngaged", // need to deduplicate?
//   // "killed" // covered by killedBy

var config = {
  "title":"Relations",
  "width":2000,
  "height":2000,
  "viewBox":"-1000 -1000 2000 2000",
  "circle":{
    "r":"800",
    "style":{
      "stroke":"steelblue",
      "stroke-opacity":"0.5",
      "fill":"none"
    }
  },
  "directed":[
    {
      "type":"killedBy",
      "style":{
        "stroke": "#000",
        "stroke-width": 2,
        "stroke-opacity": 1
      },
      "textStyle":{
        "font-size": "1em",
        "dominant-baseline": "central"
      }
    }
  ],
  "undirected":[
    {
      "type":"parentOf",
      "style":{
        "stroke": "#999",
        "stroke-width": 1,
        "stroke-opacity": 0.6
      },
        "textStyle":{
        "font-size": "1em",
        "dominant-baseline": "central"
      }
    },
    {
      "type":"marriedEngaged",
      "style":{
        "stroke": "blue",
        "stroke-width": 1,
        "stroke-opacity": 0.6,
        "stroke-dasharray": "5,5"
      },
      "textStyle":{
        "font-size": "1em",
        "dominant-baseline": "central"
      }
    }
  ]
}

/* IMPORT DATA */
d3.queue()
  .defer(d3.json, '../data/characters.json')
  .await(ready);

function ready(error, h) {
  if (error) throw error;
  console.log("now that the files are loaded... do magic.");

  characters = h.characters;

  /* CONFIG SETUP */
  d3.select("svg")
    .attr("width", config.width)
    .attr("height", config.height)
    .attr("viewBox", config.viewBox)
    .append("circle")
      .attr("r", config.circle.r)
      .styles(config.circle.style);
  /* END CONFIG SETUP */

  var directed = config.directed.map(function(v,i){
    return v.type;
  })
  var undirected = config.undirected.map(function(v,i){
    return v.type;
  })
  var relationships = [...directed, ...undirected];


  /* MAKE A LIST OF ALL RELATIONSHIPS in characters.json */
  /*
  var relations = [];
  for(var i in charactersData){
    Object.keys(charactersData[i]).forEach(function(j,val){
      relations.push(j);
    })
  }
  relations = relations.filter(onlyUnique);
  console.log(relations);
  */

  var charactersArray = [];
  var matrix = {
    "nodes":[],
    "links":[]
  }

  // build an array of characters involved
  relationships.forEach(function(val, i){
    characters.forEach(function(value, j){
      if(characters[j].hasOwnProperty(val)){
        charactersArray.push(value.characterName);
        characters[j][val].forEach(function(valu, k){
          charactersArray.push(valu);
        });
      }
    })
  });

  // deduplicate array
  charactersArray = charactersArray.filter(onlyUnique).sort();

  // modify charactersArray to be objects with image files, other info
  charactersArray.forEach(function(v,i){
    var index = characters.findIndex(function(element){
      return element.characterName == v;
    });
    var image = (index > -1 && characters[index].characterImageThumb) ? characters[index].characterImageThumb : null;
    charactersArray[i] = {
      "name":charactersArray[i],
      "image":image
    };
  })

  // add nodes to matrix
  matrix.nodes = charactersArray.map(function(val, ind){
    return {
      "id":val.name,
      "group":1,
      "image":val.image
    }
  })

  // build list of links based on position in array of characters
  relationships.forEach(function(val, i){
    characters.forEach(function(value, j){
      if(value.hasOwnProperty(val)){
        value[val].forEach(function(v, k){
          matrix.links.push({
            "source":v,
            "target":value.characterName,
            "value":1,
            "type":val
          });
        });
      }
    })
  });

  // deduplicate links
  matrix.links.forEach(function(val, ind){
    matrix.links.forEach(function(v, i){
      if(i > ind){
        if(val.source == v.target &&
          val.target == v.source &&
          val.type == v.type){
          matrix.links.splice(i, 1);
        }
      }
    })
  })
  
  /* BUILD THE VISUALIZATION */
  
  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height")
    radius = config.circle.r;

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

  var simulation = d3.forceSimulation()
     .force("link", d3.forceLink())
    // .force("charge", d3.forceManyBody())
    // .force("center", d3.forceCenter(width / 2, height / 2));
    //.force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("r", d3.forceRadial(function(d) { return radius; }))
    //.force('collision', d3.forceCollide().radius(5))
    .force("charge", d3.forceCollide());
    //.force("charge", d3.forceManyBody());
    //.force("center", d3.forceCenter(width / 2, height / 2));

  var nodes = matrix.nodes,
      nodeById = d3.map(nodes, function(d) { return d.id; }),
      links = matrix.links,
      bilinks = [];

  links.forEach(function(link) {
    var s = link.source = nodeById.get(link.source),
        t = link.target = nodeById.get(link.target),
        i = {}, // intermediate node
        type = link.type,
        id = "path"+Math.floor(100000*Math.random());
    //nodes.push(i);
    links.push({source: s, target: i, type: type}, {source: i, target: t, type: type});
    bilinks.push([s, i, t, type, id]);
  });

  // console.log(bilinks);

  var link = svg.selectAll(".link")
    .data(bilinks)
    .enter().append("path")
      .attr("id", function(d){ return d[4]})
      .attr("class", function(d){ return "link " + d[3]});

  // add arrows to lines - want to iterate through an object of classes for this
  svg.append("text")
    .attr("id", "arrows");

  // for directed arrays, add arrows and set styles
  for(var i in config.directed){
    bilinks.forEach(function(value, index){
      if(bilinks[index][3] == config.directed[i].type){
        svg.selectAll("#arrows")
          .append("textPath")
          .styles(config.directed[i].textStyle)
          .attr("xlink:xlink:href", function(d){ return "#"+bilinks[index][4]})
          .attr("text-anchor", "middle")
          .attr("startOffset", "50%")
          .text("➤");
      }
    });
  }

  // check to see if the property is an array, and if so, apply the styles therein
  [...config.directed, ...config.undirected].forEach(function(val, ind){
    svg.selectAll(`.${val.type}`)
    .styles(val.style)
  })

  var node = svg.selectAll(".node")
    .data(nodes.filter(function(d) { return d.id; }))
    .enter().append("g")
      .attr("transform", function(d) { return (d.x && d.y) ? `translate(${radialPoint(d.x, d.y)})` : "translate(0,0)"; })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  function radialPoint(x, y) {
    return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
  }

  // console.log(nodes);

  svg.append("defs")
    .selectAll("defs")
    .data(nodes.filter(function(d) { return d.id; }))
    .enter().append("pattern")
      .attr("id", function(d){ return (d.image) ? d.id.toLowerCase().replace(/([^A-Z0-9])/gi,"") : ''; })
      .attrs({
        "height": "100%",
        "width":"100%",
        "patternContentUnits":"objectBoundingBox",
        "viewBox":"0 0 1 1",
        "preserveAspectRatio": "xMidYMid slice"
      })
      .append("image")
        .attrs({
          "height":"1",
          "width":"1",
          "preserveAspectRatio":"xMidYMid slice"
        })
        .attr("xlink:xlink:href", function(d){ return d.image; });

  node.append("circle")
      .attr("class", "node")
      .attr("fill", function(d){
        return (d.image) ? "url(#" + d.id.toLowerCase().replace(/([^A-Z0-9])/gi,"") + ")" : color(d.group);
      })
      .attr("r", 15)
      .attrs({"stroke": "#000", "stroke-width": "1"});

  node.append("text")
      .attr("dy", "0.31em")
      .text(function(d) { return d.id; });

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

  simulation.force("link")
      .strength(0)
      .links(links);

  simulation.force("r")
      .strength(1);

  var chargeRadius = radius*Math.sin((radius*2*Math.PI/matrix.nodes.length)/(2*radius)); //d = 2•r•sin(a/2r)

  simulation.force("charge")
      .radius(chargeRadius);

  function ticked() {
    link.attr("d", positionLink);
    node.selectAll("text").attr("x", function(d) { return (d.x > 0) ? 20 : -20; })
    node.attr("transform", positionNode);
    node.selectAll("text").attr("text-anchor", function(d) { return (d.x > 0) ? "start" : "end"});
    svg.selectAll(".node")
      .attr("transform", function(d) { return "rotate(" + -180*Math.atan(d.y/d.x)/Math.PI + ")"; })
    
  }

  function positionLink(d) {
    return "M" + d[0].x + "," + d[0].y
         + "S" + 0 + "," + 0
         + " " + d[2].x + "," + d[2].y;
  }

  function positionNode(d) {
    var distanceToCenter = Math.sqrt(d.x * d.x + d.y * d.y);
    return "translate(" + d.x + "," + d.y + ") rotate(" + 180*Math.atan(d.y/d.x)/Math.PI + ")";

  }

  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;
  }

  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null, d.fy = null;
  }
  
};

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