Use fixed color for val field

[tsung-wei-huang]

Thanks for this GREAT timeline library. In my data, the segments belong to five different values, say, 0, 1, 2, 3, 4. Is there any way I can fix the color for each value so the coloring scheme is consistent in my application? For example, I would like red for value 0, green for value 1, etc.?

{ "label": "label1", "data": [ { "timeRange": [10, 20], "val": "0" // red color? } ] }

[vasturiano]

@tsung-wei-huang thanks for reaching out.

Yes, that's possible. You can set any color logic you'd like using the zColorScale method. Eg:

.zColorScale(val => /* your logic */)

[tsung-wei-huang]

Could you please give me a more concrete code example? I am a fairly new hand to Javascript and I am using your project to create a visualization for my c++ project. In my JSON, there are only 5 categories (val), say type1, type2, type3, type4, type5, and I would like to give them red, green, blue, black, yellow, respectively. How does the code look like? Thanks!!!

timeline.zColorScale( ??? )

[vasturiano]

@tsung-wei-huang suppose you have a val -> color map like this:

const valColors = {
  type1: 'red',
  type2: 'green',
  type3: 'blue'
};

You can simply do:

timeline.zColorScale(val => valColors[val]);

Or for a more sophisticated setup using a d3 ordinal scale:

const valColorScale = d3.scaleOrdinal()
  .domain(['type1', 'type2', 'type3'])
  .range(['red', 'green', 'blue']);

timeline.zColorScale(valColorScale);

[tsung-wei-huang]

So I did:

const valColors = { 
  'static task': 'red',
  'condition task': 'green',
  'cudaflow': 'blue',
  'dynamic task' : 'red',
  'module task': 'blue'
};

  json = read_my_json();
  timeline = TimelinesChart();
  timeline.xTickFormat(n => +n);
  timeline.zQualitative(true);
  timeline.timeFormat('%Q');
  timeline.data(json);
  timeline.zColorScale(val => valColors[val]);
  timeline(myplotarea);

Here is my json (I modified the source a bit to include the name tag in each segment):

[
  {
    "group": "executor 0",
    "data": [
      {
        "label": "worker 4",
        "data": [
          {
            "timeRange": [
              282,
              319
            ],
            "name": "TaskC",
            "val": "static task"
          },
          {
            "timeRange": [
              322,
              334
            ],
            "name": "TaskD",
            "val": "static task"
          }
        ]
      },
      {
        "label": "worker 8",
        "data": [
          {
            "timeRange": [
              125,
              269
            ],
            "name": "TaskA",
            "val": "static task"
          },
          {
            "timeRange": [
              273,
              283
            ],
            "name": "TaskB",
            "val": "static task"
          }
        ]
      }
    ]
  }
]

However, I got the following error when adding the line timeline.zColorScale(val => valColors[val]);:

timelines-chart.min.js:5 Uncaught TypeError: t.scale.domain is not a function
    at Function.update (timelines-chart.min.js:5)
    at timelines-chart.min.js:2
    at l (timelines-chart.min.js:2)
timelines-chart.min.js:2 Uncaught TypeError: t.colorScale.domain is not a function
    at Function.update (timelines-chart.min.js:2)
    at timelines-chart.min.js:2
    at l (timelines-chart.min.js:2)
5timelines-chart.min.js:5 Uncaught TypeError: n.zColorScale.domain is not a function
    at SVGRectElement.<anonymous> (timelines-chart.min.js:5)
    at SVGRectElement.l.show (timelines-chart.min.js:2)
    at SVGRectElement.<anonymous> (timelines-chart.min.js:2)

Please help :(

[vasturiano]

@tsung-wei-huang actually you have to go with the second approach of using a d3 scale. Because internally the lib uses some methods that are only available in the scale object.

It should be an easy change however.

[tsung-wei-huang]

Thanks I finally got it :)

[ayazwani]

Using the .zColorScale(val => valColors[val]); , it did add color of my choice to the graph but it halted the group tooltip within the chart. Is that normal ? Can u suggest anything?

[Abhilash-Koliwad]

Hi @vasturiano @tsung-wei-huang , We also wanted to fix the color of the Segment by Value and did the following:

const valColorScale = d3.scaleOrdinal()
      .domain(['FAILED', 'COMPLETED', 'IN_PROGRESS', 'WAITING', 'STOPPED'])
      .range(['red', 'green', 'blue', 'yellow', 'orange']);

this.timeline.zColorScale(valColorScale);

However, there is a compilation error at the above line that says ,

TS2345: Argument of type 'ScaleOrdinal<string, unknown, never>' is not assignable to parameter of type 'Scale<Val, string>'.   Types of parameters 'x' and 'input' are incompatible.     Type 'Val' is not assignable to type 'string'.       Type 'number' is not assignable to type 'string'.

Will you please advise us here..??

Thanks in Advance, Abhilash

[Abhilash-Koliwad]

Hey @tsung-wei-huang,

We are having the same issue as your question but we are unable to crack the solution, Hence, will you please help us with how you were able to solve this particular issue ?

Our code,

const valColorScale = d3.scaleOrdinal()
      .domain(['FAILED', 'COMPLETED', 'IN_PROGRESS', 'WAITING', 'STOPPED'])
      .range(['red', 'green', 'blue', 'yellow', 'orange']);

this.timeline.zColorScale(valColorScale);

However, there is a compilation error at the above line that says ,

TS2345: Argument of type 'ScaleOrdinal<string, unknown, never>' is not assignable to parameter of type 'Scale<Val, string>'. Types of parameters 'x' and 'input' are incompatible. Type 'Val' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.

Please help :(

Thanks in Advance, Abhilash

[vasturiano]

@Abhilash-Koliwad please see https://github.com/vasturiano/timelines-chart/issues/111 .