How to change color of stroke in Parallel Coordinate Vega Chart?

Question

I'm working with vega charts (parallel coordinates). How do I change the color of the lines with respect to scheme colors (w.r.t 'name' field).

Here is my code

I tried changing the stroke property with color scale but there is no effect on line stroke. Can anyone point out what am I doing wrong. I'm using Vega Version 4

Thanks

vikky

Answer 1

Because the colors need to be by column "name", transform the input dataset to have repeated name rows. In other words, input dataset must be of 3 columns (name, quarter, value)

Then, change "group" type mark to use facet dataset grouped by column "name"

  "name": "marks_group_lines",
  "type": "group",
  "from": {
    "facet": {
      "name": "cars_by_name",
      "data": "cars",
      "groupby": "name"
    }
  },

Use the cars_by_name as dataset to render "line" type mark.

tip: Instead of defining quarter dataset for 4 axes for each qarter and scales for these axes, "line" type mark which has point scale for "x" property can be used.

Full code for reference:

     {
      "$schema": "https://vega.github.io/schema/vega/v4.json",
      "width": 700,
      "height": 400,
      "padding": 5,
      "config": {
        "axisY": {
          "titleX": -2,
          "titleY": 410,
          "titleAngle": 0,
          "titleAlign": "right",
          "titleBaseline": "top"
        }
      },
      "data": [
        {
          "name": "cars",
          "values": [
            {
              "name": "A",
              "quarter": "Q1",
              "value": 51
            },
            {
              "name": "A",
              "quarter": "Q2",
              "value": 47
            },
            {
              "name": "A",
              "quarter": "Q3",
              "value": 45
            },
            {
              "name": "A",
              "quarter": "Q4",
              "value": 30
            },
            {
              "name": "B",
              "quarter": "Q1",
              "value": 42
            },
            {
              "name": "B",
              "quarter": "Q2",
              "value": 57
            },
            {
              "name": "B",
              "quarter": "Q3",
              "value": 72
            },
            {
              "name": "B",
              "quarter": "Q4",
              "value": 41
            },
            {
              "name": "C",
              "quarter": "Q1",
              "value": 25
            },
            {
              "name": "C",
              "quarter": "Q2",
              "value": 37
            },
            {
              "name": "C",
              "quarter": "Q3",
              "value": 60
            },
            {
              "name": "C",
              "quarter": "Q4",
              "value": 25
            },
            {
              "name": "D",
              "quarter": "Q1",
              "value": 22
            },
            {
              "name": "D",
              "quarter": "Q2",
              "value": 25
            },
            {
              "name": "D",
              "quarter": "Q3",
              "value": 51
            },
            {
              "name": "D",
              "quarter": "Q4",
              "value": 42
            }
          ]
        },
        {
          "name": "fields",
          "values": [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
          ]
        }
      ],
      "scales": [
        {
          "name": "name_to_xaxis",
          "type": "point",
          "domain": {
            "data": "cars",
            "field": "quarter"
          },
          "range": "width"
        },
        {
          "name": "values_to_height",
          "type": "linear",
          "domain": {
            "data": "cars",
            "field": "value"
          },
          "range": "height"
        },
        {
          "name": "quarter_to_color",
          "type": "ordinal",
          "domain": {
            "data": "cars",
            "field": "name"
          },
          "range": "category"
        },
        {
          "name": "ord",
          "type": "point",
          "range": "width",
          "round": true,
          "domain": {
            "data": "fields",
            "field": "data"
          }
        },
        {
          "name": "Q1",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q1"
          }
        },
        {
          "name": "Q2",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q2"
          }
        },
        {
          "name": "Q3",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q3"
          }
        },
        {
          "name": "Q4",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q4"
          }
        }
      ],
      "axes": [
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q1",
          "title": "Q1",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q1",
            "mult": -1
          }
        },
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q2",
          "title": "Q2",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q2",
            "mult": -1
          }
        },
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q3",
          "title": "Q3",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q3",
            "mult": -1
          }
        },
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q4",
          "title": "Q4",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q4",
            "mult": -1
          }
        }
      ],
      "marks": [
        {
          "name": "marks_group_lines",
          "type": "group",
          "from": {
            "facet": {
              "name": "cars_by_name",
              "data": "cars",
              "groupby": "name"
            }
          },
          "marks": [
            {
              "name": "marks_lines",
              "type": "line",
              "from": {
                "data": "cars_by_name"
              },
              "encode": {
                "update": {
                  "x": {
                    "scale": "name_to_xaxis",
                    "field": "quarter"
                  },
                  "y": {
                    "scale": "values_to_height",
                    "field": "value"
                  },
                  "stroke": {
                    "scale": "quarter_to_color",
                    "field": "name"
                  },
                  "strokeOpacity": {
                    "value": 1
                  }
                },
                "hover": {
                  "stroke": {
                    "value": "#7c7c7c"
                  },
                  "strokeOpacity": {
                    "value": 1
                  },
                  "zindex": 99
                }
              }
            },
            {
              "name": "marks_symbols",
              "type": "symbol",
              "from": {
                "data": "cars_by_name"
              },
              "encode": {
                "enter": {
                  "stroke": {
                    "value": "#6D6D6D"
                  },
                  "strokeWidth": {
                    "value": 1
                  },
                  "shape": {
                    "value": "circle"
                  }
                },
                "update": {
                  "x": {
                    "scale": "name_to_xaxis",
                    "field": "quarter"
                  },
                  "y": {
                    "scale": "values_to_height",
                    "field": "value"
                  },
                  "fill": {
                    "scale": "quarter_to_color",
                    "field": "name"
                  },
                  "size": {
                    "value": 50
                  },
                  "stroke": {
                    "value": "#77AE80"
                  }
                },
                "hover": {
                  "fill": {
                    "value": "#AFD098"
                  }
                }
              }
            }
          ]
        }
      ]
    }