I'm just trying to draw a grouped bar chart with Vega. But the bar that drew on the x-axis out of the range.
I tried to check the code but with limited knowledge of Vega, I failed. :-(
Here is my code. What I'm trying to do is to draw a vertical bar chat of value grouped by the country code which variable name is "category":
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic grouped bar chart example.",
"width": 400,
"height": 500,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"position": "0", "value": "0.017220172", "category": "ARG", "snapshots": "2020/10/21"},
{"position": "1", "value": "0.026153846", "category": "ARG", "snapshots": "2020/5/21"},
{"position": "2", "value": "0.031484258", "category": "ARG", "snapshots": "2020/6/3"},
{"position": "3", "value": "0.022488756", "category": "ARG", "snapshots": "2020/6/17"},
{"position": "4", "value": "0.024390244", "category": "ARG", "snapshots": "2020/7/2"},
{"position": "5", "value": "0.015130674", "category": "ARG", "snapshots": "2020/7/29"},
{"position": "6", "value": "0.017173052", "category": "ARG", "snapshots": "2020/8/26"},
{"position": "7", "value": "0.025510204", "category": "ARG", "snapshots": "2020/9/24"},
{"position": "0", "value": "0.002949853", "category": "BRA", "snapshots": "2020/10/21"},
{"position": "1", "value": "0.012944984", "category": "BRA", "snapshots": "2020/5/21"},
{"position": "2", "value": "0.018987342", "category": "BRA", "snapshots": "2020/6/3"},
{"position": "3", "value": "0.006309148", "category": "BRA", "snapshots": "2020/6/17"},
{"position": "4", "value": "0.003125", "category": "BRA", "snapshots": "2020/7/2"},
{"position": "5", "value": "0.009202454", "category": "BRA", "snapshots": "2020/7/29"},
{"position": "6", "value": "0.011976048", "category": "BRA", "snapshots": "2020/8/26"},
{"position": "7", "value": "0.00295858", "category": "BRA", "snapshots": "2020/9/24"},
{"position": "0", "value": "0", "category": "CAN", "snapshots": "2020/10/21"},
{"position": "1", "value": "0", "category": "CAN", "snapshots": "2020/5/21"},
{"position": "2", "value": "0", "category": "CAN", "snapshots": "2020/6/3"},
{"position": "3", "value": "0", "category": "CAN", "snapshots": "2020/6/17"},
{"position": "4", "value": "0", "category": "CAN", "snapshots": "2020/7/2"},
{"position": "5", "value": "0", "category": "CAN", "snapshots": "2020/7/29"},
{"position": "6", "value": "0", "category": "CAN", "snapshots": "2020/8/26"},
{"position": "7", "value": "0", "category": "CAN", "snapshots": "2020/9/24"},
{"position": "0", "value": "0.002159827", "category": "CHL", "snapshots": "2020/10/21"},
{"position": "1", "value": "0.0302267", "category": "CHL", "snapshots": "2020/5/21"},
{"position": "2", "value": "0.024813896", "category": "CHL", "snapshots": "2020/6/3"},
{"position": "3", "value": "0.009975062", "category": "CHL", "snapshots": "2020/6/17"},
{"position": "4", "value": "0.00486618", "category": "CHL", "snapshots": "2020/7/2"},
{"position": "5", "value": "0.01891253", "category": "CHL", "snapshots": "2020/7/29"},
{"position": "6", "value": "0.004555809", "category": "CHL", "snapshots": "2020/8/26"},
{"position": "7", "value": "0.013274336", "category": "CHL", "snapshots": "2020/9/24"},
{"position": "0", "value": "0.010989011", "category": "COL", "snapshots": "2020/10/21"},
{"position": "1", "value": "0.016393443", "category": "COL", "snapshots": "2020/5/21"},
{"position": "2", "value": "0", "category": "COL", "snapshots": "2020/6/3"},
{"position": "3", "value": "0", "category": "COL", "snapshots": "2020/6/17"},
{"position": "4", "value": "0.014492754", "category": "COL", "snapshots": "2020/7/2"},
{"position": "5", "value": "0", "category": "COL", "snapshots": "2020/7/29"},
{"position": "6", "value": "0.024096386", "category": "COL", "snapshots": "2020/8/26"},
{"position": "7", "value": "0.011494253", "category": "COL", "snapshots": "2020/9/24"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.2
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "table", "field": "value"},
"range": "height",
"round": true,
"zero": true,
"nice": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "position"},
"range": {"scheme": "category20"}
}
],
"axes": [
{"orient": "left", "scale": "yscale"},
{"orient": "bottom", "scale": "xscale", "tickSize": 2, "labelPadding": 4, "zindex": 1}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "facet",
"groupby": "category"
}
},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"}
}
},
"scales": [
{
"name": "pos",
"type": "band",
"range": "width",
"domain": {"data": "facet", "field": "position"}
}
],
"marks": [
{
"name": "bars",
"from": {"data": "facet"},
"type": "rect",
"encode": {
"enter": {
"x": {"scale": "pos", "field": "position"},
"width": {"scale": "pos", "band": 1},
"y": {"scale": "yscale", "field": "value"},
"y2": {"scale": "yscale", "value": 0},
"fill": {"scale": "color", "field": "position"}
}
}
}
]
}
]
}
Here is the result that I got:
Thanks to this post:
https://gist.github.com/AlexAbes/c17703ce10f7f4a272324ea317e7afce;
The x-scale needs to be updated.
"signals": [
{"name": "width", "update": "bandwidth('xscale')"}
],
Related
In the old vega-label documentation there is reference to a labeled stacked bar chart example. The example spec doesn’t work in the online Vega editor, throwing an error that a.map is not a function.
I am trying to do almost exactly what is referenced in the above example: create a vertically-stacked bar chart where each segment is labeled with its value. I have seen a few examples of this in Vega-Lite with layers, but how can it be achieved in Vega?
I’ve attempted to recreate the above spec using a group containing the rect mark and the text mark, but I’m not getting it right. I also see how to display the value as a tooltip on hover, but I’d like it displayed in the rectangle of each segment of the bar itself.
Ideally I would end up with a chart like this:
Here’s the spec I’ve been working with:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic stacked bar chart example.",
"width": 294,
"height": 200,
"padding": 5,
"autosize": {"type": "fit-x", "contains": "padding"},
"data": [
{
"name": "categories",
"values": [
{"y": 5, "c": 0, "name": "other"},
{"y": 7, "c": 1, "name": "corn"},
{"y": 22, "c": 2, "name": "pasture/hay"},
{"y": 31, "c": 3, "name": "developed"},
{"y": 35, "c": 4, "name": "forest"}
],
"transform": [
{
"type": "stack",
"field": "y"
}
]
}
],
"scales": [
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true, "zero": true,
"domain": {"data": "categories", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "categories", "field": "c"}
}
],
"axes": [
],
"marks": [
{
"name": "categoriesBars",
"type": "group",
"from": {"data": "categories"},
"zindex": 1,
"marks": [
{
"type": "rect",
"from": {"data": "categories"},
"encode": {
"enter": {
"x": {"value": 0},
"width": {"value": 294},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"scale": "color", "field": "c"}
},
"update": {
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"field": {"parent": "y"}},
"x": {"value": 130},
"fill": [
{"test": "contrast('white', datum.fill) > contrast('black', datum.fill)", "value": "white"},
{"value": "black"}
],
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {"field": {"parent": "name"}}
}
}
}
]
}
]
}
Is this what you're after?
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic stacked bar chart example.",
"width": 294,
"height": 200,
"padding": 5,
"autosize": {"type": "fit-x", "contains": "padding"},
"data": [
{
"name": "categories",
"values": [
{"y": 5, "c": 0, "name": "other"},
{"y": 7, "c": 1, "name": "corn"},
{"y": 22, "c": 2, "name": "pasture/hay"},
{"y": 31, "c": 3, "name": "developed"},
{"y": 35, "c": 4, "name": "forest"}
],
"transform": [{"type": "stack", "field": "y"}]
}
],
"scales": [
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "categories", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": {"scheme": "pastel2"},
"domain": {"data": "categories", "field": "c"}
}
],
"axes": [],
"marks": [
{
"name": "i",
"type": "rect",
"from": {"data": "categories"},
"encode": {
"enter": {
"x": {"value": 0},
"width": {"value": 294},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"scale": "color", "field": "c"}
},
"update": {"fillOpacity": {"value": 1}},
"hover": {"fillOpacity": {"value": 0.5}}
}
},
{
"type": "text",
"from": {"data": "i"},
"encode": {
"update": {
"y": {"field": "y"},
"dy": {"signal": "(datum.y2 - datum.y)/2"},
"x": {"signal": "width/2"},
"fill": [
{
"test": "contrast('white', datum.fill) > contrast('black', datum.fill)",
"value": "white"
},
{"value": "black"}
],
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {"field": "datum.name"}
}
}
}
]
}
I am using Vega to plot a bar chart. I also have a drop down list 'signal' that is used to specify the sort order of the data:
...
"signals": [
{
"name": "sortby",
"value": "name",
"bind": {"input": "select", "options": ["name", "net_worth"]}
}
],
"data": [
{
"name": "people",
"values": [
{"name": "Grimes", "net_worth": 1.2},
{"name": "Johnny", "net_worth": 6},
{"name": "Elon", "net_worth": 100},
{"name": "Amber", "net_worth": 0.1}
],
"transform": [
{
"type": "collect",
"sort": {"field": {"signal": "sortby"}, "order": "ascending"}
}
]
}
],
...
The sort transform is working correctly, when the chart is initially rendered, the data is sorted according to the default sort value of 'name'.
When I change the selected sortby value I see that the 'people' data is correctly sorted (I can see this by inspecting the Data Viewer tab in the Vega editor), however the marks do not update.
I've made sure that the encode.update definition for the marks holds all the positional data. I'm a bit stumped as to why the chart doesn't update, it feels like it's probably just due to a simple oversight by me and I'm hoping that someone here can spot what the issue is!
The full code is pasted below and is also available in the editor: Open the Chart in the Vega Editor
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 400,
"padding": 5,
"signals": [
{
"name": "sortby",
"value": "name",
"bind": {"input": "select", "options": ["name", "net_worth"]}
}
],
"data": [
{
"name": "people",
"values": [
{"name": "Grimes", "net_worth": 1.2},
{"name": "Johnny", "net_worth": 6},
{"name": "Elon", "net_worth": 100},
{"name": "Amber", "net_worth": 0.1}
],
"transform": [
{
"type": "collect",
"sort": {"field": {"signal": "sortby"}, "order": "ascending"}
}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"domain": {"data": "people", "field": "name"},
"range": "height",
"padding": 0.1
},
{
"name": "xscale",
"domain": {"data": "people", "field": "net_worth"},
"nice": true,
"range": "width"
}
],
"axes": [
{"orient": "top", "scale": "xscale"},
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {"data": "people"},
"encode": {
"enter": {"fill": {"value": "steelblue"}},
"update": {
"height": {"scale": "yscale", "band": 1},
"width": {"scale": "xscale", "field": "net_worth"},
"x": {"scale": "xscale", "value": 0},
"y": {"scale": "yscale", "field": "name"}
},
"exit": {"width": {"scale": "xscale", "value": 0}}
}
}
]
}
This is currently an open bug as described here: https://github.com/vega/vega/issues/1417. You can register your interest on that page to see when it will be fixed. In the meantime, I have used the workaround described to get the functionality you're after.
Editor.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 400,
"padding": 5,
"signals": [
{
"name": "sortby",
"value": "name",
"bind": {"input": "select", "options": ["name", "net_worth"]}
}
],
"data": [
{
"name": "people",
"values": [
{"name": "Grimes", "net_worth": 1.2},
{"name": "Johnny", "net_worth": 6},
{"name": "Elon", "net_worth": 100},
{"name": "Amber", "net_worth": 0.1}
],
"transform": [
{
"type": "window",
"sort": {"field": {"signal": "sortby"}},
"ops": ["row_number"],
"fields": [null],
"as": ["rank"]
}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"domain": {
"data": "people",
"field": "name",
"sort": {"field": "rank", "op": "min"}
},
"range": "height",
"padding": 0.1
},
{
"name": "xscale",
"domain": {"data": "people", "field": "net_worth"},
"nice": true,
"range": "width"
}
],
"axes": [
{"orient": "top", "scale": "xscale"},
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {"data": "people"},
"encode": {
"enter": {"fill": {"value": "steelblue"}},
"update": {
"height": {"scale": "yscale", "band": 1},
"width": {"scale": "xscale", "field": "net_worth"},
"x": {"scale": "xscale", "value": 0},
"y": {"scale": "yscale", "field": "name"}
},
"exit": {"width": {"scale": "xscale", "value": 0}}
}
}
]
}
I am trying to make a stacked barchart in Vega and have hit a wall where I swear that my code should work, based on the several examples I've been cross referencing, but instead I keep getting perfect axes...with no bars.
The way it's supposed to work in this example is that Alamo's "Operations" "Debt" and "Below Cap" should stack, with State Average having the same categories of data stacked in the same order next to it. Both should sum to the same level (1). The transformed data looks to be in good shape, as the y0/y1 and order are correct.
I initially assumed the problem is in the marks section since that's where the bars are defined but I can't identify what the issue is there, so now I'm wondering if it's something else. But I don't know what else to try.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A stacked bar chart describing ad valorem taxes in Texas community college districts.",
"width": 300,
"height": 300,
"padding": 5,
"background": "white",
"style": "cell",
"data": [
{
"name": "source_0",
"values": [
{
"name": "Operations (MO)",
"amount": 0.1078,
"district": "Alamo",
"sort": 1,
"y0": 0,
"y1": 0.1078
},
{
"name": "Debt (IS)",
"amount": 0.0414,
"district": "Alamo",
"sort": 2,
"y0": 0.1078,
"y1": 0.1492
},
{
"name": "Below Cap",
"amount": 0.8508,
"district": "Alamo",
"sort": 3,
"y0": 0.1492,
"y1": 1
},
{
"name": "Operations (MO)",
"amount": 0.152,
"district": "State Average",
"sort": 1,
"y0": 0,
"y1": 0.152
},
{
"name": "Debt (IS)",
"amount": 0.027,
"district": "State Average",
"sort": 2,
"y0": 0.152,
"y1": 0.179
},
{
"name": "Below Cap",
"amount": 0.821,
"district": "State Average",
"sort": 3,
"y0": 0.179,
"y1": 1
}
],
"format": {"type": "json"},
"transform": [
{
"type": "stack",
"groupby": ["district"],
"sort": {"field": "sort"},
"field": "amount"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "source_0", "field": "district"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "source_0", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "source_0", "field": "name"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1},
{"orient": "left", "scale": "y", "zindex": 1}
],
"marks": [
{
"type": "rect",
"from": {"data": "source_0"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "district"},
"width": {"scale": "x", "band": 1},
"y": {"scale": "y", "field": "y1"},
"y2": {"scale": "y", "value": "y0"},
"fill": {"scale": "color", "field": "name"}
}
}
}
]
}
Change your y2 from value to field. Editor
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A stacked bar chart describing ad valorem taxes in Texas community college districts.",
"width": 300,
"height": 300,
"padding": 5,
"background": "white",
"style": "cell",
"data": [
{
"name": "source_0",
"values": [
{
"name": "Operations (MO)",
"amount": 0.1078,
"district": "Alamo",
"sort": 1,
"y0": 0,
"y1": 0.1078
},
{
"name": "Debt (IS)",
"amount": 0.0414,
"district": "Alamo",
"sort": 2,
"y0": 0.1078,
"y1": 0.1492
},
{
"name": "Below Cap",
"amount": 0.8508,
"district": "Alamo",
"sort": 3,
"y0": 0.1492,
"y1": 1
},
{
"name": "Operations (MO)",
"amount": 0.152,
"district": "State Average",
"sort": 1,
"y0": 0,
"y1": 0.152
},
{
"name": "Debt (IS)",
"amount": 0.027,
"district": "State Average",
"sort": 2,
"y0": 0.152,
"y1": 0.179
},
{
"name": "Below Cap",
"amount": 0.821,
"district": "State Average",
"sort": 3,
"y0": 0.179,
"y1": 1
}
],
"format": {"type": "json"},
"transform": [
{
"type": "stack",
"groupby": ["district"],
"sort": {"field": "sort"},
"field": "amount"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "source_0", "field": "district"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "source_0", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "source_0", "field": "name"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1},
{"orient": "left", "scale": "y", "zindex": 1}
],
"marks": [
{
"type": "rect",
"from": {"data": "source_0"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "district"},
"width": {"scale": "x", "band": 1},
"y": {"scale": "y", "field": "y1"},
"y2": {"scale": "y", "field": "y0"},
"fill": {"scale": "color", "field": "name"}
}
}
}
]
}
I have a question about facet visualizations in vega.
I have a pretty similar problem as the nested bar char example.
Here I changed the order of the tuple values. as intended, the order in the visualization is changing to.
But I want the 3 facets ordered ascending for value "a".
I don't really understand, if there is a "scale" for the facets, or where to order them.
Second part would be to have an axes for the value "a" shown below/above the bar chart.
Hope someone can help me.
Greetings
Christian
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A nested bar chart example, with bars grouped by category.",
"width": 300,
"padding": 5,
"autosize": "pad",
"signals": [
{
"name": "rangeStep", "value": 20,
"bind": {"input": "range", "min": 5, "max": 50, "step": 1}
},
{
"name": "innerPadding", "value": 0.1,
"bind": {"input": "range", "min": 0, "max": 0.7, "step": 0.01}
},
{
"name": "outerPadding", "value": 0.2,
"bind": {"input": "range", "min": 0, "max": 0.4, "step": 0.01}
},
{
"name": "height",
"update": "trellisExtent[1]"
}
],
"data": [
{
"name": "tuples",
"values": [
{"a": 1, "b": "b", "c": 4.4},
{"a": 0, "b": "c", "c": 5.1},
{"a": 0, "b": "a", "c": 6.3},
{"a": 0, "b": "a", "c": 4.2},
{"a": 0, "b": "b", "c": 6.8},
{"a": 2, "b": "b", "c": 3.5},
{"a": 2, "b": "c", "c": 6.2}
],
"transform": [
{
"type": "aggregate",
"groupby": ["a", "b"],
"fields": ["c"],
"ops": ["average"],
"as": ["c"]
}
]
},
{
"name": "trellis",
"source": "tuples",
"transform": [
{
"type": "aggregate",
"groupby": ["a"]
},
{
"type": "formula", "as": "span",
"expr": "rangeStep * bandspace(datum.count, innerPadding, outerPadding)"
},
{
"type": "stack",
"field": "span"
},
{
"type": "extent",
"field": "y1",
"signal": "trellisExtent"
}
]
}
],
"scales": [
{
"name": "xscale",
"domain": {"data": "tuples", "field": "c"},
"nice": true,
"zero": true,
"round": true,
"range": "width"
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "trellis", "field": "a"}
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale", "domain": true }
],
"marks": [
{
"type": "group",
"from": {
"data": "trellis",
"facet": {
"name": "faceted_tuples",
"data": "tuples",
"groupby": "a"
}
},
"encode": {
"enter": {
"x": {"value": 0},
"width": {"signal": "width"}
},
"update": {
"y": {"field": "y0"},
"y2": {"field": "y1"}
}
},
"scales": [
{
"name": "yscale",
"type": "band",
"paddingInner": {"signal": "innerPadding"},
"paddingOuter": {"signal": "outerPadding"},
"round": true,
"domain": {"data": "faceted_tuples", "field": "b"},
"range": {"step": {"signal": "rangeStep"}}
}
],
"axes": [
{ "orient": "left", "scale": "yscale",
"ticks": false, "domain": false, "labelPadding": 4 }
],
"marks": [
{
"type": "rect",
"from": {"data": "faceted_tuples"},
"encode": {
"enter": {
"x": {"value": 0},
"x2": {"scale": "xscale", "field": "c"},
"fill": {"scale": "color", "field": "a"},
"strokeWidth": {"value": 2}
},
"update": {
"y": {"scale": "yscale", "field": "b"},
"height": {"scale": "yscale", "band": 1},
"stroke": {"value": null},
"zindex": {"value": 0}
},
"hover": {
"stroke": {"value": "firebrick"},
"zindex": {"value": 1}
}
}
}
]
}
]
}
I have a vega-lite chart that shows up as expected in Chrome (72.0.3626.96), but not in Firefox (70.0.1). I have checked the spec in the Vega Editor. Does anyone know why this might be?
Here are the rendered charts:
Firefox:
Chrome:
Here is the spec:
Any help you might be able to give would be much appreciated.
Apologies, but I do not know how to collapse this code.
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.2.1.json",
"background": "white",
"config": {"mark": {"tooltip": null}, "view": {"height": 300, "width": 400}},
"datasets": {
"data-511198e25d4dbee99248144390684caa": [
{
"counts": 338,
"filter_method": "greater than",
"grade": "9",
"index": 3,
"perc": 0.2669826224328594,
"school_code": "Board",
"threshold": "8",
"year": 20172018,
"year_lab": "2017/18",
"year_lab_q": "2017"
},
{
"counts": 414,
"filter_method": "greater than",
"grade": "9",
"index": 4,
"perc": 0.30689399555226093,
"school_code": "Board",
"threshold": "8",
"year": 20182019,
"year_lab": "2018/19",
"year_lab_q": "2018"
}
],
"data-72a083843a98847e44077116c495e448": [
{
"counts": 49,
"filter_method": "greater than",
"grade": "9",
"index": 0,
"perc": 0.3356164383561644,
"school_code": "KING",
"threshold": "8",
"year": 20142015,
"year_lab": "2014/15",
"year_lab_q": "2014"
},
{
"counts": 62,
"filter_method": "greater than",
"grade": "9",
"index": 5,
"perc": 0.3668639053254438,
"school_code": "MLTS",
"threshold": "8",
"year": 20162017,
"year_lab": "2016/17",
"year_lab_q": "2016"
},
{
"counts": 53,
"filter_method": "greater than",
"grade": "9",
"index": 6,
"perc": 0.29608938547486036,
"school_code": "KING",
"threshold": "8",
"year": 20172018,
"year_lab": "2017/18",
"year_lab_q": "2017"
},
{
"counts": 44,
"filter_method": "greater than",
"grade": "9",
"index": 7,
"perc": 0.25882352941176473,
"school_code": "MLTS",
"threshold": "8",
"year": 20172018,
"year_lab": "2017/18",
"year_lab_q": "2017"
},
{
"counts": 53,
"filter_method": "greater than",
"grade": "9",
"index": 8,
"perc": 0.3212121212121212,
"school_code": "KING",
"threshold": "8",
"year": 20182019,
"year_lab": "2018/19",
"year_lab_q": "2018"
},
{
"counts": 61,
"filter_method": "greater than",
"grade": "9",
"index": 9,
"perc": 0.25206611570247933,
"school_code": "MLTS",
"threshold": "8",
"year": 20182019,
"year_lab": "2018/19",
"year_lab_q": "2018"
}
]
},
"height": 400,
"layer": [
{
"data": {"name": "data-72a083843a98847e44077116c495e448"},
"encoding": {
"color": {
"field": "school_code",
"legend": {"labelFontSize": 15, "titleFontSize": 20},
"title": null,
"type": "nominal"
},
"tooltip": [
{
"field": "perc",
"format": ".2%",
"title": "percentage",
"type": "quantitative"
},
{
"field": "counts",
"title": "number",
"type": "quantitative"
},
{"field": "year_lab", "title": "school year", "type": "nominal"},
{"field": "school_code", "title": "level", "type": "nominal"},
{"field": "grade", "type": "nominal"},
{"field": "filter_method", "type": "nominal"},
{"field": "threshold", "type": "nominal"}
],
"x": {
"axis": {"format": "%Y", "tickCount": 5},
"field": "year_lab_q",
"scale": {"domain": ["2013.9", "2018.5"]},
"title": "School Year (beginning)",
"type": "temporal"
},
"y": {
"axis": {"format": ".0%"},
"field": "perc",
"title": "Percentage",
"type": "quantitative"
}
},
"mark": {"point": true, "type": "line"},
"selection": {
"selector001": {
"bind": "scales",
"encodings": ["x", "y"],
"type": "interval"
}
}
},
{
"data": {"name": "data-511198e25d4dbee99248144390684caa"},
"encoding": {
"color": {
"field": "school_code",
"legend": {"labelFontSize": 15, "titleFontSize": 20},
"scale": {"domain": ["Board"], "range": ["black"]},
"title": null,
"type": "nominal"
},
"tooltip": [
{
"field": "perc",
"format": ".2%",
"title": "percentage",
"type": "quantitative"
},
{
"field": "counts",
"title": "number",
"type": "quantitative"
},
{"field": "year_lab", "title": "school year", "type": "nominal"},
{"field": "school_code", "title": "level", "type": "nominal"},
{"field": "grade", "type": "nominal"},
{"field": "filter_method", "type": "nominal"},
{"field": "threshold", "type": "nominal"}
],
"x": {"field": "year_lab_q", "type": "temporal"},
"y": {"field": "perc", "type": "quantitative"}
},
"mark": {"point": true, "type": "line"}
}
],
"resolve": {"scale": {"color": "independent"}},
"title": "A title!",
"width": 700
}
It appears that your temporal values are not being parsed correctly in firefox (details of javascript date parsing behavior is often browser-dependent). You could try forcing the correct parsing by changing your data specification (in both places) to:
"data": {
"name": "data-72a083843a98847e44077116c495e448",
"format": {"parse": {"year_lab_q": "date:%Y"}}
}
This should ensure that the year string is parsed as a year, rather than e.g. a unix timestamp.
The other place date parsing is happening is in your domain specification. You might try changing those to a more standard time format, e.g.
"domain": ["2013-11-01", "2018-06-01"]