Merge branch 'release-0.2.0'

poderopedia · Mar 3, 2014 · 591dcb8 · 591dcb8
2 parents 4f7d0df + 88dc8c1
commit 591dcb8
Show file tree

Hide file tree

Showing 31 changed files with 2,851 additions and 167 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -32,6 +32,25 @@ module.exports = function(grunt) {
                 ]
             },
 
+            fontawesome: {
+                files: [
+                    {
+                        cwd: 'bower_components/font-awesome/fonts',
+                        src: '**.*',
+                        dest: 'fonts/',
+                        filter: 'isFile',
+                        expand: true
+                    },
+                    {
+                        cwd: 'bower_components/font-awesome/css',
+                        src: '**.min.css',
+                        dest: 'css/',
+                        filter: 'isFile',
+                        expand: true
+                    }
+                ]
+            },
+
             jquery: {
                 src: 'bower_components/jquery/dist/jquery.min.js',
                 dest: 'js/lib/jquery.min.js'
@@ -40,6 +59,11 @@ module.exports = function(grunt) {
             d3: {
                 src: 'bower_components/d3/d3.min.js',
                 dest: 'js/lib/d3.min.js'
+            },
+
+            underscore: {
+                src: 'bower_components/underscore/underscore.js',
+                dest: 'js/lib/underscore.js'
             }
 
         },
@@ -55,6 +79,20 @@ module.exports = function(grunt) {
                     'css/index.css': 'less/index.less'
                 }
             }
+        },
+
+        watch: {
+            options: {
+                livereload: true,
+            },
+            less: {
+                files: ['less/*.less'],
+                tasks: ['less']
+            },
+            pty: {
+                files: ['src/pty.js'],
+                tasks: ['less']
+            }
         }
 
 
