Gráfico de prueba terminado y comentado. Closes #12 Closes #19

gulpfile.js

@@ -29,32 +29,19 @@ var nodemon = require('gulp-nodemon');
 var rename = require('gulp-rename');
 var sass = require('gulp-sass');
 var uglify = require('gulp-uglify');
-// var browserify = require('browserify');
-// var reactify = require('reactify');
-// var source = require('vinyl-source-stream');
 
 var json = ['./package.json', './bower.json'];
-var scripts = ['app.js', 'routes/*.js', 'lib/*.js'];
-var todos = ['app.js', 'routes/*.js', 'lib/*.js', 'test/test.js', 'public/js/src/*.js'];
+var scripts = ['app.js', 'routes/*.js', 'test/test.js', 'public/js/*.js'];
 var estilos = './public/style/scss/*.scss';
 
 gulp.task('install', function() {
   return gulp.src(json)
     .pipe(install());
 });
 
-// Compila los componentes React
-// gulp.task('js', function() {
-//   browserify('./public/js/react/app.jsx')
-//     .transform(reactify)
-//     .bundle()
-//     .pipe(source('app.js'))
-//     .pipe(gulp.dest('./public/js/build/'));
-// });
-
 // Comprobación sintáctica del código
 gulp.task('lint', function() {
-  return gulp.src(todos)
+  return gulp.src(scripts)
     .pipe(jshint())
     .pipe(jshint.reporter('default'));
 });

public/data/data.tsv

@@ -1,27 +1,7 @@
 letter	frequency
-A	.08167
-B	.01492
-C	.02782
-D	.04253
-E	.12702
-F	.02288
-G	.02015
-H	.06094
-I	.06966
-J	.00153
-K	.00772
-L	.04025
-M	.02406
-N	.06749
-O	.07507
-P	.01929
-Q	.00095
-R	.05987
-S	.06327
-T	.09056
-U	.02758
-V	.00978
-W	.02360
-X	.00150
-Y	.01974
-Z	.00074
+Tarea A	0.31413
+Tarea B	0.16955
+Tarea C	0.07251
+Tarea D	0.33579
+Tarea E	0.01267
+Tarea F	0.09535

public/js/src/grafico.js → public/js/grafico.js

@@ -1,48 +1,61 @@
+// Márgenes de encuadre del gráfico
 var margin = {
-    top: 20,
-    right: 20,
-    bottom: 30,
-    left: 40
-  },
-  width = 960 - margin.left - margin.right,
-  height = 500 - margin.top - margin.bottom;
+  top: 50,
+  right: 100,
+  bottom: 50,
+  left: 100
+};
 
+// Ancho y alto del gráfico
+var width = 1200 - margin.left - margin.right;
+var height = 600 - margin.top - margin.bottom;
+
+// Mapeamos los dominios de los ejes X e Y para obtener valores válidos
 var x = d3.scale.ordinal()
   .rangeRoundBands([0, width], 0.1);
-
 var y = d3.scale.linear()
   .range([height, 0]);
 
+// El eje X está orientado al fondo de la página
 var xAxis = d3.svg.axis()
   .scale(x)
   .orient("bottom");
 
+// El eje Y estará orientado a la zona izquierda de la página
+// Además, indicamos el número de marcas que va a tener dicho eje
 var yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
-  .ticks(10, "%");
+  .ticks(20, "%");
 
+// Seleccionamos la zona donde vamos a añadir el gráfico
 var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
+// Parseamos el archivo TSV con los valores del gráfico
 d3.tsv("data/data.tsv", type, function(error, data) {
   if (error) throw error;
 
+  // Los valores correspondientes al eje X
   x.domain(data.map(function(d) {
     return d.letter;
   }));
+  // Los valores correspondientes al eje Y
+  // (calculando además el valor máximo)
   y.domain([0, d3.max(data, function(d) {
     return d.frequency;
   })]);
 
+  // Agregamos a nuestro gráfico el eje X
   svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);
 
+  // Agregamos a nuestro gráfico el eje Y
   svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
@@ -53,6 +66,7 @@ d3.tsv("data/data.tsv", type, function(error, data) {
     .style("text-anchor", "end")
     .text("Frequency");
 
+  // Seleccinamos todas las barras del gráfico y las vamos añadiendo
   svg.selectAll(".bar")
     .data(data)
     .enter().append("rect")
@@ -72,4 +86,4 @@ d3.tsv("data/data.tsv", type, function(error, data) {
 function type(d) {
   d.frequency = +d.frequency;
   return d;
-}
+}

views/graficos.jade

@@ -22,4 +22,4 @@ extends layout
 
 block content
 	script(src='/lib/d3/d3.min.js')
-	script(src='/js/src/grafico.js')
+	script(src='/js/grafico.js')