CODEWITHSUNDEEP
vega-lite
dmcgillen
dmcgillen

Reputation: 465

Customise vega-lite Line Graph Axis Labels

What I want to do is really simple, but I just can't seem to get it right. I have a feeling I'm going to be embarrassed by the answer!

I have a line graph with "attempt" along the x-axis and "grade" along the y-axis, with grade being a number between 0 and 100. I simply want to change the y-axis so that, instead of seeing the raw number, a grade is show, say with 0 - 20 representing "E", 20-40 being "D" etc up to "A" (80-100). How can I do that? I don't want to use discrete values because I want to visually show where within a grade boundary a grade falls. I'm not sure whether I yet want to simply display the grade bands on the line or put them in the middle of their ticks, but just getting somewhere with this would help a lot!

Here is what I've been working with in the vega-lite editor:



    {
      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
      "data": {
        "values": [
          {
            "attempt": 1,
            "score": 30
          },
          {
            "attempt": 2,
            "score": 60
          },
          {
            "attempt": 3,
            "score": 75
          },
          {
            "attempt": 4,
            "score": 58
          },
          {
            "attempt": 5,
            "score": 67
          }
        ]
      },
      "mark": {
        "type": "line",
        "color": "#22bc9a",
        "point": {
          "filled": false
        }
      },
      "encoding": {
        "x": {
          "field": "attempt",
          "type": "quantitative",
          "axis": {
            "grid": false,
            "tickCount": 5,
            "title": "Attempt"
          }
        },
        "y": {
          "field": "score",
          "scale": {"domain": [0, 100]},
          "type": "quantitative",
          "axis": {
            "tickCount": 5,
            "title": "Grade"
          }
        },
        "opacity": {"value": 0.3}
      },
      "config": {
        "autosize": "fit",
        "axis": {
          "labelColor": "#bebec8",
          "tickColor": "#bebec8",
          "titleColor": "black",
          "titleFontWeight": "normal",
          "titleFontSize": 11,
          "labelFont": "Helvetica",
          "titleFont": "Helvetica",
          "gridOpacity": 0.4,
          "gridWidth": 1.5,
          "domain": false
        },
        "view": {
          "strokeWidth": 0
        }
      }
    }

Thanks in advance.

Upvotes: 2

Views: 7986

Answers (2)

FlorianGD
FlorianGD

Reputation: 2436

What about something like this: I add a dataframe with the grade category, and use this to layer some text. I remove the labels of the axis and so the text acts as if it were the labels of the axis.

The chart looks like this, and here is a link to the editor: chart_with_grades_for_axis

Schema (Note that I did it with Python's Altair, so it may not be canonical Vega-lite, and I did not use your settings either, sorry about that):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "config": {
    "view": {
      "height": 300,
      "width": 400
    }
  },
  "datasets": {
    "data-1acee7c5d817865a529b53e022474ce8": [
      {
        "label": "E",
        "x_min": 1,
        "y_med": 10
      },
      {
        "label": "D",
        "x_min": 1,
        "y_med": 30
      },
      {
        "label": "C",
        "x_min": 1,
        "y_med": 50
      },
      {
        "label": "B",
        "x_min": 1,
        "y_med": 70
      },
      {
        "label": "A",
        "x_min": 1,
        "y_med": 90
      }
    ],
    "data-8e6359ea3034b8410708361bb10fafd5": [
      {
        "attempt": 1,
        "score": 30
      },
      {
        "attempt": 2,
        "score": 60
      },
      {
        "attempt": 3,
        "score": 75
      },
      {
        "attempt": 4,
        "score": 58
      },
      {
        "attempt": 5,
        "score": 67
      }
    ]
  },
  "layer": [
    {
      "data": {
        "name": "data-1acee7c5d817865a529b53e022474ce8"
      },
      "encoding": {
        "text": {
          "field": "label",
          "type": "ordinal"
        },
        "x": {
          "field": "x_min",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        },
        "y": {
          "axis": {
            "labels": false,
            "tickCount": 5,
            "ticks": false
          },
          "field": "y_med",
          "type": "quantitative"
        }
      },
      "mark": {
        "dx": -15,
        "dy": 8,
        "size": 15,
        "type": "text"
      }
    },
    {
      "data": {
        "name": "data-8e6359ea3034b8410708361bb10fafd5"
      },
      "encoding": {
        "x": {
          "axis": {
            "tickCount": 5
          },
          "field": "attempt",
          "title": "Attempt",
          "type": "quantitative"
        },
        "y": {
          "field": "score",
          "scale": {
            "domain": [
              0,
              100
            ]
          },
          "title": "Grade",
          "type": "quantitative"
        }
      },
      "mark": {
        "point": true,
        "type": "line"
      }
    }
  ]
}

Using a slighly modified dataframe for the categories (with x_max, y_min and y_max added), you can add another layer with colored rectangles, that can help read the values: chart_with_grade_axis_and_color_bands

Here is a link to the editor

