search

vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.69k stars 612 forks source link

Line Chart with ordinal or nominal Values as Y Axis #7026

Closed primeapple closed 3 years ago

primeapple commented 4 years ago

Hey everyone, I was trying to do a visualization in Vega-Lite, but I'm stuck at a point. I have a couple of builds (quantitiative, from 0 to N) and each build has a result. The results have an priority order, so basically "PASSED" has a lower priority then "FAILED". This means these values are ordinal.

I was trying to plot the result as a line chart over the builds. So Y Axis is the result and X Axis is the build. Now it shows the correct points, however it does not connect them correctly. I want to connect the first value on the X-Axis to the next value on the X-Axis and so on. It does connect the values on their occurance on the Y-Axis.

This also happens with nominal values. Is this not yet implemented? Or am I using it wrong? In the doc it says Using line with one temporal or ordinal field (typically on x) and another quantitative field (typically on y) produces a simple line chart with a single line. However, what does "typically" mean here? How do I change it?

To showcase it: online editor example

domoritz commented 4 years ago

Hmm, good question. I would have expected this to work:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"build": 1, "result": "PASSED"},
      {"build": 2, "result": "PASSED"},
      {"build": 3, "result": "FAILED"},
      {"build": 4, "result": "FAILED"},
      {"build": 5, "result": "SKIPPED"},
      {"build": 6, "result": "PASSED"},
      {"build": 7, "result": "PASSED"},
      {"build": 8, "result": "FAILED"},
      {"build": 9, "result": "PASSED"},
      {"build": 10, "result": "PASSED"},
      {"build": 11, "result": "SKIPPED"},
      {"build": 12, "result": "PASSED"},
      {"build": 13, "result": "PASSED"},
      {"build": 14, "result": "FAILED"},
      {"build": 15, "result": "PASSED"},
      {"build": 16, "result": "SKIPPED"}
    ]
  },
  "mark": {"type": "line", "point": true, "orient": "vertical"},
  "encoding": {
    "x": {"field": "build", "type": "quantitative"},
    "y": {"field": "result", "type": "nominal"}
  }
}

@kanitw is this a bug?

Setting the order works, though. 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"build": 1, "result": "PASSED"},
      {"build": 2, "result": "PASSED"},
      {"build": 3, "result": "FAILED"},
      {"build": 4, "result": "FAILED"},
      {"build": 5, "result": "SKIPPED"},
      {"build": 6, "result": "PASSED"},
      {"build": 7, "result": "PASSED"},
      {"build": 8, "result": "FAILED"},
      {"build": 9, "result": "PASSED"},
      {"build": 10, "result": "PASSED"},
      {"build": 11, "result": "SKIPPED"},
      {"build": 12, "result": "PASSED"},
      {"build": 13, "result": "PASSED"},
      {"build": 14, "result": "FAILED"},
      {"build": 15, "result": "PASSED"},
      {"build": 16, "result": "SKIPPED"}
    ]
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {"field": "build", "type": "quantitative"},
    "y": {"field": "result", "type": "nominal"},
    "order": {"field": "build", "type": "quantitative"}
  }
}

image

primeapple commented 4 years ago

Thanks so much for responding so quickly! I also found the order key very helpful! Thats awesome!

This is quite a funny one. I was experimenting a bit with it and found some other problems:
Adding a "color" object to color the data based on its result failed your suggestion again:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"values":[
    {"build": 1, "result": "PASSED"},
    {"build": 2, "result": "PASSED"},
    {"build": 3, "result": "FAILED"},
    {"build": 4, "result": "FAILED"},
    {"build": 5, "result": "SKIPPED"},
    {"build": 6, "result": "PASSED"},
    {"build": 7, "result": "PASSED"},
    {"build": 8, "result": "FAILED"},
    {"build": 9, "result": "PASSED"},
    {"build": 10, "result": "PASSED"},
    {"build": 11, "result": "SKIPPED"},
    {"build": 12, "result": "PASSED"},
    {"build": 13, "result": "PASSED"},
    {"build": 14, "result": "FAILED"},
    {"build": 15, "result": "PASSED"},
    {"build": 16, "result": "SKIPPED"}
  ]},
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {"field": "build", "type": "quantitative"},
    "y": {
      "field": "result",
      "type": "ordinal",
      "sort": ["FAILED", "SKIPPED", "PASSED"]
    },
    "color": {
      "field": "result",
      "type": "nominal",
      "scale": {
        "domain": ["FAILED", "SKIPPED", "PASSED"],
        "range": ["#ff0000", "#ffff00", "#00ff00"]
      }
    },
    "order": {"field": "build", "type": "quantitative"}
  }
}

This gives me the following:

visualization

Maybe this is because it is unclear which color the line should be when connecting two points from different Y?

domoritz commented 4 years ago

That's expected behavior with the grammar of graphics. You could only color the points and not color the line to get what you want.

primeapple commented 4 years ago

Ok, thank you! This is very helpful.

For me this is done, I don't know if you guys want to keep it open?

domoritz commented 4 years ago

See my question to @kanitw about orient above.

kanitw commented 3 years ago

Hmm, good question. I would have expected this to work:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"build": 1, "result": "PASSED"},
      {"build": 2, "result": "PASSED"},
      {"build": 3, "result": "FAILED"},
      {"build": 4, "result": "FAILED"},
      {"build": 5, "result": "SKIPPED"},
      {"build": 6, "result": "PASSED"},
      {"build": 7, "result": "PASSED"},
      {"build": 8, "result": "FAILED"},
      {"build": 9, "result": "PASSED"},
      {"build": 10, "result": "PASSED"},
      {"build": 11, "result": "SKIPPED"},
      {"build": 12, "result": "PASSED"},
      {"build": 13, "result": "PASSED"},
      {"build": 14, "result": "FAILED"},
      {"build": 15, "result": "PASSED"},
      {"build": 16, "result": "SKIPPED"}
    ]
  },
  "mark": {"type": "line", "point": true, "orient": "vertical"},
  "encoding": {
    "x": {"field": "build", "type": "quantitative"},
    "y": {"field": "result", "type": "nominal"}
  }
}

@kanitw is this a bug?

Setting the order works, though.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"build": 1, "result": "PASSED"},
      {"build": 2, "result": "PASSED"},
      {"build": 3, "result": "FAILED"},
      {"build": 4, "result": "FAILED"},
      {"build": 5, "result": "SKIPPED"},
      {"build": 6, "result": "PASSED"},
      {"build": 7, "result": "PASSED"},
      {"build": 8, "result": "FAILED"},
      {"build": 9, "result": "PASSED"},
      {"build": 10, "result": "PASSED"},
      {"build": 11, "result": "SKIPPED"},
      {"build": 12, "result": "PASSED"},
      {"build": 13, "result": "PASSED"},
      {"build": 14, "result": "FAILED"},
      {"build": 15, "result": "PASSED"},
      {"build": 16, "result": "SKIPPED"}
    ]
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {"field": "build", "type": "quantitative"},
    "y": {"field": "result", "type": "nominal"},
    "order": {"field": "build", "type": "quantitative"}
  }
}

image

Yes this is a bug. Will be fixed in https://github.com/vega/vega-lite/pull/7142