@@ -63,11 +101,10 @@ module.exports = function(grunt) {
     // Enable the grunt plugins
     grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-contrib-less');
+    grunt.loadNpmTasks('grunt-contrib-watch');
 
 
-    // Register Tasks
-
-    // Test Task
+    // Tasks
     grunt.registerTask('build', ['copy', 'less']);
     grunt.registerTask('dist', ['build']);
     grunt.registerTask('default', ['build']);

diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -15,6 +15,8 @@
       <ul class="nav navbar-nav">
         <li><a href="{{ site.baseurl }}/docs">Docs</a></li>
         <li><a href="{{ site.baseurl }}/embed">Embed</a></li>
+        <li><a href="{{ site.baseurl }}/pages/fullscreen-demo">Fullscreen</a></li>
+        <li><a href="{{ site.baseurl }}/pages/embed-demo">Embed Demo</a></li>
       </ul>
     </div>
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "panama-network",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "authors": [
     "gregorio <[email protected]>"
   ],
@@ -22,7 +22,9 @@
     "tests"
   ],
   "dependencies": {
-    "d3": "~3.4.2"
+    "d3": "~3.4.2",
+    "font-awesome": "~4.0.3",
+    "underscore": "~1.6.0"
   },
   "devDependencies": {
     "bootstrap": "~3.1.1"

diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
diff --git a/css/index.css b/css/index.css
diff --git a/css/pty.css b/css/pty.css
diff --git a/data/G.json b/data/G.json
@@ -13,7 +13,7 @@
       "name": "E Navarro",
       "value": 20,
       "type": "candidato",
-      "numcn": 4
+      "numcn": 3
     },
         {
       "id": "D",

diff --git a/docs.md b/docs.md
@@ -3,10 +3,12 @@ layout: main
 title: Documentation
 ---
 
+<link href="{{ site.baseurl }}/css/font-awesome.min.css" rel="stylesheet">
 <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>
 
+
 # Network Chart
 
 <div class="row">
@@ -23,9 +25,12 @@ title: Documentation
 	var chart01 = pty.chart.network()
 		.width(width)
 		.height(height)
-        .nodeRadius(10);
+        .nodeRadius(10)
+        .nodeLabel(function(d) { return d.name; })
+        .nodeBaseURL(function(d) { return '{{site.baseurl}}/data/' + d.id + '.json'; })
+        .nodeURL(function(d) { return '{{site.baseurl}}/pages/' + d.id; });
 
-	d3.json('{{ site.baseurl }}/data/D.json', function(error, data) {
+	d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
 
 		if (error) { return error; }
 
@@ -85,7 +90,7 @@ The following script initiates a force chart using the data contained in the fil
 <div id="example01" class="example"></div>
 
 <script>
-    d3.json('{{ site.baseurl }}/data/B.json', function(error, data) {
+    d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
 
         // Create a chart with the default options
         var chart = pty.chart.network();
@@ -166,6 +171,10 @@ Set the styles for circles of class `persona` and `institucion`.
 .network-chart circle.institucion {
     fill: #556270;
 }
+
+.network-chart circle.candidato {
+    fill: white;
+}
 {% endhighlight %}
 
 Set the function to determine the node class using the attributes of each node element.
@@ -189,13 +198,17 @@ d3.select('div#example04')
         .network-chart circle.institucion {
             fill: #556270;
         }
+
+        .network-chart circle.candidato {
+            fill: white;
+        }
     </style>
 </div>
 
 <div id="example04" class="example"></div>
 
 <script>
-    d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
+    d3.json('{{ site.baseurl }}/data/E.json', function(error, data) {
 
         // Create a chart with the default options
         var chart = pty.chart.network()
@@ -207,6 +220,106 @@ d3.select('div#example04')
     });
 </script>
 
+<h3><span class="glyphicon glyphicon-bookmark"></span> Adding a Legend</h3>
+
+To add a legend, the user has to provide a list of all the node types as follows and submit the list to `.legendItems()`.
+
+{% highlight javascript %}
+     var legend = [
+        {name: 'Persona',     type: 'persona'},
+        {name: 'Candidato',   type: 'candidato'},
+        {name: 'Institución', type: 'institucion'}
+    ];
+
+    var chart01 = pty.chart.network()
+        .legendItems(legend);
+{% endhighlight %}
+
+The style of the circles representing each node type in the legend has to be set separately form the style for the nodes in the graph. This allows for instance to draw a stroke around the legend circles in order to differentiate them from the background without altering the style of the nodes of the graph.
+
+{% highlight javascript %}
+// Legend
+    .legend {
+
+        .persona {
+            fill: #75507b;
+            stroke: @grey-light;
+            stroke-width: 1;
+        }
+
+        .candidato {
+            fill: #729fcf;
+            stroke: @grey-light;
+            stroke-width: 1;
+        }
+
+        .institucion {
+            fill: #8ae234;
+            stroke: @grey-light;
+            stroke-width: 1;
+        }
+
+        text {
+            font-size: 11px;
+            fill: @grey-light;
+        }
+    }
+{% endhighlight %}
+
+<div>
+    <style type="text/css">
+// Legend
+    .legend {
+
+        .persona {
+            fill: #75507b;
+            stroke: @grey-light;
+            stroke-width: 1;
+        }
+
+        .candidato {
+            fill: #729fcf;
+            stroke: @grey-light;
+            stroke-width: 1;
+        }
+
+        .institucion {
+            fill: #8ae234;
+            stroke: @grey-light;
+            stroke-width: 1;
+        }
+
+        text {
+            font-size: 11px;
+            fill: @grey-light;
+        }
+    }
+
+    </style>
+</div>
+
+<div id="example05" class="example"></div>
+
+<script>
+
+    var legend = [
+        {name: 'Persona',     type: 'persona'},
+        {name: 'Candidato',   type: 'candidato'},
+        {name: 'Institución', type: 'institucion'}
+    ];
+
+    d3.json('{{ site.baseurl }}/data/E.json', function(error, data) {
+
+        // Create a chart with the default options
+        var chart = pty.chart.network()
+            .nodeClass(function(d) { return d.type; })
+            .legendItems(legend);
+
+        d3.select('div#example05')
+            .data([data])
+            .call(chart);
+    });
+</script>
 
 <h3><span class="glyphicon glyphicon-bookmark"></span> Adding Labels</h3>
 
@@ -219,16 +332,17 @@ d3.select('div#example05')
     .call(chart);
 {% endhighlight %}
 
-<div class="example" id="example05"></div>
+<div class="example" id="example06"></div>
 
 <script>
+
     d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
 
         // Create a chart with the default options
         var chart = pty.chart.network()
             .nodeLabel(function(d) { return d.name; });
 
-        d3.select('div#example05')
+        d3.select('div#example06')
             .data([data])
             .call(chart);
     });
@@ -254,7 +368,7 @@ d3.select('div#chart')
     .call(chart);
 {% endhighlight %}
 
-<div id="example06" class="example"></div>
+<div id="example07" class="example"></div>
 
 <script>
     d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
@@ -270,7 +384,48 @@ d3.select('div#chart')
             .nodeRadius(15)
             .nodeBaseURL(function(d) { return '{{site.baseurl}}/data/' + d.id + '.json'; });
 
-        d3.select('div#example06').data([data]).call(chart01);
+
+        d3.select('div#example07').data([data]).call(chart01);
+    });
+</script>
+
+
+<h3><span class="glyphicon glyphicon-bookmark" class=""></span> Setting link to a new entity</h3>
+
+In the following example, when the user clicks on a node, a link appears on the bottom left of the chart. The text corresponds to the `.nodeLabel()` while the link can be set using `.nodeURL()`.
+
+{% highlight javascript %}
+// Set the function to generate the URL of each node
+var chart = pty.chart.network()
+    .nodeLabel(function(d) { return d.name; })
+    .nodeURL(function(d) { return '{{site.baseurl}}/pages/' + d.id; });
+
+// Bind the container div to the data and invoke the chart
+d3.select('div#chart')
+    .data([data])
+    .call(chart);
+{% endhighlight %}
+
+<div id="example08" class="example"></div>
+
+<script>
+    d3.json('{{ site.baseurl }}/data/A.json', function(error, data) {
+
+        if (error) { return error; }
+
+        var width = 600,
+            height = 400;
+
+        var chart02 = pty.chart.network()
+            .width(width)
+            .height(height)
+            .nodeRadius(15)
+            .nodeLabel(function(d) { return d.name; })
+            .nodeBaseURL(function(d) { return '{{site.baseurl}}/data/' + d.id + '.json'; })
+            .nodeURL(function(d) { return '{{site.baseurl}}/pages/' + d.id; });
+
+
+        d3.select('div#example08').data([data]).call(chart02);
     });
 </script>