From c63f0b34edf7dbe3b732145246a35d899e0cac20 Mon Sep 17 00:00:00 2001
From: IsolatedSushi <simen.vanherpt@gmail.com>
Date: Tue, 25 Aug 2020 18:43:05 +0200
Subject: [PATCH] Small chart alterations
---
backend/server.js | 5 ++---
frontend/src/components/ScatterPlot.vue | 9 ++++++---
2 files changed, 8 insertions(+), 6 deletions(-)
diff --git a/backend/server.js b/backend/server.js
index dd4819c..326e246 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 a1df12a..4b32273 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({
--
GitLab