And here is the schema

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "config": {
    "view": {
      "height": 300,
      "width": 400
    }
  },
  "datasets": {
    "data-1acee7c5d817865a529b53e022474ce8": [
      {
        "label": "E",
        "x_min": 1,
        "y_med": 10
      },
      {
        "label": "D",
        "x_min": 1,
        "y_med": 30
      },
      {
        "label": "C",
        "x_min": 1,
        "y_med": 50
      },
      {
        "label": "B",
        "x_min": 1,
        "y_med": 70
      },
      {
        "label": "A",
        "x_min": 1,
        "y_med": 90
      }
    ],
    "data-39ffbda2b5d5fe96de84d9e308d920ff": [
      {
        "label": "E",
        "x_max": 5,
        "x_min": 1,
        "y_max": 20,
        "y_med": 10,
        "y_min": 0
      },
      {
        "label": "D",
        "x_max": 5,
        "x_min": 1,
        "y_max": 40,
        "y_med": 30,
        "y_min": 20
      },
      {
        "label": "C",
        "x_max": 5,
        "x_min": 1,
        "y_max": 60,
        "y_med": 50,
        "y_min": 40
      },
      {
        "label": "B",
        "x_max": 5,
        "x_min": 1,
        "y_max": 80,
        "y_med": 70,
        "y_min": 60
      },
      {
        "label": "A",
        "x_max": 5,
        "x_min": 1,
        "y_max": 100,
        "y_med": 90,
        "y_min": 80
      }
    ],
    "data-8e6359ea3034b8410708361bb10fafd5": [
      {
        "attempt": 1,
        "score": 30
      },
      {
        "attempt": 2,
        "score": 60
      },
      {
        "attempt": 3,
        "score": 75
      },
      {
        "attempt": 4,
        "score": 58
      },
      {
        "attempt": 5,
        "score": 67
      }
    ]
  },
  "layer": [
    {
      "data": {
        "name": "data-39ffbda2b5d5fe96de84d9e308d920ff"
      },
      "encoding": {
        "color": {
          "field": "label",
          "scale": {
            "scheme": "greenblue"
          },
          "type": "ordinal"
        },
        "x": {
          "field": "x_min",
          "scale": {
            "zero": false
          },
          "title": "Attempt",
          "type": "quantitative"
        },
        "x2": {
          "field": "x_max",
          "type": "quantitative"
        },
        "y": {
          "axis": null,
          "field": "y_min",
          "type": "quantitative"
        },
        "y2": {
          "field": "y_max",
          "type": "quantitative"
        }
      },
      "mark": "rect"
    },
    {
      "data": {
        "name": "data-1acee7c5d817865a529b53e022474ce8"
      },
      "encoding": {
        "text": {
          "field": "label",
          "type": "ordinal"
        },
        "x": {
          "field": "x_min",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        },
        "y": {
          "axis": {
            "labels": false,
            "tickCount": 5,
            "ticks": false
          },
          "field": "y_med",
          "type": "quantitative"
        }
      },
      "mark": {
        "dx": -15,
        "dy": 8,
        "size": 15,
        "type": "text"
      }
    },
    {
      "data": {
        "name": "data-8e6359ea3034b8410708361bb10fafd5"
      },
      "encoding": {
        "x": {
          "axis": {
            "tickCount": 5
          },
          "field": "attempt",
          "title": "Attempt",
          "type": "quantitative"
        },
        "y": {
          "field": "score",
          "scale": {
            "domain": [
              0,
              100
            ]
          },
          "title": "Grade",
          "type": "quantitative"
        }
      },
      "mark": {
        "point": true,
        "type": "line"
      }
    }
  ]
}

Upvotes: 2

user3692823
user3692823

Reputation: 381

To get it working, I first had to change the encoding of the x and y axis to be ordinal. Then I mapped your input data values to letter grades before creating the schema:

//replace every score value with correct letter grade
values.forEach(datapoint => {
  if(datapoint.score > 90) {
    datapoint.score = "A";
  } else if(datapoint.score > 80) {
    datapoint.score = "B";
  } else if (datapoint.score > 70) {
    //so on...
  }
});

Here is a working example in the vega-lite editor: Line Chart with Ordinal Values

Here is the schema:

{
      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
      "data": {
        "values": [
          {
            "attempt": 1,
            "score": "F"
          },
          {
            "attempt": 2,
            "score": "D"
          },
          {
            "attempt": 3,
            "score": "C"
          },
          {
            "attempt": 4,
            "score": "F"
          },
          {
            "attempt": 5,
            "score": "D"
          }
        ]
      },
      "mark": {
        "type": "line",
        "color": "#22bc9a",
        "point": {
          "filled": false
        }
      },
      "encoding": {
        "x": {
          "field": "attempt",
          "type": "ordinal",
          "axis": {
            "title": "Attempt"
          }
        },
        "y": {
          "field": "score",
          "type": "ordinal",
          "axis": {
            "title": "Grade"
          }
        },
        "opacity": {"value": 0.3}
      },
      "config": {
        "autosize": "fit",
        "axis": {
          "labelColor": "#bebec8",
          "tickColor": "#bebec8",
          "titleColor": "black",
          "titleFontWeight": "normal",
          "titleFontSize": 11,
          "labelFont": "Helvetica",
          "titleFont": "Helvetica",
          "gridOpacity": 0.4,
          "gridWidth": 1.5
        },
        "view": {
          "strokeWidth": 0
        }
      }
    }

Upvotes: 0

Related Questions