From fe5f95125ab2b2ecad79e95dca8ff96db5eab1e2 Mon Sep 17 00:00:00 2001
From: IsolatedSushi <simen.vanherpt@gmail.com>
Date: Tue, 25 Aug 2020 18:18:12 +0200
Subject: [PATCH] Added scatterplot
---
frontend/src/App.vue | 11 +--
frontend/src/components/ScatterPlot.vue | 93 ++++++++++++++++++-------
2 files changed, 69 insertions(+), 35 deletions(-)
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5de0691..7c25dd4 100644
--- a/frontend/src/App.vue
+++ b/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);
}
}
diff --git a/frontend/src/components/ScatterPlot.vue b/frontend/src/components/ScatterPlot.vue
index 6a1cf15..a1df12a 100644
--- a/frontend/src/components/ScatterPlot.vue
+++ b/frontend/src/components/ScatterPlot.vue
@@ -1,11 +1,7 @@
<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>
--
GitLab