Small chart alterations

backend/server.js

@@ -28,12 +28,12 @@ function generatePoint(){
   var xVal = Math.floor(Math.random()*20);
   var yVal = Math.floor(Math.random()*20);
   count++;
+  console.log("Generated point. ID: " + count + "  x: " + xVal + " y: " + yVal);
   return {id:count, x:xVal,y:yVal};
 }
 //SERVICE
 function sendPoint(call, callback) {
   callback(null, generatePoint());
-  console.log("sent point!");
 }
 /**
  * @param {!Object} call
@@ -43,13 +43,12 @@ function sendPointStream(call) {
   function sender(point) {
     return (callback) => {
       call.write(point);
-      _.delay(callback, 500); // in ms
+      _.delay(callback, 1); // in ms
     };
   }
 
   var senders = [];
   var count = 10;
-  console.log("Will send " + count);
   for (var i = 0; i < count; i++) {
     senders[i] = sender(generatePoint());
   }

frontend/src/components/ScatterPlot.vue

 <template>
   <div id="app" class="my-10">
     <h3>ScatterPlot in d3</h3>
-    <svg id="chart" viewBox="0 0 500 500"></svg>
+    <svg id="chart" width ='500' height ='500'></svg>
   </div>
 </template>
 
@@ -68,14 +68,17 @@ export default {
 
       this.xAxis.call(d3.axisBottom(this.x));
       this.yAxis.call(d3.axisLeft(this.y));
-
+      var color = d3.scaleOrdinal()
+      .domain([-1, 0, 1])
+      .range([ "#F8766D", "#00BA38", "#619CFF"]) 
       this.chart.selectAll(".point")
         .data(this.dataPoints)
         .join("g")
         .attr("class", "point")
         .attr("transform", d => `translate(${this.x(d.x)}, ${this.y(d.y)})`)
         .append("circle")
-        .attr("r", 5);
+        .attr("r", 8)
+        .style('fill',function (d) { return color((d.x*d.x+d.y*d.y)%3) });
     },
     addPointToPlot(point) {
       this.dataPoints.push({