Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
primeapple opened this issue Nov 2, 2020 · 6 comments · Fixed by #7142
Closed

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

primeapple opened this issue Nov 2, 2020 · 6 comments · Fixed by #7142
Assignees
@kanitw
Labels
Bug 🐛 Need Clarification ❔ Needs clarification before we can proceed.

Comments

@primeapple
Copy link

primeapple commented Nov 2, 2020 •
edited

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
Copy link
Member

domoritz commented Nov 2, 2020

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

@domoritz domoritz added Bug 🐛 Need Clarification ❔ Needs clarification before we can proceed. labels Nov 2, 2020
@primeapple
Copy link
Author

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
Copy link
Member

domoritz commented Nov 3, 2020

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
Copy link
Author

primeapple commented Nov 9, 2020 •
edited

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
Copy link
Member

domoritz commented Nov 9, 2020

See my question to @kanitw about orient above.

@kanitw kanitw mentioned this issue Jan 3, 2021
Merged
@kanitw
Copy link
Member

kanitw commented Jan 3, 2021

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 #7142

@kanitw kanitw closed this as completed Jan 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kanitw kanitw

Labels
Bug 🐛 Need Clarification ❔ Needs clarification before we can proceed.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: respect line's orient even if the "measure" is discrete to support bump chart vega/vega-lite
3 participants
@kanitw @domoritz @primeapple