js/solGS/linePlot.js

   1 /**
   2 * draws any number of line plots; for now only for numeric x and y values.
   3 * import solGS.linePlot and call it like solGS.linePlot(lineData);
   4 * lineData argument has the ff structure
   5
   6
   7 var lineData =  {
   8             'div_id': svgId,
   9             'plot_title': title,
  10             'x_axis_label': xLabel,
  11             'y_axis_label': yLabel,
  12             'axis_label_color: axisLabelColor,
  13             'lines' :
  14             [
  15                 {
  16                     'data'  : xy,
  17                     'legend': lineDesc ,
  18                     'color' : optional,
  19                 },
  20                 {
  21                     'data'  : xy,
  22                     'legend': legend,
  23                     'color' : optional,
  24                 },
  25
  26             ]
  27         };
  28
  29
  30 * Isaak Y Tecle <iyt2@cornell.edu>
  31
  32 **/
  33
  34 var solGS = solGS || function solGS () {};
  35
  36 solGS.linePlot = function (allData) {
  37
  38     var linePlot = drawLines(allData);
  39
  40     function getXValues (xy) {
  41
  42         var xv = [];
  43
  44         for (var i=0; i < xy.length; i++) {
  45             var x = xy[i][0];
  46             x     = x.replace(/^\s+|\s+$/g, '');
  47             x     = Number(x);
  48             xv.push(x);
  49         }
  50
  51         return xv;
  52
  53     }
  54
  55
  56     function getYValues (xy) {
  57
  58         var yv = [];
  59
  60         for (var i=0; i < xy.length; i++) {
  61             var y = xy[i][1];
  62             y     = Number(y);
  63
  64             yv.push(y);
  65         }
  66
  67         return yv;
  68
  69     }
  70
  71
  72     function getLegendValues (allData) {
  73
  74         var legend = [];
  75         var linesCount = Object.keys(allData.lines).length;
  76
  77         setLineColors(allData);
  78
  79         for (var i=0; i < linesCount; i++) {
  80             var lc = allData.lines[i].color;
  81             var l  = allData.lines[i].legend;
  82
  83             legend.push([lc, l]);
  84         }
  85
  86         return legend;
  87
  88     }
  89
  90
  91     function getExtremeValues (alldata) {
  92
  93         var linesCount = Object.keys(allData.lines).length;
  94
  95         var eX = [];
  96         var eY = [];
  97
  98         for ( var i=0; i < linesCount; i++) {
  99             var data = allData.lines[i].data;
 100             var x = getXValues(data);
 101             var y = getYValues(data);
 102
 103             eX.push(d3.min(x), d3.max(x));
 104             eY.push(d3.min(y), d3.max(y));
 105         }
 106
 107         return { 'x' : eX, 'y': eY };
 108
 109     }
 110
 111
 112     function setLineColors (allData) {
 113
 114         var colors = [
 115             '#86B404', '#F7D358',
 116             '#5C5858', '#4863A0',
 117             '#A18648', '#8C001A',
 118         ];
 119
 120         var linesCount = Object.keys(allData.lines).length;
 121
 122         for ( var i=0; i < linesCount; i++) {
 123
 124             if (!allData.lines[i].color) {
 125                 allData.lines[i].color = colors[i];
 126             }
 127         }
 128     }
 129
 130
 131     function drawLines (allData) {
 132
 133         var svgId = allData.div_id;
 134         var title = allData.plot_title;
 135
 136         var height = 300;
 137         var width  = 800;
 138         var pad    = {'left':60, 'top':40, 'right':20, 'bottom': 40};
 139         var totalH = height + pad.top + pad.bottom;
 140         var totalW = width + pad.left + pad.right;
 141
 142         jQuery(svgId).append('<div id=line_plot></div>');
 143
 144         var plotId = '#line_plot';
 145         var axisColor = allData.axis_label_color;
 146
 147         var yLabel = allData.y_axis_label;
 148         var xLabel = allData.x_axis_label;
 149         var title  = allData.plot_title;
 150
 151         var legendValues = getLegendValues(allData);
 152
 153         var extremes  = getExtremeValues(allData);
 154         var extremesX = extremes.x;
 155         var extremesY = extremes.y;
 156
 157         var xScale = d3.scale.linear()
 158             .domain([d3.min(extremesX), d3.max(extremesX)])
 159             .range([0, width]);
 160
 161         var yScale = d3.scale.linear()
 162             .domain([0, d3.max(extremesY)])
 163             .range([height, 0]);
 164
 165         var line = d3.svg.line()
 166             .interpolate('basis')
 167             .x(function(d) {
 168                 return xScale(d[0]);
 169             })
 170             .y(function(d) {
 171                 return yScale(d[1]);
 172             });
 173
 174         var svg = d3.select(svgId)
 175             .append("svg")
 176             .attr("width", totalW)
 177             .attr("height", totalH);
 178
 179         var graph = svg.append("g")
 180             .attr("id", plotId)
 181             .attr("transform", "translate(" + pad.left + "," + pad.top  + ")");
 182
 183         var xAxis = d3.svg.axis()
 184             .scale(xScale)
 185             .orient("bottom")
 186             .ticks(15);
 187
 188         var yAxis = d3.svg.axis()
 189             .scale(yScale)
 190             .ticks(5)
 191             .orient("left");
 192
 193         graph.append("g")
 194             .attr("class", "x axis")
 195             .attr("transform", "translate(0,"  +  height + ")")
 196             .call(xAxis)
 197             .attr("fill", axisColor)
 198             .style({"text-anchor":"start", "fill": axisColor});
 199
 200         graph.append("g")
 201             .attr("class", "y axis")
 202             .attr("transform", "translate(0,0)")
 203             .call(yAxis)
 204             .attr("fill", axisColor);
 205
 206         var linesCount = Object.keys(allData.lines).length;
 207
 208         for ( var i=0; i < linesCount; i++) {
 209
 210             var path = graph.append("path")
 211                 .attr("d", line(allData.lines[i].data))
 212                 .attr("stroke", allData.lines[i].color)
 213                 .attr("stroke-width", "3")
 214                 .attr("fill", "none");
 215
 216             var totalLength = path.node().getTotalLength();
 217
 218             path.attr("stroke-dasharray", totalLength + " " + totalLength)
 219                 .attr("stroke-dashoffset", totalLength)
 220                 .transition()
 221                 .duration(2000)
 222                 .ease("linear")
 223                 .attr("stroke-dashoffset", 0);
 224         }
 225
 226         graph.append("text")
 227             .attr("id", "title")
 228             .attr("fill", axisColor)
 229             .text(title)
 230             .attr("x", pad.left)
 231             .attr("y", -20);
 232
 233         graph.append("text")
 234             .attr("id", "xLabel")
 235             .attr("fill", axisColor)
 236             .text(xLabel)
 237             .attr("x", width * 0.5)
 238             .attr("y", height + 40);
 239
 240         graph.append("text")
 241             .attr("id", "yLabel")
 242             .attr("fill", axisColor)
 243             .text(yLabel)
 244             .attr("transform", "translate(" + -40 + "," +  height * 0.5 + ")" + " rotate(-90)");
 245
 246         var legendTxt = graph.append("g")
 247             .attr("transform", "translate(" + (width - 150) + "," + (height * 0.25)  + ")")
 248             .attr("id", "normalLegend");
 249
 250         legendTxt.selectAll("text")
 251             .data(legendValues)
 252             .enter()
 253             .append("text")
 254             .attr("fill", function (d) {
 255                 return d[0];
 256             })
 257             .attr("font-weight", "bold")
 258             .attr("x", 1)
 259             .attr("y", function (d, i) {
 260                 return i * 20;
 261             })
 262             .text(function (d) {
 263                 return d[1];
 264             });
 265
 266         return {'graph': graph, 'xScale': xScale, 'yScale': yScale};
 267
 268     }
 269
 270     return linePlot;
 271
 272 }