Skip to content

Instantly share code, notes, and snippets.

@keckelt

keckelt/.Vega Gists.md

Last active October 21, 2021 12:41
Show Gist options
  • Save keckelt/83f0fdce4fcd5b758ba16e8570f76d92 to your computer and use it in GitHub Desktop.
Save keckelt/83f0fdce4fcd5b758ba16e8570f76d92 to your computer and use it in GitHub Desktop.
Download ZIP
Vega Lite Gists
Raw
Aggregated Scatterplot.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "data/cars.json"},
"mark": {"type": "circle", "tooltip": true},
"encoding": {
"x": {
"bin": true,
"field": "Horsepower",
"type": "quantitative"
},
"y": {
"bin": true,
"field": "Displacement",
"type": "quantitative"
},
"color": {
"field": "Origin",
"type": "nominal"
},
"size": {
"aggregate": "count",
"field": "*",
"type": "quantitative"
}
}
}
Raw
Bin_Transform.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/movies.json"},
"transform": [{"bin": true, "field": "IMDB_Rating", "as": "bin_IMDB_Rating"}],
"mark": "bar",
"encoding": {
"x": {
"field": "bin_IMDB_Rating",
"title": "IMDB_Rating (binned)",
"bin": {"binned": true, "step": 1},
"type": "quantitative"
},
"x2": {"field": "bin_IMDB_Rating_end"},
"y": {"aggregate": "count", "type": "quantitative"}
}
}
Raw
Color+Opacity Selection.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"data": {
"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}
]
},
"selection": {
"select": {"type": "multi", "empty": "none", "toggle": "true"},
"hover": {"type": "single", "empty": "none", "on": "mouseover"}
},
"mark": {
"type": "bar"
},
"encoding": {
"x": {"field": "a", "type": "nominal"},
"y": {"field": "b", "type": "quantitative"},
"color": {"field": "a", "type": "nominal",
"condition": [
{
"selection": "select",
"value": "#FFC340"
},
{
"selection": "hover",
"value": "#52C0CC"
}
]
},
"fillOpacity": {
"condition": [
{
"test": {
"or": [
{"selection": "select"},
{"selection": "hover"},
"!length(data(\"select_store\"))"
]
},
"value": 1
}
],
"value": 0.3
}
}
}
Raw
Density Plot flipped.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/cars.json"},
"width": 400,
"height": 400,
"transform":[
{
"groupby": ["Origin"],
"density": "Horsepower",
"counts": true,
"steps": 100
}
],
"mark": "line",
"encoding": {
"x": {
"field": "density",
"title": "Counts of Value",
"type": "quantitative",
"axis": {
"orient": "top"
}
},
"y": {
"field": "value",
"type": "quantitative",
"sort": "descending",
"title": null
},
"color": {
"field": "Origin",
"type": "nominal"
},
"order": {"field": "value", "type": "quantitative"}
}
}
Raw
Density with null (keep null).vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"a": 13.1, "b": "Apple"},
{"a": 16.6, "b": "Banana"},
{"a": 23.1, "b": "Apple"},
{"a": 26.1, "b": "Banana"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 30.1, "b": "Banana"},
{"a": 30.1, "b": "Apple"},
{"a": 30.1, "b": "Apple"},
{"a": 55.1, "b": "Banana"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.3, "b": "Orange"}
]
},
"hconcat": [{
"mark": {
"type": "line",
"tooltip": true
},
"transform":[
{
"groupby": ["b"],
"density": "a",
"steps": 100
}
],
"encoding": {
"x": {
"field": "value",
"type": "quantitative"
},
"y": {
"field": "density",
"type": "quantitative"
},
"color": {
"field": "b",
"type": "nominal"
}
},
"selection": {
"range": {
"type": "interval"
}
}
}, {
"mark": {
"type": "bar",
"tooltip": true
},
"transform": [{
"filter": {"field": "a", "valid": false}
}],
"encoding": {
"x": {
"bin": true,
"field": "a",
"type": "ordinal",
"title": null,
"scale": {
"domain": ["null"]
}
},
"y": {
"aggregate": "count",
"type": "quantitative",
"axis": {
"title": null,
"orient": "right",
"tickMinStep": 1
}
},
"color": {
"field": "b",
"type": "nominal"
}
}
}],
"config": {
"view": { "strokeWidth": 0},
"legend": {"symbolType": "square"}
}
}
Raw
Density with null.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"a": 13.1, "b": "Apple"},
{"a": 16.6, "b": "Banana"},
{"a": 23.1, "b": "Apple"},
{"a": 26.1, "b": "Banana"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 30.1, "b": "Banana"},
{"a": 30.1, "b": "Apple"},
{"a": 30.1, "b": "Apple"},
{"a": 55.1, "b": "Banana"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Orange"},
{"a": 55.1, "b": "Apple"},
{"a": null, "b": "Orange"}
]
},
"hconcat": [{
"mark": {
"type": "line",
"tooltip": true
},
"transform":[
{
"groupby": ["b"],
"density": "a",
"steps": 100
}
],
"encoding": {
"x": {
"field": "value",
"type": "quantitative"
},
"y": {
"field": "density",
"type": "quantitative"
},
"color": {
"field": "b",
"type": "nominal",
"legend": null
}
},
"selection": {
"range": {
"type": "interval"
}
}
}, {
"mark": {
"type": "bar",
"tooltip": true
},
"transform": [{
"filter": {"field": "a", "valid": false}
}],
"encoding": {
"x": {
"bin": true,
"field": "a",
"type": "ordinal",
"title": null
},
"y": {
"aggregate": "count",
"type": "quantitative",
"axis": {
"title": null,
"orient": "right",
"tickMinStep": 1
}
},
"color": {
"field": "b",
"type": "nominal"
}
}
}],
"config": {
"view": { "strokeWidth": 0}
}
}
Raw
Density with split rulers.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 400,
"height": 400,
"layer": [
{
"data": {"url": "data/cars.json"},
"mark": "line",
"transform":[
{
"groupby": ["Origin"],
"density": "Horsepower",
"counts": true,
"steps": 100
}
],
"encoding": {
"y": {
"field": "density",
"type": "quantitative"
},
"x": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "Origin",
"type": "nominal"
},
"order": {"field": "value", "type": "quantitative"}
}
}, {
"data": {
"name": "splitvalues"
},
"mark": {
"type": "rule",
"strokeDash": [4,6]
},
"encoding": {
"x": {"field": "data", "type": "quantitative"}
}
}
],
"datasets": {
"splitvalues": [65, 75, 93, 150, 230]
}
}
Raw
Flight Scatter.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/flights-2k.json"},
"width": 500,
"height": 500,
"mark": "point",
"encoding": {
"x": {
"field": "delay",
"type": "quantitative"
},
"y": {
"field": "distance",
"type": "quantitative"
},
"color": {
"value": "blue",
"condition": [
{
"selection": "brush",
"value": "goldenrod"
}
]
}
},
"selection": {
"brush": {
"type": "interval",
"empty": "none",
"on": "[mousedown, mouseup] > mousemove{0, 10}"
}
}
}
Raw
Grouped Bar Chart Legend.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": { "url": "https://vega.github.io/editor/data/cars.json"},
"transform": [
{
"lookup": "Origin",
"from": {
"data": {
"values": [
{"Origin": "USA", "NewLabel": "Teenage Mutant Ninja Turtles"},
{"Origin": "Europe", "NewLabel": "Na na na na na na na na na na na Batman!"},
{"Origin": "Japan", "NewLabel": "Skeletor - Lord of Destruction and Overlord of Evil"}
]
},
"key": "Origin",
"fields": ["NewLabel"]
}
}
],
"mark": {
"type": "bar",
"tooltip": true
},
"width": 400,
"encoding": {
"row": {
"field": "Cylinders", "type": "nominal", "spacing": 0,
"header":{
"labelAngle": 0,
"labelLimit": 150,
"labelAlign": "left",
"labelFontSize": 12,
"labelFont": "Yantramanav",
"title": null
}
},
"x": {
"aggregate": "count", "type": "quantitative",
"title": "Count of Cylinders",
"axis": {"grid": true, "orient": "top"}
},
"y": {
"field": "NewLabel", "type": "nominal",
"axis": null
},
"color": {
"field": "NewLabel",
"type": "nominal",
"condition": [
{
"selection": "selected",
"value": "#FFC340"
},
{
"selection": "hover",
"value": "#52C0CC"
}
],
"legend": {
"orient": "left",
"strokeColor": "#d4d4d4",
"padding": 6,
"title": "Cohort"
}
}
},
"selection": {
"selected": {
"type": "multi",
"toggle": "event.ctrlKey",
"empty": "none"
},
"hover": {
"type": "single",
"empty": "none",
"on": "mouseover",
"clear": "mouseout"
}
},
"config": {
"view": {"stroke": "lightgrey"},
"axis": {"domainWidth": 0}
}
}
Raw
Grouped Bar Chart.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": { "url": "https://vega.github.io/editor/data/cars.json"},
"mark": {
"type": "bar",
"tooltip": true
},
"width": 400,
"encoding": {
"row": {
"field": "Cylinders", "type": "nominal", "spacing": 0,
"header":{
"labelAngle": 0,
"labelLimit": 150,
"labelAlign": "left",
"labelFontSize": 12,
"labelFont": "Yantramanav",
"title": null
}
},
"x": {
"aggregate": "count", "type": "quantitative",
"title": "Count of Cylinders",
"axis": {"grid": true, "orient": "top"}
},
"y": {
"field": "Origin", "type": "nominal",
"axis": null
},
"color": {
"field": "Origin",
"type": "nominal",
"condition": [
{
"selection": "selected",
"value": "#FFC340"
},
{
"selection": "hover",
"value": "#52C0CC"
}
],
"legend": {
"orient": "left",
"strokeColor": "#d4d4d4",
"padding": 6,
"title": "Cohort"
}
}
},
"selection": {
"selected": {
"type": "multi",
"toggle": "true",
"empty": "none"
},
"hover": {
"type": "single",
"empty": "none",
"on": "mouseover",
"clear": "mouseout"
}
},
"config": {
"view": {"stroke": "lightgrey"},
"axis": {"domainWidth": 0}
}
}
Raw
Grouped Histogram with sorted Facets.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/penguins.json"},
"mark": "bar",
"encoding": {
"row": {"field": "Island"},
"y": {"field": "Species", "sort": "-x"},
"x": {"aggregate": "count"}
},
"resolve": {"scale": {"y": "independent"}}
}
Raw
Hist with null.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"a": null, "b": "Apple"},
{"a": null, "b": "Apple"},
{"a": null, "b": "Apple"},
{"a": 13.1, "b": "Apple"},
{"a": 16.6, "b": "Banana"},
{"a": 23.1, "b": "Apple"},
{"a": 26.1, "b": "Banana"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 20.3, "b": "Orange"},
{"a": 30.1, "b": "Banana"},
{"a": 30.1, "b": "Apple"},
{"a": 30.1, "b": "Apple"},
{"a": 55.1, "b": "Banana"},
{"a": null, "b": "Banana"},
{"a": null, "b": "Banana"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Apple"},
{"a": 55.1, "b": "Orange"},
{"a": 55.1, "b": "Apple"},
{"a": null, "b": "Orange"}
]
},
"hconcat": [{
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"bin": true,
"field": "a",
"type": "quantitative",
"title": "binned(a)"
},
"y": {
"aggregate": "count",
"type": "quantitative"
}
},
"selection": {
"range": {
"type": "interval"
}
}
}, {
"mark": {
"type": "bar",
"tooltip": true
},
"transform": [{
"filter": {"field": "a", "valid": false}
}],
"encoding": {
"x": {
"bin": true,
"field": "a",
"type": "ordinal",
"title": null
},
"y": {
"aggregate": "count",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"domainWidth": 0
}
}
}
}],
"resolve": {"scale": {"y": "shared"}},
"config": {
"concat": {"spacing": 0},
"view": { "strokeWidth": 0}
}
}
Raw
Lookup Color.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": "container",
"height": 250,
"data": {"url": "data/cars.json"},
"transform": [
{
"lookup": "Origin",
"from": {
"data": { "values": [] },
"key": "Origin",
"fields": ["NewLabel"]
},
"default": "tomato"
}
],
"mark": "bar",
"encoding": {
"x": {
"field": "Origin",
"type": "nominal"
},
"y": {
"aggregate": "count",
"type": "quantitative"
},
"color": {
"field": "NewLabel",
"type": "nominal",
"scale": null
}
}
}
Raw
Pan+Zoom and Interval.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Google's stock price over time.",
"data": {"values": [
{"x": 70, "y": 4},
{"x": 375, "y": 10},
{"x": 550, "y": 1},
{"x": 930, "y": 3}
]},
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
},
"selection": {
"selected": {
"type": "interval",
"mark": { "fill": "#FFCA40", "fillOpacity": 0.9},
"empty":"none",
"encodings": ["x"]
},
"panzoom": {
"type": "interval", "bind": "scales", "encodings": ["x"],
"on": "[mousedown[event.shiftKey], mouseup] > mousemove",
"translate": "[mousedown[event.shiftKey], mouseup] > mousemove"
}
}
},
{
"mark": "rule",
"encoding": {
"x": {
"field": "x", "type": "quantitative"
}
}
}
]
}
Raw
Relative_Absolute_Histogram.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/cars.json"},
"transform": [{
"aggregate": [{"op": "count", "as": "Count"}],
"groupby": ["Cylinders"]
}, {
"joinaggregate": [{"op": "sum", "field": "Count", "as": "TotalCount"}]
}, {
"calculate": "datum.Count/datum.TotalCount", "as": "PercentOfTotal"
}
],
"hconcat": [
{
"mark": "bar",
"encoding": {
"x": {
"field": "Cylinders",
"type": "ordinal"
},
"y": {
"field": "PercentOfTotal",
"type": "quantitative",
"axis": {
"title": "Relative Frequency",
"format": ".0%"
}
}
}
},
{
"mark": "bar",
"encoding": {
"x": {
"field": "Cylinders",
"type": "ordinal"
},
"y": {
"field": "Count",
"type": "quantitative",
"axis": {
"title": "Absolute Frequency"
}
}
}
}
]
}
Raw
Relative_Grouped+Sorted_Histogram.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/cars.json"},
"transform": [{
"aggregate": [{"op": "count", "as": "Count"}],
"groupby": ["Cylinders", "Origin"]
}, {
"joinaggregate": [{"op": "sum", "field": "Count", "as": "OriginCount"}],
"groupby": ["Origin"]
}, {
"joinaggregate": [{"op": "sum", "field": "Count", "as": "CylinderCount"}],
"groupby": ["Cylinders"]
}, {
"calculate": "datum.Count/datum.OriginCount", "as": "PercentOfOrigin"
}, {
"joinaggregate": [{"op": "sum", "field": "PercentOfOrigin", "as": "CylinderPercentCount"}],
"groupby": ["Cylinders"]
}
],
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {
"field": "Origin",
"type": "nominal",
"axis": {
"title": null,
"labels": false,
"ticks": false
}
},
"y": {
"field": "PercentOfOrigin",
"type": "quantitative",
"axis": {
"title": "Relative Frequency (per Origin)",
"format": ".1~%"
}
},
"column": {
"field": "Cylinders",
"type": "nominal",
"spacing": -2,
"sort": { "field": "CylinderPercentCount", "order": "descending"},
"header": {
"labelOrient": "bottom",
"titleOrient": "bottom"
}
},
"color": {
"field": "Origin",
"type": "nominal"
}
}
}
Raw
Relative_Grouped_Histogram.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/cars.json"},
"transform": [{
"aggregate": [{"op": "count", "as": "Count"}],
"groupby": ["Cylinders", "Origin"]
}, {
"joinaggregate": [{"op": "sum", "field": "Count", "as": "OriginCount"}],
"groupby": ["Origin"]
}, {
"calculate": "datum.Count/datum.OriginCount", "as": "PercentOfOrigin"
}
],
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {
"field": "Origin",
"type": "nominal",
"axis": {
"title": null,
"labels": false,
"ticks": false
}
},
"y": {
"field": "PercentOfOrigin",
"type": "quantitative",
"axis": {
"title": "Relative Frequency (per Origin)",
"format": ".1~%"
}
},
"column": {
"field": "Cylinders",
"type": "nominal",
"spacing": -2,
"header": {
"labelOrient": "bottom",
"titleOrient": "bottom"
}
},
"color": {
"field": "Origin",
"type": "nominal"
}
}
}
Raw
Rename Transform.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": "container",
"height": 250,
"data": {"url": "data/cars.json"},
"transform": [
{
"lookup": "Origin",
"from": {
"data": {
"values": [
{"Origin": "USA", "NewLabel": "Elsa"},
{"Origin": "Europe", "NewLabel": "Olaf"},
{"Origin": "Japan", "NewLabel": "Anna"}
]
},
"key": "Origin",
"fields": ["NewLabel"]
}
}
],
"mark": "bar",
"encoding": {
"x": {
"title": "Favorite Character",
"field": "NewLabel",
"type": "ordinal"
},
"y": {
"aggregate": "count",
"type": "quantitative"
}
}
}
Raw
Sort+Bin Numerical.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": "container",
"height": 250,
"data": {
"values": [
{"a": 13.1},
{"a": 16.6},
{"a": 23.1},
{"a": 26.1},
{"a": 20.3},
{"a": 30.1},
{"a": 55.1},
{"a": 55.1},
{"a": 55.1},
{"a": 55.1},
{"a": null}
]
},
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"y": {
"bin": true,
"field": "a",
"type": "quantitative",
"title": "binned(a)",
"sort": "descending"
},
"x": {
"aggregate": "count",
"type": "quantitative",
"axis": {
"orient": "top"
}
}
},
"selection": {
"range": {
"type": "interval"
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment