Fisheye Distortion on a Force Directed Graphy

Trying to implement fisheye distortion on the graph with a button click.

HTML

<!-- Pass json to Javascript -->
<div class="graph_json" data-json="{&quot;nodes&quot;:[{&quot;name&quot;:&quot;Daniel&quot;,&quot;group&quot;:1},{&quot;name&quot;:&quot;Nick&quot;,&quot;group&quot;:1},{&quot;name&quot;:&quot;Sylvia&quot;,&quot;group&quot;:1},{&quot;name&quot;:&quot;Meredith&quot;,&quot;group&quot;:2},{&quot;name&quot;:&quot;Kevin&quot;,&quot;group&quot;:2},{&quot;name&quot;:&quot;Edwin&quot;,&quot;group&quot;:2},{&quot;name&quot;:&quot;Tim&quot;,&quot;group&quot;:3}],&quot;links&quot;:[{&quot;source&quot;:0,&quot;target&quot;:1,&quot;value&quot;:1},{&quot;source&quot;:0,&quot;target&quot;:2,&quot;value&quot;:1},{&quot;source&quot;:1,&quot;target&quot;:0,&quot;value&quot;:1},{&quot;source&quot;:1,&quot;target&quot;:2,&quot;value&quot;:1},{&quot;source&quot;:2,&quot;target&quot;:0,&quot;value&quot;:1},{&quot;source&quot;:2,&quot;target&quot;:1,&quot;value&quot;:1},{&quot;source&quot;:3,&quot;target&quot;:4,&quot;value&quot;:1},{&quot;source&quot;:3,&quot;target&quot;:5,&quot;value&quot;:1},{&quot;source&quot;:4,&quot;target&quot;:3,&quot;value&quot;:1},{&quot;source&quot;:4,&quot;target&quot;:5,&quot;value&quot;:1},{&quot;source&quot;:5,&quot;target&quot;:3,&quot;value&quot;:1},{&quot;source&quot;:5,&quot;target&quot;:4,&quot;value&quot;:1},{&quot;source&quot;:6,&quot;target&quot;:0,&quot;value&quot;:1},{&quot;source&quot;:6,&quot;target&quot;:1,&quot;value&quot;:1},{&quot;source&quot;:6,&quot;target&quot;:2,&quot;value&quot;:1},{&quot;source&quot;:6,&quot;target&quot;:3,&quot;value&quot;:1},{&quot;source&quot;:6,&quot;target&quot;:4,&quot;value&quot;:1},{&quot;source&quot;:6,&quot;target&quot;:5,&quot;value&quot;:1}]}">
</div>    

<!-- Bring in d3.js and fisheye plugin -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="fisheye.js?0.0.3"></script>

<div class="container">
  <div class="jumbotron">
    <div id="display_graph">
      <!-- Placeholder for force directed graph -->
    </div>
  </div>
</div>


<!--...

SCSS

// Place all the styles related to the Graphs controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$font-stack: Arial, sans-serif;

body {
  font-family: $font-stack;
}

/* Control Panel */

.graph_control_panel {
  border-radius: 25px;
  font-size: 18px;
  padding: 10px;
  background-color: #eee;
}

#behaviors {
  width: 34%;
  float: left;
}

#relationships {
  width: 65%;
  float: right;
}

#fisheye {
  float: left;
}

#refresh {
  float: right;
}

.num_value {
  width: 70px;
}

/* Fore Directed Graph */

.node text {
  pointer-events: none;
  font: sans-serif;
  color: 'black';
}

.link {
  stroke: #ccc;
  stroke-opacity: .6;
}

JavaScript

// Global variables
var svg, node, link; 
var fisheye_on = false;

// Make force directed graph on button click
$(document).ready( function() {
  $("#refresh_btn").click( function() {
    // Make sure fisheye is turned off
    $('#fisheye_btn').css('color', 'white');
    fisheye_on = false;
    make_graph();
  });
});

// Turn on and off fisheye distortion
$(document).ready( function() {
  $('#fisheye_btn').click( function() {
    var glyph_color = $(this).css('color');
    // original color is white
    orig_color = 'rgb(255, 255, 255)';

    if (glyph_color == orig_color) {
      $(this).css('color', 'orange');
      fisheye_on = true;
      make_graph();
    } else {
      $(this).css('color', orig_color);
      fisheye_on = false;
      make_graph();
    };
  });
});


function make_graph() {

  // Clear out the div first
  $("#display_graph svg:first").remove();

  // Sets size
  var width = 420,
      height = 340;

  // Maps groups to colors
  var color = d3.scale.category20();

  // Select the div and append a svg
  svg = d3.select("#display_graph").append("svg")
      .attr("width", width)
      .attr("height", height);

  // Pull json from graph
  var json_from_db = $('.graph_json').data('json');
  var json_nodes = json_from_db.nodes
  var json_links = json_from_db.links

  // Sets up the force directed graph
  var charge_val = $('#charge').val();
  var link_distance_val = $('#link_distance').val();
  var force = d3.layout.force()
      .charge(charge_val)
      .linkDistance(link_distance_val)
      .size([width, height])
      .nodes(json_nodes)
      .links(json_links)
      .start();

  link = svg.selectAll(".link")
      .data(json_links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var font_size_px = $('#font_size').val();
  node = svg.selectAll(".node")
      .data(json_nodes)
    .enter().append("g")
      .attr("class", "node")
      .style("font-size",...