Skip to content
This repository
Browse code

Implemented color option for scatter plots.

  • Loading branch information...
commit 476d29d73d90096b8f3eacd37336c4102c53e68c 1 parent 6daa43d
authored
25  css/charts.css
@@ -8,10 +8,33 @@
8 8
    fill: black;
9 9
 }
10 10
 
11  
-.chart circle {
  11
+.chart .dataset-1 {
12 12
     fill: red;
13 13
 }
14 14
 
  15
+.chart .dataset-2 {
  16
+    fill: blue;
  17
+}
  18
+
  19
+.chart .dataset-3 {
  20
+    fill: green;
  21
+}
  22
+
  23
+.chart .dataset-4 {
  24
+    fill: black;
  25
+}
  26
+
  27
+.chart .dataset-5 {
  28
+    fill: purple;
  29
+}
  30
+
  31
+.chart .dataset-6 {
  32
+    fill: orange;
  33
+}
  34
+
  35
+.chart .dataset-7 {
  36
+    fill: grey;
  37
+}
15 38
 
16 39
 .y.axis line, .y.axis path {
17 40
   fill: none;
61  js/dragui.js
@@ -8,7 +8,6 @@ function updateFragment(params) {
8 8
   window.location = baseLoc + "#" + args.join("&");
9 9
 }
10 10
 
11  
-
12 11
 /*
13 12
  *   go to ggplot2 page
14 13
 
@@ -70,15 +69,20 @@ function scatterplot(userData, xVar, yVar, options) {
70 69
   // This is close to, but not exactly the same as, traverseData
71 70
   // because each point will have an x and a y...
72 71
   for (var i = 0; i < userData.length; i++) {
73  
-    var newX, newY, numEvents;
  72
+    var newX, newY, numEvents, newColor = null;
74 73
     if (!options.xIsPerEvent) {
75 74
       newX = getXVarVal(userData[i]);
76 75
     }
77 76
     if (!options.yIsPerEvent) {
78 77
       newY = getYVarVal(userData[i]);
79 78
     }
  79
+    // Assume color is always factor-type and per-user.
  80
+    // TODO: color could be an event property sometimes?
  81
+    if (options.colorVar) {
  82
+      newColor = userData[i][ options.colorVar.id ];
  83
+    }
80 84
     if (options.dotType == "user") {
81  
-      dataPoints.push( {x: newX, y: newY} );
  85
+      dataPoints.push( {x: newX, y: newY, c: newColor} );
82 86
     }
83 87
     else {
84 88
       numEvents = userData[i].events.length;
@@ -91,7 +95,7 @@ function scatterplot(userData, xVar, yVar, options) {
91 95
           if (options.yIsPerEvent) {
92 96
             newY = getYVarVal(userData[i].events[j]);
93 97
           }
94  
-          dataPoints.push({x: newX, y: newY});
  98
+          dataPoints.push({x: newX, y: newY, c: newColor});
95 99
         }
96 100
       }
97 101
     }
@@ -99,6 +103,19 @@ function scatterplot(userData, xVar, yVar, options) {
99 103
 
100 104
   var xScale, yScale;
101 105
 
  106
+  var colorMap = {};
  107
+  if (options.colorVar) {
  108
+    // note a lot of duplicated code - write a "getuniquevaluelist" function
  109
+    var lastColorUsed = 0;
  110
+    for (i = 0; i < dataPoints.length; i++) {
  111
+      var colorVal = dataPoints[i].c;
  112
+      if (! colorMap[ colorVal ]) {
  113
+        lastColorUsed++;
  114
+        colorMap[ colorVal ] = "dataset-" + lastColorUsed; // corresponds to css class name
  115
+      }
  116
+    }
  117
+  }
  118
+
102 119
   if (xVar.datatype == "factor") {
103 120
     // Create ordinal scale
104 121
     var discreteXVals = {};
@@ -181,9 +198,17 @@ function scatterplot(userData, xVar, yVar, options) {
181 198
     yMapper = function(d) { return yScale(d.y); };
182 199
   }
183 200
 
  201
+  var colorMapper = function(d) {
  202
+    if (options.colorVar) {
  203
+      return colorMap[ d.c ];
  204
+    }
  205
+    return "dataset-1";
  206
+  };
  207
+
184 208
   chart.selectAll("circle")
185 209
     .data(dataPoints)
186 210
     .enter().append("svg:circle")
  211
+    .attr("class", colorMapper)
187 212
     .attr("r", 2)
188 213
     .attr("cx", xMapper)
189 214
     .attr("cy", yMapper);
@@ -259,7 +284,7 @@ function histogramify(userData, options) {
259 284
   var bucketWidth = (max - min)/numBuckets;
260 285
   for (var j = 0; j < numBuckets; j++) {
261 286
     breakpoints.push( min +  j * bucketWidth);
262  
-    // TODO control number of sig figs when float is written out
  287
+    // control number of sig figs when float is written out
263 288
     var name = (min + j * bucketWidth).toFixed(1) + " - " + (min + (j+1) * bucketWidth).toFixed(1);
264 289
     console.log(name);
265 290
     labels.push(name);
@@ -344,7 +369,6 @@ function barplot(data, options) {
344 369
 
345 370
 }
346 371
 
347  
-
348 372
 function initDragGui(variables, userData){
349 373
 
350 374
   function getVarById(varId) {
@@ -360,21 +384,10 @@ function initDragGui(variables, userData){
360 384
     var xVar = getVarById(params["x-axis"]);
361 385
     var yVar = getVarById(params["y-axis"]);
362 386
 
363  
-    if (params["color"] && (params["lattice-x"] || params["lattice-y"])) {
364  
-      $("#the-graph-image").attr("src", "img/compare-new.png");
365  
-      return;
366  
-    }
367  
-    if (params["lattice-y"]) {
368  
-      $("#the-graph-image").attr("src", "img/hist-unsorted.png");
369  
-      return;
370  
-    }
371  
-    if (params["lattice-x"]) {
372  
-      $("#the-graph-image").attr("src", "img/3stooges.png");
373  
-      return;
374  
-    }
  387
+    // TODO: Lattice-wrap not yet implemented.
  388
+    var colorVar = null;
375 389
     if (params["color"]) {
376  
-      $("#the-graph-image").attr("src", "img/directlabel-011.png");
377  
-      return;
  390
+      colorVar = getVarById(params["color"]);
378 391
     }
379 392
 
380 393
     switch( xVar.semantics ) {
@@ -421,7 +434,7 @@ function initDragGui(variables, userData){
421 434
         break;
422 435
       case "per_user":
423 436
         $("#output").html(" Scatterplot, each dot is a user; using jitter for any axis that is a factor");
424  
-        scatterplot(userData, xVar, yVar, {dotType: "user"});
  437
+        scatterplot(userData, xVar, yVar, {dotType: "user", colorVar: colorVar});
425 438
         break;
426 439
       case "event":
427 440
         if (xVar.datatype == "factor") {
@@ -439,7 +452,7 @@ function initDragGui(variables, userData){
439 452
           $("#output").html(" User-level factor is groups on x-axis, each event is a dot, scatter-density bars");
440 453
           $("#the-graph-image").attr("src", "img/density-bars.png");
441 454
         } else {
442  
-          scatterplot(userData, xVar, yVar, {yIsPerEvent: true, dotType: "event"});
  455
+          scatterplot(userData, xVar, yVar, {yIsPerEvent: true, dotType: "event", colorVar: colorVar});
443 456
           $("#output").html(" Scatter plot, each dot is an event");
444 457
         }
445 458
         break;
@@ -490,7 +503,7 @@ function initDragGui(variables, userData){
490 503
         // producing the 'average event value' per user and plotting that.
491 504
         break;
492 505
       case "per_user":
493  
-        scatterplot(userData, xVar, yVar, {xIsPerEvent: true, dotType: "event"});
  506
+        scatterplot(userData, xVar, yVar, {xIsPerEvent: true, dotType: "event", colorVar: colorVar});
494 507
         break;
495 508
       case "event":
496 509
         if (xVar.datatype == "factor") {
@@ -507,7 +520,7 @@ function initDragGui(variables, userData){
507 520
         }
508 521
         break;
509 522
       case "per_event":
510  
-        scatterplot(userData, xVar, yVar, {xIsPerEvent: true, yIsPerEvent: true, dotType: "event"});
  523
+        scatterplot(userData, xVar, yVar, {xIsPerEvent: true, yIsPerEvent: true, dotType: "event", colorVar: colorVar});
511 524
         break;
512 525
       }
513 526
       break;

0 notes on commit 476d29d

Please sign in to comment.
Something went wrong with that request. Please try again.