Change the layout of the trace

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"}
         ],
       },