Template:Graph:Stacked/testcases
From Linux Web Expert
| File:Gnome-applications-science.svg | This is the template test cases page for the [[../sandbox|sandbox]] of Template:Graph:Stacked/testcases. to update the examples. |
Test legend ordering with explicate `series` parameter
Series order and legend order should match each other
series="TX","NY","CA" ( colors=#1f77b4, #ff7f0e, #2ca02c )
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["#1f77b4"," #ff7f0e"," #2ca02c"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
series="NY","CA","TX" ( colors=#ff7f0e, #2ca02c, #1f77b4 )
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "NY","CA","TX" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["NY","CA","TX"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["#ff7f0e"," #2ca02c"," #1f77b4"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
series="TX","NY","CA" ( colors=#2ca02c, #1f77b4, #ff7f0e )
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "CA","TX","NY" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["CA","TX","NY"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["#2ca02c"," #1f77b4"," #ff7f0e"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test dataset optional filtering (e.g. for limiting x-axis displayed range)
without filtering (default width)
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
filter = 2000 <= datum.year && datum.year <= 2010
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 300, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{ "type": "filter", "test": "2000 <= datum.year && datum.year <= 2010" },
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
filter = datum.year <= 2010
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 300, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{ "type": "filter", "test": "datum.year <= 2010" },
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test optional arbitrary ("raw") data transforms
filter = 2000 <= datum.year && datum.year <= 2010
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 300, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{ "type": "filter", "test": "2000 <= datum.year && datum.year <= 2010" },
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
dataTransforms = { "type": "filter", ... }, { "type": "filter", ... }
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 300, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{ "type": "filter", "test": "2000 <= datum.year" },
{ "type": "filter", "test": "datum.year <= 2010" },
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test different colors list formats
colors=["#1f77b4", "#ff7f0e", "#2ca02c"]
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["#1f77b4", "#ff7f0e", "#2ca02c"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
colors=["rgba(31,119,180,80%)", "rgba(255,127,14,80%)", "rgba(44,160,44,80%)"]
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["rgba(31,119,180,80%)", "rgba(255,127,14,80%)", "rgba(44,160,44,80%)"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
colors=rgb(31 119 180 / 70%), rgb(255 127 14 / 70%), rgb(44 160 44 / 70%)
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["rgb(31 119 180 / 70%)"," rgb(255 127 14 / 70%)"," rgb(44 160 44 / 70%)"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
colors="category20"
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category20",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
colorscheme=category20
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category20",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test chart sizing (enabling/disabling chart width grows)
without explicit `chartSizing` (default chart sizing model)
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
chartSizing=fit | chartSizing=padding-box
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "strict",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "strict",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "strict",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
chartSizing=pad | chartSizing=content-box
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test chart title positioning
default chart title positioning
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
titleXAlign=left
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"value": 0 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "left"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"value": 0 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "left"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
titleXAlign=right
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x2": {"signal": "width", "mult": 1.0, "offset": 0 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "right"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x2": {"signal": "width", "mult": 1.0, "offset": 0 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "right"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
titleXAlign=center
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"xc": {"signal": "width", "mult": 0.5, "offset": 0 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"xc": {"signal": "width", "mult": 0.5, "offset": 0 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
titleXAlign=center | titleXOffset=80
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "Sates (with long long legend)", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"xc": {"signal": "width", "mult": 0.5, "offset": 80 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test axis domain min/max values values + clamping
It is possible to extend axis scales. And it is possible to shrink axis scale by manually providing scale domain min/max values, however without having "clamp":true it will not crop data plotting itself, but only affect axis positioning on graph, while adding "clamp":true actually applies data plotting cropping.
type=year
xAxisMin=1994 | xAxisMax=2020 | yAxisMax=8000000
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"domainMin": 757382400000,
"domainMax": 1577836800000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 8000000,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"domainMin": 757382400000,
"domainMax": 1577836800000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 8000000,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
xAxisMin=1999 | xAxisMax=2014 | yAxisMax=4500000 | (without clamping)
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"domainMin": 915148800000,
"domainMax": 1388534400000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 4500000,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["rgba(31,119,180,30%)", "rgba(255,127,14,30%)", "rgba(44,160,44,30%)"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"domainMin": 915148800000,
"domainMax": 1388534400000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 4500000,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
["rgba(31,119,180,30%)", "rgba(255,127,14,30%)", "rgba(44,160,44,30%)"],
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
xAxisMin=1999 | xAxisMax=2014 | yAxisMax=4500000 | xAxisClamp=true | yAxisClamp=true
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"domainMin": 915148800000,
"domainMax": 1388534400000,
"clamp": true,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 4500000,
"clamp": true,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"domainMin": 915148800000,
"domainMax": 1388534400000,
"clamp": true,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 4500000,
"clamp": true,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
type=linear
xAxisZero=false | xAxisMin=1994 | xAxisMax=2020 | yAxisMax=8000000
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
"domainMin": 1994,
"domainMax": 2020,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 8000000,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
"domainMin": 1994,
"domainMax": 2020,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 8000000,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
xAxisZero=false | xAxisMin=1999 | xAxisMax=2014 | yAxisMax=4500000 | xAxisClamp=true | yAxisClamp=true
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
"domainMin": 1999,
"domainMax": 2014,
"clamp": true,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 4500000,
"clamp": true,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
"domainMin": 1999,
"domainMax": 2014,
"clamp": true,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
"domainMax": 4500000,
"clamp": true,
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test axis marks font size, angle + test legend labels transform
xAxisAngle = -25 | xAxisFontSize = 20 | yAxisAngle = 25 | yAxisFontSize = 20 | labelsTransforms = { ... }
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
{"type": "formula", "field": "title", "expr":"datum.title + ' (' + datum.name + ')'"},
] },
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
"align": {"value": "right"}, "angle": {"value": -25 },
"fontSize": {"value": 20 },
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
"align": {"value": "right"}, "angle": {"value": 25 },
"fontSize": {"value": 20 },
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
Test annotations
type=year
hAnnotationsValues = {"text": "v 4.75", "y": 4750000} | vAnnotationsValues = {"text": "v 2002", "x": 2002}
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"values": [{"text": "v 2002", "x": 2002}],
"transform": [
{"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"values": [{"text": "v 4.75", "y": 4750000}],
"transform": [
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"values": [{"text": "v 2002", "x": 2002}],
"transform": [
{"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"values": [{"text": "v 4.75", "y": 4750000}],
"transform": [
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2000 || datum.year == 2004" },
{ "type": "formula", "field": "x", "expr": "datum.year" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2004 || datum.year == 2014" },
{ "type": "formula", "field": "y", "expr": "datum.TX + datum.NY + datum.CA" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2000 || datum.year == 2004" },
{ "type": "formula", "field": "x", "expr": "datum.year" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2004 || datum.year == 2014" },
{ "type": "formula", "field": "y", "expr": "datum.TX + datum.NY + datum.CA" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"offset": 8,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
,"offset":-7
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
type=linear
hAnnotationsValues = {"text": "v 4.75", "y": 4750000} | vAnnotationsValues = {"text": "v 2002", "x": 2002}
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"values": [{"text": "v 2002", "x": 2002}],
"transform": [
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"values": [{"text": "v 4.75", "y": 4750000}],
"transform": [
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"values": [{"text": "v 2002", "x": 2002}],
"transform": [
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"values": [{"text": "v 4.75", "y": 4750000}],
"transform": [
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
{
"type": "impute",
"groupby": ["key"],
"orderby": ["_xfield"],
"field": "value",
"method": "value",
"value": 0
},
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2000 || datum.year == 2004" },
{ "type": "formula", "field": "x", "expr": "datum.year" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2004 || datum.year == 2014" },
{ "type": "formula", "field": "y", "expr": "datum.TX + datum.NY + datum.CA" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "group",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
{"type": "facet", "groupby": ["key"]}
]
},
"marks": [
{
"type": "area",
"encode": {
"hover": {
"fill": {"value": "red"}
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"},
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"},
"interpolate": {"value": "monotone"}
}
}
}
],
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
<graph> {
"$schema": "https://vega.github.io/schema/vega/v5.json", "width": 550, "height": 250, "autosize": { "type": "fit", "resize": false, "contains": "padding" },
"padding": "auto",
"data": [
{
"name": "series_fields_names",
"values": [ "TX","NY","CA" ],
"transform": [
{"type": "formula", "field": "orderSrc", "expr": "datum._id"},
]
},
{
"name": "chart",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json"
, "property": "data"
}, "transform": [
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
},
{"type": "sort", "by": ["_xfield"]},
{"type": "fold", "fields": ["TX","NY","CA"]},
{"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
{"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
] },
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
{
"name": "vAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2000 || datum.year == 2004" },
{ "type": "formula", "field": "x", "expr": "datum.year" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "hAnnotations",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 2004 || datum.year == 2014" },
{ "type": "formula", "field": "y", "expr": "datum.TX + datum.NY + datum.CA" },
{ "type": "formula", "field": "text", "expr": "'v ' + (datum.TX + datum.NY + datum.CA) + ' ' + datum.year" },
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
{
"name": "stats",
"source": "chart",
"transform": [{
"type": "aggregate",
"groupby": ["_xfield"],
"fields": ["value"], "ops": ["sum"]
}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "fields": ["_xfield"]},
"range": "width",
"zero": false,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "stats", "fields": ["sum_value"]},
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "chart", "fields": ["key"]},
"range":
"category10",
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "fields": ["name"]},
"range": {"data": "labels", "field": "title"},
}
],
"legends": [{
"fill": "color", "stroke": "color",
"title": "States", "encode": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "orient": "bottom", "tickOffset": 0,
"ticks": 7,
"encode": {
"labels": { "update": {
} }
},
},
{
"scale": "y", "orient": "left", "tickOffset": 0,
"encode": {
"labels": { "update": {
} }
},
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "chart",
"transform": [
{"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
]
},
"encode": {
"hover": {
"fill": { "value": "red" }
},
"update": {
"fill": {"scale": "color", "field": "key"}
},
"enter": {
"x": {"scale": "x", "field": "_xfield"
},
"width": {"value": 14 },
"y": {"scale": "y", "field": "layout_start"},
"y2": {"scale": "y", "field": "layout_end"},
"fill": {"scale": "color", "field": "key"}
}
}
},
{
"type": "rule",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
{
"type": "rule",
"encode": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -15},
"x": {"signal": "width", "mult": 0.5, "offset": 30 },
"text": {"value": "Per state GDP"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit source data.
