Added scatterplot

frontend/src/App.vue

@@ -4,7 +4,7 @@
     <Navbar/>
     <v-main class="grey lighten-2" align="center">
       <gRPCclient v-on:newPoint="addPoint($event)" />
-      <ScatterPlot ref = "scatter" :Sdata="loadedData" />
+      <ScatterPlot ref = "scatter"/>
     </v-main>
   </v-app>
 </template>
@@ -22,21 +22,14 @@ export default {
     ScatterPlot
   },
   created(){
-    this.loadData();
   },
   data(){
     return {
-      loadedData:Array
     }
   },
   methods: {
-    loadData: function(){
-      this.loadedData = [10, 71, 78, 25, 36, 92];
-    },
     addPoint: function(point){
-      console.log("Received new point from app.vue, ID:" + point.getId());
-      this.loadedData.push(10);
-      this.$refs.scatter.calculatePath();
+      this.$refs.scatter.addPointToPlot(point);
     }
   }
   

frontend/src/components/ScatterPlot.vue

 <template>
-  <div class="my-10">
+  <div id="app" class="my-10">
     <h3>ScatterPlot in d3</h3>
-    <svg width="500" height="270">
-      <g style="transform: translate(0, 10px)">
-        <path :d="line" />
-      </g>
-    </svg>
+    <svg id="chart" viewBox="0 0 500 500"></svg>
   </div>
 </template>
 
@@ -18,31 +14,76 @@ export default {
   ,
   data() {
     return {
-      line: '',
+      dataPoints: []
     };
   },
    mounted() {
-       console.log(this.Sdata);
-    this.calculatePath();
+    const width = 500;
+    const height = 500;
+    const margin = {
+      top: 20,
+      right: 20,
+      bottom: 50,
+      left: 60
+    };
+
+    this.chart = d3.select("#chart")
+      .append("g")
+      .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    this.x = d3.scaleLinear()
+      .range([0, width - margin.left - margin.right]);
+
+    this.y = d3.scaleLinear()
+      .range([height - margin.top - margin.bottom, 0]);
+
+    this.xAxis = this.chart.append("g")
+      .attr(
+        "transform",
+        `translate(0, ${height - margin.top - margin.bottom})`
+      );
+
+    this.yAxis = this.chart.append("g");
+    
+    this.chart.append("text")
+      .attr("font-size", 15)
+      .attr("text-anchor", "middle")
+      .attr("x", (width - margin.left - margin.right) / 2)
+      .attr("y", height - margin.top - margin.bottom + 40)
+      .text("x-axis");
+    
+    this.chart.append("text")
+      .attr("font-size", 15)
+      .attr("text-anchor", "middle")
+      .attr("transform", "rotate(-90)")
+      .attr("x", 0 - ((height - margin.top - margin.bottom) / 2))
+      .attr("y", -40)
+      .text("y-axis");
+
+    this.plot();
   },
-  methods: {
-    getScales() {
-      const x = d3.scaleTime().range([0, 430]);
-      const y = d3.scaleLinear().range([210, 0]);
-      d3.axisLeft().scale(x);
-      d3.axisBottom().scale(y);
-      x.domain(d3.extent(this.Sdata, (d, i) => i));
-      y.domain([0, d3.max(this.Sdata, d => d)]);
-      return { x, y };
-    },
-    calculatePath() {
-        console.log("drawing");
-      const scale = this.getScales();
-      const path = d3.line()
-        .x((d, i) => scale.x(i))
-        .y(d => scale.y(d));
-      this.line = path(this.Sdata);
+   methods: {
+    plot() {
+      this.x.domain([0, d3.max(this.dataPoints, d => d.x)]);
+      this.y.domain([0, d3.max(this.dataPoints, d => d.y)]);
+
+      this.xAxis.call(d3.axisBottom(this.x));
+      this.yAxis.call(d3.axisLeft(this.y));
+
+      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);
     },
+    addPointToPlot(point) {
+      this.dataPoints.push({
+        x: point.getX(),
+        y: point.getY()
+      });
+      this.plot();
+    }
   },
 };
 </script>