Search code examples
data-visualizationgraph-visualizationvega

Vega Visualization Custom Axis orientation

I am making the following graph of temperature over time using Vega Visualization Grammar. I am currently using area plot.

  • X-axis - time
  • y-axis - temperature (Starting from -40 to 80)

I need the x-axis to start from 0 instead of -40.

Following is the vega Json:

var tempdata = {
  "width": 250,
  "height": 150,
  "background": "#FFF",
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 1,  "y": -40}, {"x": 2,  "y": -30},
        {"x": 3,  "y": -10}, {"x": 4,  "y": -4},
        {"x": 5,  "y": -1}, {"x": 6,  "y": 0},
        {"x": 7,  "y": -5}, {"x": 8,  "y": -2},
        {"x": 9,  "y": 20}, {"x": 10,  "y": 20},
        {"x": 11,  "y": 24}, {"x": 12,  "y": 12},
        {"x": 13,  "y": 50}, {"x": 14,  "y": 30},
        {"x": 15,  "y": 15}, {"x": 16,  "y": 60},
        {"x": 17,  "y": 60}, {"x": 18,  "y": 80},
        {"x": 19,  "y": 70}, {"x": 20,  "y": 70},
        {"x": 21,  "y": 72}, {"x": 22,  "y": 75},
        {"x": 23,  "y": 60}, {"x": 24,  "y": 60}


      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "y"}
    }
  ],
  "axes": [
    {
     "type": "x",
     "scale": "x",
     "properties": {
       "ticks": {
         "stroke": {"value": "#000"}
       },

       "labels": {
         "fill": {"value": "#000"}
       },
       "axis": {
         "stroke": {"value": "#000"},
         "strokeWidth": {"value": 1.5}
       }
     }
   },
    {
     "type": "y",
     "scale": "y",
     "properties": {
       "ticks": {
         "stroke": {"value": "#000"}
       },

       "labels": {
         "fill": {"value": "#000"}
       },
       "axis": {
         "stroke": {"value": "#000"},
         "strokeWidth": {"value": 1.5}
       }
     }
   }
  ],
  "marks": [
    {
      "type": "area",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "interpolate": {"value": "monotone"},
          "x": {"scale": "x", "field": "x"},
          "y": {"scale": "y", "field": "y"},
          "y2": {"scale": "y", "value": 0},
          "fill": {"value": "#A41600"},
          "stroke": {"value": "#FFF"}
        },
        "update": {
          "fillOpacity": {"value": 1}
        },
        "hover": {
          "fillOpacity": {"value": 0.5}
        }
      }
    }
  ]
};

enter image description here

Solution

  • From what you've written I suppose you want the y-Axis to start from 0 to 80, not the x-Axis, as you have stated (because the x-Axis does not include -40).

    A possible approach would be to remove the data which violates your condition, so in other words: Removing every datum which has a y-Value smaller than 0.

    You can achieve this by adding a data transform of type filter to the toplevel data-property in the following way:

    "transform":
[
  {
      "type": "filter",
      "test": "datum.y >= 0"
  }
]

    This will remove every datum which has a y-Value smaller than 0 and then you can proceed normally.

    Make sure to enter above code in the toplevel-property data.

    P.S. Feel free to edit by highlighting/ underlining anything as this is my first post and eventually will contain flaws :).