cleanup

dalager · Oct 6, 2014 · f9897ba · f9897ba
1 parent c7486eb
commit f9897ba
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,8 @@ Usage
  1. clone project
  2. copy this spreadsheet: https://docs.google.com/spreadsheets/d/1ImMzp4JRvRjGnpOWCWp7XttNfkUP9di7WGTr6GymKMA/edit?pli=1#gid=0
  3. in your own copy, note the ID in the url matching "1ImMzp4JRvRjGnpOWCWp7XttNfkUP9di7WGTr6GymKMA" in the example spreadsheet
- 4. Copy it into NetworkGraph.js
+ 4. Copy it into the NetworkGraph.start() method in the index.html file
  5. Publish the sheet to internet to make it publicly available from your code.
- 6. Style it
- 7. Run it
+ 6. Customize index.html to fit your organization types
+ 7. Style it in the style.less file
+ 8. Run it
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Adoptionsmiljøet i DK</title>
+    <title>Social Network Mapper</title>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
@@ -13,9 +13,10 @@
     </div>
 
     <div class="legends">
-        <p><span class="publiccolor">&nbsp;</span> Offentlig organisation</p>
-        <p><span class="privatecolor">&nbsp;</span> Privat organisation</p>
+        <p><span class="publiccolor">&nbsp;</span> Public organisation</p>
+        <p><span class="privatecolor">&nbsp;</span> Private organisation</p>
         <p><span class="personcolor">&nbsp;</span> Person</p>
+        <p><span class="shopcolor">&nbsp;</span> Shop</p>
       </div>
     <script src="lib/d3.v2.js"></script>
     <script src="lib/jquery-1.11.1.min.js"></script>
@@ -24,7 +25,8 @@
 
 
     <script type="text/javascript">
-        NetworkGraph.start($(window).width(), $(window).height());
+        NetworkGraph.start($(window).width(), $(window).height(),'1ImMzp4JRvRjGnpOWCWp7XttNfkUP9di7WGTr6GymKMA');
     </script>
-
+<footer>Github project: <a href="https://github.com/dalager/SocialNetworkMapper">SocialNetworkMapper</a><br>
+Data from <a href="https://docs.google.com/spreadsheets/d/1ImMzp4JRvRjGnpOWCWp7XttNfkUP9di7WGTr6GymKMA/edit?pli=1#gid=0">this spreadsheet</a> </footer>
 </body>
diff --git a/src/NetworkGraph.js b/src/NetworkGraph.js
@@ -11,31 +11,27 @@ var NetworkGraph = (function () {
         $('.infobox').fadeIn();
         $('.infobox .header').text(relation.source.name);
 
-        $('.infobox .info').text((relation.active===0?"Tidligere ":"")+  relation.role + ' i ' + relation.target.name);
+        $('.infobox .info').text((relation.active===0?"Former ":"")+  relation.role + ' in ' + relation.target.name);
     };
 
     var linkMouseOut = function (relation) {
         $('text:contains("' + relation.source.name + '")').css('font-weight', 'normal');
         $('text:contains("' + relation.target.name + '")').css('font-weight', 'normal');
 
-
         clearTimeout(timerhandle);
         timerhandle=setTimeout(function () {
             $('.infobox').fadeOut();
 
         }, 2000);
-        //     var link = $(this);
-        //  link.attr('class',link.attr('class').replace(' highlight','')); // won't work with svg
-
     }
 
 
-    var start = function (_width, _height) {
+    var start = function (_width, _height, _spreadsheetId) {
         $('.infobox').mouseover(function () {
             console.log('mouseover infobox');
             $('.infobox').css('top', $('.infobox').position().top + 50);
         });
-        DataLoader.load('1ImMzp4JRvRjGnpOWCWp7XttNfkUP9di7WGTr6GymKMA', function (links) {
+        DataLoader.load(_spreadsheetId, function (links) {
             var nodes = {};
             if (links.toArray)
                 links = links.toArray();

diff --git a/style/style.css b/style/style.css
diff --git a/style/style.css.map b/style/style.css.map
diff --git a/style/style.less b/style/style.less
@@ -22,9 +22,10 @@
 	background-clip:         padding-box;
 }
 
-@publicorg: #ff3378;
-@privateorg: #0094ff; 
-@person:#ccc;
+@publicorgcolor: #ff3378;
+@privateorgcolor: #0094ff; 
+@shopcolor: #f0f;
+@personcolor:#ccc;
 @linehighlight:#ff6a00;
 
 body{
@@ -40,11 +41,13 @@ body{
         top:10px;
         left:10px;
     }
+    footer{position:absolute;bottom:10px;left:10px;}
 }
 
-.publiccolor{background:@publicorg;}
-.privatecolor{background:@privateorg;}
-.personcolor{background:@person;}
+.publiccolor{background:@publicorgcolor;}
+.privatecolor{background:@privateorgcolor;}
+.shopcolor{background:@shopcolor}
+.personcolor{background:@personcolor;}
 
 
 
@@ -95,15 +98,17 @@ circle {
 }
 
 .private.org circle {
-    fill: @privateorg;
+    fill: @privateorgcolor;
 }
 
 .public.org circle {
-    fill: @publicorg;
+    fill: @publicorgcolor;
+}
+.shop.org circle{
+    fill: @shopcolor;
 }
-
 .person circle {
-    fill: @person;
+    fill: @personcolor;
 }