costars-matrix/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Game of Thrones: Co-stars Co-occurrence</title>
    <meta charset="UTF-8">
    <meta name="description" content="Game of Thrones: Co-stars">
    <meta name="author" content="Jeffrey Lancaster">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style.css" />
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  </head>
  <body>
    <p>
      <select id="order">
        <option value="name">Order by Name</option>
        <option value="count">Order by Frequency</option>
        <!-- <option value="group">by Cluster</option> -->
      </select></p>
    <svg class="matrix"></svg>
        
<script>
var config = {
  "title":"Co-stars Co-Occurrence",
  "width": 3200,
  "height": 3200,
  "margin": {
    "top": 120,
    "right": 60,
    "bottom": 60,
    "left": 120
  }
}

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

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

d3.queue()
  .defer(d3.json, '../data/costars.json')
  .defer(d3.json, '../data/characters.json')
  .await(ready);

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

  data = Object.values(data)
    .filter(function(val){
      return val.actors.length > 1
    });
    
  data.forEach(function(val, ind){
    val.actors.forEach(function(v, i){
      actors[v.personID] = {"actorName":v.actorName, "personID":v.personID};
    });
  })

  // clean up data from costars.json [missing n's, etc.]
  d.characters.forEach(function(val, ind){
    // character played by one actor
    if(val.actorLink){
      var key = val.actorLink.split("/")[2];
      if(actors.hasOwnProperty(key)){
        actors[key].actorName = val.actorName;
      }
    }
    // character played by multiple actors
    if(val.actors){
      val.actors.forEach(function(v, i){
        var key = v.actorLink.split("/")[2];
        if(actors.hasOwnProperty(key)){
          actors[key].actorName = v.actorName;
        }
      })
    }
  })
    
  // append an id number to actors and nodes
  var counter = 0;
  for(var i in actors){
    actors[i].id = counter;
    matrix.nodes.push({
      "name": actors[i].actorName,
      "group": 1,
      "id": counter,
      "count": 0
    });
    counter++;
  }

  // Compute index per node.
  var matrixArr = [];
  matrix.nodes.forEach(function(node, i) {
    matrixArr[i] = d3.range(matrix.nodes.length).map(function(j) { return {x: j, y: i, z: 0}; });
  });
  
  data.forEach(function(value, j){
    value.actors.forEach(function(val, ind){
      var a = actors[val.personID].id;
      matrix.nodes[a].count++;
      data[j].actors.forEach(function(v, i){
        var b = actors[v.personID].id;
        matrixArr[a][b].z++;
      })
    })
  })

  // make the visualization

  var margin = config.margin,
    width = config.width,
    height = config.height;

  var x = d3.scaleBand().range([0, width]),
    z = d3.scaleLinear().domain([0, 100]).clamp(true),
    //c = d3.schemeCategory10;
    c = d3.scaleOrdinal().range(["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]);

  var svg = d3.select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .style("margin-left", -margin.left + "px")
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var nodes = matrix.nodes,
    n = nodes.length;

  // Precompute the orders.
  var orders = {
    name: d3.range(n).sort(function(a, b) { return d3.ascending(nodes[a].name, nodes[b].name); }),
    count: d3.range(n).sort(function(a, b) { return nodes[b].count - nodes[a].count; })
  };

  // The default sort order.
  x.domain(orders.name);

  svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height);

  var row = svg.selectAll(".row")
      .data(matrixArr)
    .enter().append("g")
      .attr("class", "row")
      .attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
      .each(row);

  row.append("line")
      .attr("x2", width);

  row.append("text")
      .attr("x", -6)
      .attr("y", x.bandwidth() / 2)
      .attr("dy", ".32em")
      .attr("text-anchor", "end")
      .text(function(d, i) { return nodes[i].name; });

  var column = svg.selectAll(".column")
    .data(matrixArr)
    .enter().append("g")
      .attr("class", "column")
      .attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });

  column.append("line")
      .attr("x1", -width);

  column.append("text")
      .attr("x", 6)
      .attr("y", x.bandwidth() / 2)
      .attr("dy", ".32em")
      .attr("text-anchor", "start")
      .text(function(d, i) { return nodes[i].name; });

  function row(row) {
    var cell = d3.select(this).selectAll(".cell")
        .data(row.filter(function(d) { return d.z; }))
      .enter().append("rect")
        .attr("class", "cell")
        .attr("x", function(d) { return x(d.x); })
        .attr("width", x.bandwidth())
        .attr("height", x.bandwidth())
        .style("fill-opacity", function(d) { return 8 * z(d.z); })
        .style("fill", function(d) { return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null; })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .append("svg:title")
          .text(function(d,i) {
            var suffix = (d.z > 1) ? "s" : "";
            if(d.x == d.y){
              return `${matrix.nodes[d.x].name} has been in ${d.z} movie${suffix} with other actors`;
            } else {
              return `${matrix.nodes[d.x].name} and ${matrix.nodes[d.y].name} have been in ${d.z} movie${suffix} together`;
            }
          });
  }

  function mouseover(p) {
    d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
    d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
  }

  function mouseout() {
    d3.selectAll("text").classed("active", false);
  }

  d3.select("#order").on("change", function() {
    clearTimeout(timeout);
    order(this.value);
  });

  function order(value) {
    x.domain(orders[value]);

    var t = svg.transition().duration(2500);

    t.selectAll(".row")
      .delay(function(d, i) { return x(i) * 4; })
      .attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
    .selectAll(".cell")
      .delay(function(d) { return x(d.x) * 4; })
      .attr("x", function(d) { return x(d.x); });

    t.selectAll(".column")
      .delay(function(d, i) { return x(i) * 4; })
      .attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
  }

  var timeout = setTimeout(function() {
    order("count");
    d3.select("#order").property("selectedIndex", 1);
    }, 5000);
}


</script>

  </body>
</html>