diff --git a/backend/server.js b/backend/server.js index dd4819c8702b8794b48230dd53ff0223f4b33538..326e24664340a1c3a0339dd961dbc396cf14971b 100644 --- a/backend/server.js +++ b/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()); } diff --git a/frontend/src/components/ScatterPlot.vue b/frontend/src/components/ScatterPlot.vue index a1df12aeadc2e47df6cf6cb16feb5908dfe43fe0..4b3227384063acc1fb4f9b6afc91671b26191ef3 100644 --- a/frontend/src/components/ScatterPlot.vue +++ b/frontend/src/components/ScatterPlot.vue @@ -1,7 +1,7 @@ <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({