From 461a2c9589d0b7eaff17e7afcba21a7b0bcc46d7 Mon Sep 17 00:00:00 2001 From: Dorian Goepp <dorian.goepp@gmail.com> Date: Fri, 5 Apr 2019 10:02:06 +0200 Subject: [PATCH] Change the layout of the trace --- src/InteractionTrace/InteractionTrace.js | 37 ++++++++++++------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/InteractionTrace/InteractionTrace.js b/src/InteractionTrace/InteractionTrace.js index 0682da5..6943ea0 100644 --- a/src/InteractionTrace/InteractionTrace.js +++ b/src/InteractionTrace/InteractionTrace.js @@ -48,10 +48,10 @@ class InteractionTrace extends Component { .margins([this.margin.top, this.margin.bottom]) .magnitudeAuto() .padding(this.spacing.v) + .fixedCell(20) // Row for the interaction id .fixedCell(24) // Row for the mood .fixedCell(60) // Row for the boredom .ratioCell(0.5) // Row for the valences (takes a ratio of the avalable space) - .fixedCell(20) // Row for the interaction id .fixedCell(75); // Row for the actions (temporary value, updated later in function of this.em) // Value for the boredom at which we plot a red line (showing max value) @@ -134,14 +134,15 @@ class InteractionTrace extends Component { const colour = d3.scaleOrdinal() .domain(Object.keys(boredom).concat(Object.keys(valence))) .range(["#7371fc", "#a01bed", "#edc61b"]); + // .range(["#7371fc", "#a01bed", "#a01bed"]); const yScaleBoredom = d3.scaleLinear() .domain([0, this.maxBoredom]) - .rangeRound([this.yLayout.width(1), 0]) + .rangeRound([this.yLayout.width(2), 0]) .nice(); const yScaleValence = d3.scaleLinear() .domain(extent(valence, value => value.y)) - .rangeRound([this.yLayout.width(2), 0]) + .rangeRound([this.yLayout.width(3), 0]) .nice(); // Declaration and configuration of each element to be displayed @@ -164,14 +165,14 @@ class InteractionTrace extends Component { x: 2, // no y: this component is not offset on the ordinate axis yMin: this.yLayout.upper(0) + this.spacing.v / 3, // y coordinates of the lines - yMax: this.yLayout.lower(3) - this.spacing.v / 3, //this.yLayout.width(1) + this.yLayout.padding()*1.5 + this.yLayout.width(2), + yMax: this.yLayout.lower(4) - this.spacing.v / 3, //this.yLayout.width(1) + this.yLayout.padding()*1.5 + this.yLayout.width(2), data: data, // we just need to have an array with the right number of items; the content is not used xScale: xScale, }, { component: Mood, x: 2, - y: 0, + y: 1, height: this.yLayout.width(0), data: data, xScale: xScale, @@ -179,7 +180,7 @@ class InteractionTrace extends Component { { // Guide for boredom = 0 component: XGuideLine, x: 2, - y: 1, + y: 2, offset: yScaleBoredom(0), width: this.xLayout.width(2), className: "x guide", @@ -187,7 +188,7 @@ class InteractionTrace extends Component { { // Boredom limit component: XGuideLine, x: 2, - y: 1, + y: 2, offset: yScaleBoredom(this.maxBoredom), width: this.xLayout.width(2), className: "x boredom-limit", @@ -196,7 +197,7 @@ class InteractionTrace extends Component { component: Plots, data:boredom, x: 2, - y: 1, + y: 2, colour: colour, xScale: xScale, yScale: yScaleBoredom, @@ -204,14 +205,14 @@ class InteractionTrace extends Component { { // Axis for the boredom plot component: YAxis, x: 1, - y: 1, + y: 2, offset: this.xLayout.width(1), // D3's axes are built from the right yAxis: d3.axisLeft().scale(yScaleBoredom).ticks(2, d3.format(",.0f")), }, { // Zero value for the valence component: XGuideLine, x: 2, - y: 2, + y: 3, offset: yScaleValence(0), width: this.xLayout.width(2), className: "x guide", @@ -220,7 +221,7 @@ class InteractionTrace extends Component { component: Plots, data: valence, x: 2, - y: 2, + y: 3, colour: colour, xScale: xScale, yScale: yScaleValence, @@ -228,7 +229,7 @@ class InteractionTrace extends Component { { component: YAxis, x: 1, - y: 2, + y: 3, offset: this.xLayout.width(1), // D3's axes are built from the right yAxis: d3.axisLeft().scale(yScaleValence), }, @@ -236,7 +237,7 @@ class InteractionTrace extends Component { component: Legend, data: valence, x: 0, - y: 2, + y: 3, colour: colour, xOffset: this.xLayout.width(0), yOffset: this.em*1.2 || 1.2, @@ -246,7 +247,7 @@ class InteractionTrace extends Component { component: Iteration, data: data, x: 2, - y: 3, + y: 0, xScale: xScale }, { // Primitive actions, coloured by the enacted interaction's valence @@ -265,10 +266,10 @@ class InteractionTrace extends Component { width: this.xLayout.width(0), yLayout: this.yLayout, labels: [ - {y: 0, name: "Mood"}, - {y: 1, name: "Boredom"}, - {y: 2, name: "Valence"}, - {y: 3, name: "Iteration"}, + {y: 0, name: "Iteration"}, + {y: 1, name: "Mood"}, + {y: 2, name: "Boredom"}, + {y: 3, name: "Valence"}, {y: 4, name: "Actions"} ], }, -- GitLab