Add the index page

poderopedia · Feb 21, 2014 · 1f86402 · 1f86402
1 parent d2ba93f
commit 1f86402
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 62 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -51,7 +51,8 @@ module.exports = function(grunt) {
                     cleancss: true
                 },
                 files: {
-                    'css/pty.css': 'less/pty.less'
+                    'css/pty.css': 'less/pty.less',
+                    'css/index.css': 'less/index.less'
                 }
             }
         }

diff --git a/_layouts/main.html b/_layouts/main.html
@@ -13,8 +13,6 @@
     <!-- Styles -->
     <link href="{{ site.baseurl }}/css/bootstrap.min.css" rel="stylesheet">
     <link href="{{ site.baseurl }}/css/main.css" rel="stylesheet">
-    <link href="{{ site.baseurl }}/css/syntax.css" rel="stylesheet">
-    <link href="{{ site.baseurl }}/css/pty.css" rel="stylesheet">
   </head>
 
   <body>

diff --git a/css/index.css b/css/index.css
diff --git a/css/pty.css b/css/pty.css
diff --git a/docs.md b/docs.md
@@ -3,6 +3,7 @@ layout: main
 title: Documentation
 ---
 
+<link href="{{ site.baseurl }}/css/pty.css" rel="stylesheet">
 <script src="{{ site.baseurl }}/js/lib/d3.min.js"></script>
 <script src="{{ site.baseurl }}/src/pty.js"></script>
 

diff --git a/embed.md b/embed.md
@@ -3,6 +3,7 @@ layout: embed
 title: Embed
 ---
 
+<link href="{{ site.baseurl }}/css/pty.css" rel="stylesheet">
 <script src="{{ site.baseurl }}/js/lib/d3.min.js"></script>
 <script src="{{ site.baseurl }}/src/pty.js"></script>
 

diff --git a/index.md b/index.md
@@ -3,53 +3,32 @@ layout: main
 title: Panama
 ---
 
+<link href="{{ site.baseurl }}/css/index.css" rel="stylesheet">
 <script src="{{ site.baseurl }}/js/lib/d3.min.js"></script>
 <script src="{{ site.baseurl }}/src/pty.js"></script>
 
-<div class="col-md-12">
-<div id="example04" class="example"></div>
-</div>
+<div class="row">
+    <div class="col-md-12">
+        <div id="demo"></div>
+    </div>
 </div>
 
 
 <script>
+d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
 
-    d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
-
-        if (error) { return error; }
+    if (error) { return error; }
 
-        var width = 600,
+    var width = parseInt(d3.select('#demo').style('width'), 10),
         height = 400;
 
     var chart01 = pty.chart.network()
         .width(width)
         .height(height)
         .nodeRadius(15)
-        .onClick(function(d) {
-
-            d.isclick = false;
-
-            var dataurl = "../data/"+d.id+".json";
-
-
-            d3.json(dataurl, function(error, data) {
-
-                if (!error) {
-
-                var olddata = d3.select('div#example04').data()[0];
-
-                olddata.nodes = olddata.nodes.concat(data.nodes);
-                olddata.links = olddata.links.concat(data.links);
-
-                d3.select('div#example04')
-                    .data([olddata])
-                    .call(chart01);}
-            });
-        })
-        .nodeClass(function(d) { return d.type; });
-
-        d3.select('div#example04').data([data]).call(chart01);
-    });
+        .nodeLabel(function(d) { return d.name; })
+        .nodeBaseURL(function(d) { return '{{site.baseurl}}/data/' + d.id + '.json'; });
 
