Commit 461a2c95 authored by Dorian Goepp's avatar Dorian Goepp
Browse files

Change the layout of the trace

parent becd37bc
......@@ -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"}
],
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment