Vega Visualization Custom Axis orientation - data-visualization

Question

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}
}
}
}
]
};

Answer 1

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 :).