From ac891f6fcbf145badd05b0a357faae7247c585b0 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 18 Aug 2012 23:04:06 -0700
Subject: [PATCH] Dynamic resize based on window size.

---
 templates/me.html | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/templates/me.html b/templates/me.html
index 8d79601..58f4659 100644
--- a/templates/me.html
+++ b/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,
-            h = 960;
+        var w = $('#chart').width();
+            h = $('#chart').height();
         var color = d3.scale.category20();
 
+        /* Use a "flexible force-directed graph layout". */
         var force = d3.layout.force()
                 .gravity(.05)
-                .distance(250)
-                .charge(-500)
+                .distance(200)
+                .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 %}