Skip to content

Instantly share code, notes, and snippets.

@domoritz

domoritz/filtered_line.json

Forked from willium/filtered_line.json
Last active April 15, 2016 23:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save domoritz/ffc91b888991d74380d17d8ea89feba7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save domoritz/ffc91b888991d74380d17d8ea89feba7 to your computer and use it in GitHub Desktop.
Download ZIP
vega label specs
Raw
filtered_line.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/stocks.csv",
"format": {
"type": "csv",
"parse": {"date": "date","price": "number"}
},
"transform": [
{
"type": "filter",
"test": "datum.date!==null && datum.price!==null"
},
{"type": "filter","test": "datum.symbol==='GOOG'"}
]
},
{
"name": "layout",
"values": [{}],
"transform": [
{
"type": "formula",
"field": "cellWidth",
"expr": "200"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{"type": "formula","field": "width","expr": "200"},
{"type": "formula","field": "height","expr": "200"}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"description": "Google's stock price over time.",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "foobar",
"type": "line",
"from": {
"data": "source",
"transform": [{"type": "sort","by": "-date"}]
},
"properties": {
"update": {
"x": {"scale": "x","field": "date"},
"y": {"scale": "y","field": "price"},
"strokeWidth": {"value": 2},
"stroke": {"value": "#4682b4"}
}
}
},
{
"type": "text",
"from": {
"mark": "foobar",
"transform": [{
"type": "filter",
"test": "datum.datum.price > 700"
}]
},
"properties": {
"update": {
"text": {"field": "datum.price"},
"x": {"field": "x"},
"y": {"field": "y"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#BB0000"}
}
}
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source",
"field": "date",
"sort": {"field": "date","op": "min"}
},
"rangeMin": 0,
"rangeMax": 200,
"round": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source","field": "price"},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
}
],
"axes": [
{
"type": "x",
"scale": "x",
"formatType": "time",
"format": "%Y-%m-%d",
"grid": true,
"layer": "back",
"ticks": 5,
"title": "date",
"properties": {
"axis": {},
"labels": {
"angle": {"value": 270},
"align": {"value": "right"},
"baseline": {"value": "middle"}
}
}
},
{
"type": "y",
"scale": "y",
"format": "s",
"grid": true,
"layer": "back",
"title": "price",
"properties": {"axis": {},"labels": {}}
}
]
}
]
}
Raw
grouped_bars.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/population.json",
"format": {"type": "json","parse": {"people": "number"}},
"transform": [
{"type": "filter","test": "datum.people!==null"},
{
"type": "formula",
"field": "gender",
"expr": "datum.sex == 2 ? \"Female\" : \"Male\""
},
{"type": "filter","test": "datum.year == 2000"}
]
},
{
"name": "summary",
"source": "source",
"transform": [
{
"type": "aggregate",
"groupby": ["gender","age"],
"summarize": {"people": ["sum"]}
}
]
},
{
"name": "stacked_scale",
"source": "summary",
"transform": [
{
"type": "aggregate",
"groupby": ["gender","age"],
"summarize": [{"ops": ["sum"],"field": "sum_people"}]
}
]
},
{
"name": "layout",
"source": "summary",
"transform": [
{
"type": "aggregate",
"summarize": [
{"field": "gender","ops": ["distinct"]},
{"field": "age","ops": ["distinct"]}
]
},
{
"type": "formula",
"field": "cellWidth",
"expr": "(datum.distinct_gender + 1) * 6"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{
"type": "formula",
"field": "width",
"expr": "(datum.cellWidth + 4) * datum.distinct_age"
},
{
"type": "formula",
"field": "height",
"expr": "datum.cellHeight + 16"
}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "y-axes",
"type": "group",
"properties": {
"update": {
"width": {"field": {"group": "width"}},
"height": {"field": {"parent": "cellHeight"}},
"y": {"value": 8}
}
},
"axes": [
{
"type": "y",
"scale": "y",
"format": "s",
"grid": false,
"title": "population",
"properties": {"axis": {},"labels": {}}
}
]
},
{
"name": "cell",
"type": "group",
"from": {
"data": "summary",
"transform": [{"type": "facet","groupby": ["age"]}]
},
"properties": {
"update": {
"x": {"scale": "column","field": "age","offset": 2},
"y": {"value": 8},
"width": {"field": {"parent": "cellWidth"}},
"height": {"field": {"parent": "cellHeight"}},
"stroke": {"value": "#ccc"},
"strokeWidth": {"value": 0}
}
},
"marks": [
{
"name": "rect",
"type": "rect",
"from": {
"transform": [
{
"type": "stack",
"groupby": ["gender"],
"field": "sum_people",
"sortby": ["-gender"],
"output": {
"start": "sum_people_start",
"end": "sum_people_end"
}
}
]
},
"properties": {
"update": {
"xc": {"scale": "x","field": "gender"},
"width": {"value": 5},
"y": {"scale": "y","field": "sum_people_start"},
"y2": {"scale": "y","field": "sum_people_end"},
"strokeWidth": {"value": 2},
"fill": {"scale": "color","field": "gender"}
}
}
},
{
"type": "text",
"from": {"mark": "rect"},
"properties": {
"update": {
"text": {"field": "datum.sum_people_end"},
"y": {"field": "y","offset": -5},
"x": {"field": "xc"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000000"},
"strokeWidth": {"value": 2}
}
}
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"domain": {"data": "summary","field": "gender","sort": true},
"bandSize": 6,
"round": true,
"padding": 1,
"points": true
},
{
"name": "y",
"type": "linear",
"domain": {
"data": "stacked_scale",
"field": "sum_sum_people"
},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
},
{
"name": "column",
"type": "ordinal",
"domain": {"data": "summary","field": "age","sort": true},
"range": "width",
"round": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "summary","field": "gender","sort": true},
"range": ["#EA98D2","#659CCA"]
}
],
"axes": [
{
"type": "x",
"scale": "column",
"offset": -8,
"orient": "bottom",
"tickSize": 0,
"title": "age",
"properties": {
"axis": {"strokeWidth": {"value": 1}},
"labels": {}
}
}
],
"legends": [
{
"fill": "color",
"title": "gender",
"properties": {
"symbols": {
"shape": {"value": "square"},
"strokeWidth": {"value": 0}
}
}
}
]
}
]
}
Raw
horizontal_bars.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/birdstrikes.json",
"format": {"type": "json","parse": {"Flight_Date": "date"}},
"transform": [
{
"type": "filter",
"test": "datum.Flight_Date!==null"
},
{
"type": "formula",
"field": "month_Flight_Date",
"expr": "datetime(2006, month(datum.Flight_Date), 1, 0, 0, 0, 0)"
}
]
},
{
"name": "summary",
"source": "source",
"transform": [
{
"type": "aggregate",
"groupby": ["month_Flight_Date"],
"summarize": {"*": ["count"]}
}
]
},
{
"name": "month",
"values": [0,1,2,3,4,5,6,7,8,9,10,11],
"transform": [
{
"type": "formula",
"field": "date",
"expr": "datetime(2006, datum.data, 1, 0, 0, 0, 0)"
}
]
},
{
"name": "layout",
"source": "summary",
"transform": [
{
"type": "aggregate",
"summarize": [
{
"field": "month_Flight_Date",
"ops": ["distinct"]
}
]
},
{
"type": "formula",
"field": "cellWidth",
"expr": "200"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "(12 + 1) * 21"
},
{"type": "formula","field": "width","expr": "200"},
{
"type": "formula",
"field": "height",
"expr": "(12 + 1) * 21"
}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"description": "This example shows how to use timeUnit and shortTimeNames.",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "rect",
"type": "rect",
"from": {"data": "summary"},
"properties": {
"update": {
"x": {"scale": "x","field": "count"},
"x2": {"scale": "x","value": 0},
"yc": {"scale": "y","field": "month_Flight_Date"},
"height": {"value": 20},
"strokeWidth": {"value": 2},
"fill": {"value": "#4682b4"}
}
}
},
{
"type": "text",
"from": {"mark": "rect"},
"properties": {
"update": {
"text": {"field": "datum.count"},
"x": {"field": "x2","offset": 5},
"y": {"field": "yc"},
"baseline": {"value": "middle"},
"align": {"value": "left"},
"fill": {"value": "#000000"},
"strokeWidth": {"value": 2}
}
}
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "summary","field": "count"},
"rangeMin": 0,
"rangeMax": 200,
"round": true,
"nice": true,
"zero": true
},
{
"name": "y",
"type": "ordinal",
"domain": {"data": "month","field": "date"},
"bandSize": 21,
"round": true,
"padding": 1,
"points": true
}
],
"axes": [
{
"type": "x",
"scale": "x",
"format": "s",
"grid": true,
"layer": "back",
"ticks": 5,
"title": "Number of Records",
"properties": {"axis": {},"labels": {}}
},
{
"type": "y",
"scale": "y",
"formatType": "time",
"format": "%B",
"grid": false,
"title": "MONTH(Flight_Date)",
"properties": {"axis": {},"labels": {}}
}
]
}
]
}
Raw
line_allpoints.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/stocks.csv",
"format": {
"type": "csv",
"parse": {"date": "date","price": "number"}
},
"transform": [
{
"type": "filter",
"test": "datum.date!==null && datum.price!==null"
},
{"type": "filter","test": "datum.symbol==='GOOG'"}
]
},
{
"name": "layout",
"values": [{}],
"transform": [
{
"type": "formula",
"field": "cellWidth",
"expr": "200"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{"type": "formula","field": "width","expr": "200"},
{"type": "formula","field": "height","expr": "200"}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"description": "Google's stock price over time.",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "foobar",
"type": "line",
"from": {
"data": "source",
"transform": [{"type": "sort","by": "-date"}]
},
"properties": {
"update": {
"x": {"scale": "x","field": "date"},
"y": {"scale": "y","field": "price"},
"strokeWidth": {"value": 2},
"stroke": {"value": "#4682b4"}
}
}
},
{
"type": "text",
"from": {"mark": "foobar"},
"properties": {
"update": {
"text": {"template": "0"},
"x": {"field": "x"},
"y": {"field": "y"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#BB0000"}
}
}
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source",
"field": "date",
"sort": {"field": "date","op": "min"}
},
"rangeMin": 0,
"rangeMax": 200,
"round": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source","field": "price"},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
}
],
"axes": [
{
"type": "x",
"scale": "x",
"formatType": "time",
"format": "%Y-%m-%d",
"grid": true,
"layer": "back",
"ticks": 5,
"title": "date",
"properties": {
"axis": {},
"labels": {
"angle": {"value": 270},
"align": {"value": "right"},
"baseline": {"value": "middle"}
}
}
},
{
"type": "y",
"scale": "y",
"format": "s",
"grid": true,
"layer": "back",
"title": "price",
"properties": {"axis": {},"labels": {}}
}
]
}
]
}
Raw
line_label.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/stocks.csv",
"format": {
"type": "csv",
"parse": {"date": "date","price": "number"}
},
"transform": [
{
"type": "filter",
"test": "datum.date!==null && datum.price!==null && datum.symbol!=='AMZN'"
}
]
},
{
"name": "layout",
"values": [{}],
"transform": [
{
"type": "formula",
"field": "cellWidth",
"expr": "200"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{"type": "formula","field": "width","expr": "200"},
{"type": "formula","field": "height","expr": "200"}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"description": "Stock prices of 5 Tech Companies Over Time.",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "line-facet",
"type": "group",
"from": {
"data": "source",
"transform": [{"type": "facet","groupby": ["symbol"]}]
},
"properties": {
"update": {
"width": {"field": {"group": "width"}},
"height": {"field": {"group": "height"}}
}
},
"marks": [
{
"name": "foobar",
"type": "line",
"from": {
"transform": [{"type": "sort","by": "-date"}]
},
"properties": {
"update": {
"x": {"scale": "x","field": "date"},
"y": {"scale": "y","field": "price"},
"strokeWidth": {"value": 2},
"stroke": {"scale": "color","field": "symbol"}
}
}
},
{
"type": "text",
"from": {
"mark": "foobar",
"transform": [{
"type": "sort",
"by": "datum.date"
}, {"type": "rank","field": "datum.date", "normalize": true}, {
"type": "filter",
"test": "datum.rank === 1"
}]
},
"properties": {
"update": {
"text": {"field": "datum.price"},
"x": {"field": "x", "offset": 20},
"y": {"field": "y"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000"}
}
}
}
]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source",
"field": "date",
"sort": {"field": "date","op": "min"}
},
"rangeMin": 0,
"rangeMax": 200,
"round": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source","field": "price"},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "source","field": "symbol","sort": true},
"range": "category10"
}
],
"axes": [
{
"type": "x",
"scale": "x",
"formatType": "time",
"format": "%Y-%m-%d",
"grid": true,
"layer": "back",
"ticks": 5,
"title": "date",
"properties": {
"axis": {},
"labels": {
"angle": {"value": 270},
"align": {"value": "right"},
"baseline": {"value": "middle"}
}
}
},
{
"type": "y",
"scale": "y",
"format": "s",
"grid": true,
"layer": "back",
"title": "price",
"properties": {"axis": {},"labels": {}}
}
],
"legends": [
{
"stroke": "color",
"title": "symbol",
"properties": {"symbols": {"strokeWidth": {"value": 2}}}
}
]
}
]
}
Raw
scatterplot.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/cars.json",
"format": {
"type": "json",
"parse": {
"Horsepower": "number",
"Miles_per_Gallon": "number"
}
},
"transform": [
{
"type": "filter",
"test": "datum.Horsepower!==null && datum.Miles_per_Gallon!==null"
}
]
},
{
"name": "layout",
"values": [{}],
"transform": [
{
"type": "formula",
"field": "cellWidth",
"expr": "200"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{"type": "formula","field": "width","expr": "200"},
{"type": "formula","field": "height","expr": "200"}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "foobar",
"type": "symbol",
"from": {"data": "source"},
"properties": {
"update": {
"x": {"scale": "x","field": "Horsepower"},
"y": {"scale": "y","field": "Miles_per_Gallon"},
"size": {"value": 30},
"strokeWidth": {"value": 2},
"opacity": {"value": 0.7},
"stroke": {"value": "#4682b4"}
}
}
},
{
"type": "text",
"from": {"mark": "foobar"},
"properties": {
"update": {
"text": {"template": "({{datum.datum.Horsepower}}, {{datum.datum.Miles_per_Gallon}})"},
"x": {"field": "x"},
"y": {"field": "y"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000000"},
"strokeWidth": {"value": 2}
}
}
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "source","field": "Horsepower"},
"rangeMin": 0,
"rangeMax": 200,
"round": true,
"nice": true,
"zero": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source","field": "Miles_per_Gallon"},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
}
],
"axes": [
{
"type": "x",
"scale": "x",
"format": "s",
"grid": true,
"layer": "back",
"ticks": 5,
"title": "Horsepower",
"properties": {"axis": {},"labels": {}}
},
{
"type": "y",
"scale": "y",
"format": "s",
"grid": true,
"layer": "back",
"title": "Miles_per_Gallon",
"properties": {"axis": {},"labels": {}}
}
]
}
]
}
Raw
special.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"values": [
{"a": "A","b": 28},
{"a": "B","b": 55},
{"a": "C","b": 43},
{"a": "D","b": 91},
{"a": "E","b": 81},
{"a": "F","b": 53},
{"a": "G","b": 2},
{"a": "H","b": 87},
{"a": "I","b": 52}
],
"format": {"type": "json","parse": {"b": "number"}},
"transform": [{"type": "filter","test": "datum.b!==null"}]
},
{
"name": "layout",
"source": "source",
"transform": [
{
"type": "aggregate",
"summarize": [{"field": "a","ops": ["distinct"]}]
},
{
"type": "formula",
"field": "cellWidth",
"expr": "(datum.distinct_a + 1) * 21"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{
"type": "formula",
"field": "width",
"expr": "(datum.distinct_a + 1) * 21"
},
{"type": "formula","field": "height","expr": "200"}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"description": "A simple bar chart with embedded data.",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "rect",
"type": "rect",
"from": {"data": "source"},
"properties": {
"update": {
"xc": {"scale": "x","field": "a"},
"width": {"value": 20},
"y": {"scale": "y","field": "b"},
"y2": {"scale": "y","value": 0},
"strokeWidth": {"value": 2},
"fill": {"value": "#4682b4"}
}
}
},
{
"type": "text",
"from": {"mark": "rect", "transform": [
{
"type": "formula",
"expr": "(datum.y2 - datum.y) > 10 ? 'in' : 'out'",
"field": "where"
},
{
"type": "formula",
"expr": "datum.where === 'in' ? 'top' : 'bottom'",
"field": "baseline"
},
{
"type": "formula",
"expr": "datum.where === 'in' ? datum.y + 5 : datum.y - 5",
"field": "offset"
},
{
"type": "formula",
"expr": "datum.where === 'in' ? 'white' : 'black'",
"field": "color"
}
]},
"properties": {
"update": {
"text": {"field": "datum.b"},
"y": {"field": "offset"},
"x": {"field": "xc"},
"baseline": {"field": "baseline"},
"align": {"value": "center"},
"fill": {"field": "color"},
"strokeWidth": {"value": 2}
}
}
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"domain": {"data": "source","field": "a","sort": true},
"bandSize": 21,
"round": true,
"padding": 1,
"points": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source","field": "b"},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
}
],
"axes": [
{
"type": "x",
"scale": "x",
"grid": false,
"ticks": 5,
"title": "a",
"properties": {
"axis": {},
"labels": {
"text": {"template": "{{ datum.data | truncate:25}}"},
"angle": {"value": 270},
"align": {"value": "right"},
"baseline": {"value": "middle"}
}
}
}
]
}
]
}
Raw
stacked_bars.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/seattle-weather.csv",
"format": {"type": "csv","parse": {"date": "date"}},
"transform": [
{"type": "filter","test": "datum.date!==null"},
{
"type": "formula",
"field": "month_date",
"expr": "datetime(2006, month(datum.date), 1, 0, 0, 0, 0)"
}
]
},
{
"name": "summary",
"source": "source",
"transform": [
{
"type": "aggregate",
"groupby": ["month_date","weather"],
"summarize": {"*": ["count"]}
}
]
},
{
"name": "stacked_scale",
"source": "summary",
"transform": [
{
"type": "aggregate",
"groupby": ["month_date"],
"summarize": [{"ops": ["sum"],"field": "count"}]
}
]
},
{
"name": "month",
"values": [0,1,2,3,4,5,6,7,8,9,10,11],
"transform": [
{
"type": "formula",
"field": "date",
"expr": "datetime(2006, datum.data, 1, 0, 0, 0, 0)"
}
]
},
{
"name": "layout",
"source": "summary",
"transform": [
{
"type": "aggregate",
"summarize": [{"field": "month_date","ops": ["distinct"]}]
},
{
"type": "formula",
"field": "cellWidth",
"expr": "(12 + 1) * 21"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{
"type": "formula",
"field": "width",
"expr": "(12 + 1) * 21"
},
{"type": "formula","field": "height","expr": "200"}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "foobar",
"type": "rect",
"from": {
"data": "summary",
"transform": [
{
"type": "stack",
"groupby": ["month_date"],
"field": "count",
"sortby": ["-weather"],
"output": {"start": "count_start","end": "count_end"}
}
]
},
"properties": {
"update": {
"xc": {"scale": "x","field": "month_date"},
"width": {"value": 20},
"y": {"scale": "y","field": "count_start"},
"y2": {"scale": "y","field": "count_end"},
"strokeWidth": {"value": 2},
"fill": {"scale": "color","field": "weather"}
}
}
},
{
"type": "text",
"from": {"mark": "foobar"},
"properties": {
"update": {
"text": {"field": "datum.weather"},
"y": {"field": "y","offset": -5},
"x": {"field": "xc"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000000"},
"strokeWidth": {"value": 2}
}
}
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"domain": {"data": "month","field": "date"},
"bandSize": 21,
"round": true,
"padding": 1,
"points": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "stacked_scale","field": "sum_count"},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
},
{
"name": "color",
"type": "ordinal",
"domain": ["sun","fog","drizzle","rain","snow"],
"range": [
"#e7ba52",
"#c7c7c7",
"#aec7e8",
"#1f77b4",
"#9467bd"
]
}
],
"axes": [
{
"type": "x",
"scale": "x",
"formatType": "time",
"format": "%B",
"grid": false,
"ticks": 5,
"title": "Month of the year",
"properties": {
"axis": {},
"labels": {
"angle": {"value": 270},
"align": {"value": "right"},
"baseline": {"value": "middle"}
}
}
},
{
"type": "y",
"scale": "y",
"format": "s",
"grid": true,
"layer": "back",
"title": "Number of Records",
"properties": {"axis": {},"labels": {}}
}
],
"legends": [
{
"fill": "color",
"title": "Weather type",
"properties": {
"symbols": {
"shape": {"value": "square"},
"strokeWidth": {"value": 0}
}
}
}
]
}
]
}
Raw
vertical_bars.json
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"values": [
{"a": "A","b": 28},
{"a": "B","b": 55},
{"a": "C","b": 43},
{"a": "D","b": 91},
{"a": "E","b": 81},
{"a": "F","b": 53},
{"a": "G","b": 19},
{"a": "H","b": 87},
{"a": "I","b": 52}
],
"format": {"type": "json","parse": {"b": "number"}},
"transform": [{"type": "filter","test": "datum.b!==null"}]
},
{
"name": "layout",
"source": "source",
"transform": [
{
"type": "aggregate",
"summarize": [{"field": "a","ops": ["distinct"]}]
},
{
"type": "formula",
"field": "cellWidth",
"expr": "(datum.distinct_a + 1) * 21"
},
{
"type": "formula",
"field": "cellHeight",
"expr": "200"
},
{
"type": "formula",
"field": "width",
"expr": "(datum.distinct_a + 1) * 21"
},
{"type": "formula","field": "height","expr": "200"}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"description": "A simple bar chart with embedded data.",
"from": {"data": "layout"},
"properties": {
"update": {
"width": {"field": "width"},
"height": {"field": "height"}
}
},
"marks": [
{
"name": "rect",
"type": "rect",
"from": {"data": "source"},
"properties": {
"update": {
"xc": {"scale": "x","field": "a"},
"width": {"value": 20},
"y": {"scale": "y","field": "b"},
"y2": {"scale": "y","value": 0},
"strokeWidth": {"value": 2},
"fill": {"value": "#4682b4"}
}
}
},
{
"type": "text",
"from": {"mark": "rect"},
"properties": {
"update": {
"text": {"field": "datum.a"},
"y": {"field": "y","offset": -5},
"x": {"field": "xc"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000000"},
"strokeWidth": {"value": 2}
}
}
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"domain": {"data": "source","field": "a","sort": true},
"bandSize": 21,
"round": true,
"padding": 1,
"points": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source","field": "b"},
"rangeMin": 200,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
}
],
"axes": [
{
"type": "y",
"scale": "y",
"format": "s",
"grid": true,
"layer": "back",
"title": "b",
"properties": {"axis": {},"labels": {}}
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment