Dynamic resize based on window size.

templates/me.html

@@ -4,6 +4,16 @@
     <h1>People following you</h1>
     <div id='chart'> </div>
     <style>
+        #chart {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+        }
+
         circle.node {
             stroke: #fff;
             stroke-width: 1.5px;
@@ -22,14 +32,15 @@
         var followers = {{ followers|safe }};
         var map = {};
 
-        var w = 960,
+        var w = $('#chart').width();
-            h = 960;
+            h = $('#chart').height();
         var color = d3.scale.category20();
 
+        /* Use a "flexible force-directed graph layout". */
         var force = d3.layout.force()
                 .gravity(.05)
-                .distance(250)
+                .distance(200)
-                .charge(-500)
+                .charge(-250)
                 .size([w, h]);
 
         var nodes = force.nodes(),
@@ -112,6 +123,18 @@
         for (var i = 0; i<followers.length; i++){
             loadFollowerFollowers(followers[i]);
         }
+
+        /* Install an event handler for window resizes */
+        $(window).resize(function() {
+          var chart = $('#chart');
+          var svg = $('#chart svg');
+          var w = chart.width();
+          var h = chart.height();
+
+          force.size([w, h]);
+          svg.width(w);
+          svg.height(h);
+        });
     });
     </script>
 {% endblock %}