d3 force directed graph, links not being drawn

I'm new to d3 and haven't much web frontend development experience. For a web application I have I'm trying to draw a force directed graph. I've been trying the last few hours to get it to work. I've been looking at lots of different code example and what I'm doing looks very similar. I eventually got nodes to draw but the links between the nodes don't show up and I was trying different things and nothing seems to work. I don't know why my code wouldn't draw the edges.

From printing the nodes and links to the console I saw that the nodes got extra attributes like the d3 docs had mentioned but the links never seem to get these attributes. Below is my javascript file and the JSON file. I reduced the JSON file to only 3 entries to try and make it easier to solve the problem.

var height = 1080;
var width = 1920;

var color = d3.scale.category20();

var force = d3.layout.force()
    .linkDistance(-120)
    .linkStrength(30)
    .size([width, height]);

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


d3.json("/static/javascript/language_data.json", function(data){

force
    .nodes(data.languages)
    .links(data.language_pairs)
    .start();

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

var node = svg.selectAll(".node")
  .data(data.languages)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) { return color(d.group); })
  .call(force.drag);

node.append("title")
.text(function(d) { return d.language; });

force.on("tick", function() {
  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; });
  });
});

Here is the JSON file:

From looking at few examples my understanding is that the source and target are index positions from the list of nodes.

{
   "languages":[
      {"language": "TypeScript", "group": 1},
      {"language": "Java",  "group": 2},
      {"language": "VHDL", "group": 3}
   ],
   "language_pairs":[
      {"source": "0", "target": "1", "value": 5},
      {"source": "1", "target": "2", "value": 5},
      {"source": "2", "target": "0", "value": 5}
   ]
}

Sorry if I left out anything! Thanks for any help!