-</script>
-</body>
+    d3.select('div#demo').data([data]).call(chart01);
+});
+</script>
diff --git a/less/index.less b/less/index.less
@@ -0,0 +1,72 @@
+
+// Named Colors
+@grey-dark:   #333;
+@grey-medium: #777;
+@grey-light:  #ddd;
+
+@slate-dark:   #556270;
+@green-light: #C7F464;
+@aqua-light:  #4ECDC4;
+
+.network-chart {
+
+    // Nodes
+    .node {
+        fill: @green-light;
+    }
+
+    .node-highlight{
+        fill: @aqua-light;
+    }
+
+    .node-center {
+        fill: @aqua-light;
+        stroke: @grey-light;
+        stroke-width: 3;
+    }
+
+    .node-clickable {
+        cursor: pointer;
+        stroke: @aqua-light;
+        stroke-width: 3;
+        stroke-opacity: 1;
+    }
+
+    // Node Labels
+    text.node-label {
+        fill: @grey-light;
+        text-anchor: start;
+        font-family: sans-serif;
+        font-size: 12px;
+    }
+
+    // Links
+    .link {
+        stroke: @aqua-light;
+        stroke-opacity: .5;
+        stroke-width: 2;
+        stroke-dasharray: 5,5
+    }
+
+    .center-link {
+        stroke-opacity: .2;
+        stroke-width: 4;
+        stroke-dasharray: none;
+    }
+
+
+    // Background
+    rect.background {
+        fill: @slate-dark;
+    }
+
+
+    // Brand
+    .brand text {
+        fill: @grey-light;
+        font-family: 'Roboto', sans-serif;
+        font-size: 11px;
+    }
+}
+
+
diff --git a/less/pty.less b/less/pty.less
@@ -65,6 +65,13 @@
         fill: @grey-light;
     }
 
+
+    // Brand
+    .brand text {
+        fill: @grey-medium;
+        font-family: 'Roboto', sans-serif;
+        font-size: 11px;
+    }
 }
 
 
diff --git a/src/pty.js b/src/pty.js
@@ -56,8 +56,6 @@ pty.chart.network = function() {
                 d.internalcn = 0;
             });
 
-            //console.log(dataNodes);
-
             // Identify unique links and set the source and target of each one
             k = 0;
             var idxLinks = {}, dataLinks = [];
@@ -111,34 +109,15 @@ pty.chart.network = function() {
 
             // Initialize the SVG element
             var svgEnter = svg.enter().append('svg')
-                .attr('width', me.width)
-                .attr('height', me.height);
-
-            // Create the container group, and groups for the nodes and links
-            svgEnter.append('g').attr('class', 'network-chart');
-
-            // Add a background group and rectangle
-            svgEnter.select('g.network-chart').append('g')
-                .attr('class', 'background')
-                .append('rect')
                 .attr('width', me.width)
                 .attr('height', me.height)
-                .attr('class', 'background');
-
-            svgEnter.select('g.network-chart').append('g')
-                .attr('class', 'links');
-
-            svgEnter.select('g.network-chart').append('g')
-                .attr('class', 'nodes');
-
-            svgEnter.select('g.network-chart').append('g')
-                .attr('class', 'labels');
+                .call(chart.init);
 
             var g = svg.select('g.network-chart'),
                 glinks = g.select('g.links'),
                 gnodes = g.select('g.nodes'),
-                glabels = g.select('g.labels');
-
+                glabels = g.select('g.labels'),
+                gbrand = g.select('g.brand');
 
             // Force layout
             // ------------
@@ -241,6 +220,38 @@ pty.chart.network = function() {
     }
 
 
+    chart.init = function(selection) {
+        selection.each(function(data) {
+
+            var svgEnter = d3.select(this),
+                gcont = svgEnter.append('g').attr('class', 'network-chart');
+
+            // Add a background group and rectangle
+            gcont.append('g')
+                .attr('class', 'background')
+                .append('rect')
+                .attr('width', me.width)
+                .attr('height', me.height)
+                .attr('class', 'background');
+
+            gcont.append('g').attr('class', 'links');
+            gcont.append('g').attr('class', 'nodes');
+            gcont.append('g').attr('class', 'labels');
+
+            var gbrand = gcont.append('g')
+                .attr('class', 'brand')
+                .attr('transform', 'translate(' + [me.width - 4, me.height - 4] + ')');
+
+            var brandLabel = gbrand.append('a')
+                .attr('xlink:href', 'http://www.masega.co')
+                .append('text')
+                .attr('class', 'masega-brand')
+                .attr('text-anchor', 'end')
+                .text('masega.co');
+        });
+    };
+
+
     // Accessor Methods
 
     // Generate Accessor Methods