Take back control … of your data visualisations

Vega-Lite

  • Data are read inline or via a URL in .json or .csv format.
  • These data can then be optionally modified by filtering, aggregating, or by some other common transformation.
  • A mark like a bar, point, or line is then chosen to visually encode the data to.
  • These encodings then determine how to map the data to the properties of these visual marks e.g. position (x, y), size, and colour.

An example

Data

[
{"animal": "Cheetah", "kph": 120},
{"animal": "Domestic Cat", "kph": 48},
{"animal": "Elephant", "kph": 40},
{"animal": "Giraffe", "kph": 52},
{"animal": "Horse", "kph": 88},
{"animal": "Ostrich", "kph": 70},
{"animal": "Pig", "kph": 17.7},
{"animal": "Polar Bear", "kph": 30},
{"animal": "Rabbit", "kph": 48},
{"animal": "Squirrel", "kph": 20}
]
{
"data": {
"values": [
{"animal": "Cheetah", "kph": 120},
{"animal": "Domestic Cat", "kph": 48},
{"animal": "Elephant", "kph": 40},
{"animal": "Giraffe", "kph": 52},
{"animal": "Horse", "kph": 88},
{"animal": "Ostrich", "kph": 70},
{"animal": "Pig", "kph": 17.7},
{"animal": "Polar Bear", "kph": 30},
{"animal": "Rabbit", "kph": 48},
{"animal": "Squirrel", "kph": 20}
]
}
}

Transformation

{
"data": {
"values": [
{"animal": "Cheetah", "kph": 120},
{"animal": "Domestic Cat", "kph": 48},
{"animal": "Elephant", "kph": 40},
{"animal": "Giraffe", "kph": 52},
{"animal": "Horse", "kph": 88},
{"animal": "Ostrich", "kph": 70},
{"animal": "Pig", "kph": 17.7},
{"animal": "Polar Bear", "kph": 30},
{"animal": "Rabbit", "kph": 48},
{"animal": "Squirrel", "kph": 20}
]
},
"transform": [{"calculate": "datum.kph*0.62137", "as": "mph"}]
}

Marks

{
"data": {
"values": [
{"animal": "Cheetah", "kph": 120},
{"animal": "Domestic Cat", "kph": 48},
{"animal": "Elephant", "kph": 40},
{"animal": "Giraffe", "kph": 52},
{"animal": "Horse", "kph": 88},
{"animal": "Ostrich", "kph": 70},
{"animal": "Pig", "kph": 17.7},
{"animal": "Polar Bear", "kph": 30},
{"animal": "Rabbit", "kph": 48},
{"animal": "Squirrel", "kph": 20}
]
},
"transform": [{"calculate": "datum.kph*0.62137", "as": "mph"}],
"mark": "bar"
}
A “bar” mark

Encoding

{
"data": {
"values": [
{"animal": "Cheetah", "kph": 120},
{"animal": "Domestic Cat", "kph": 48},
{"animal": "Elephant", "kph": 40},
{"animal": "Giraffe", "kph": 52},
{"animal": "Horse", "kph": 88},
{"animal": "Ostrich", "kph": 70},
{"animal": "Pig", "kph": 17.7},
{"animal": "Polar Bear", "kph": 30},
{"animal": "Rabbit", "kph": 48},
{"animal": "Squirrel", "kph": 20}
]
},
"transform": [{"calculate": "datum.kph*0.62137", "as": "mph"}],
"mark": "bar",
"encoding": {
"x": {"field": "mph", "type": "quantitative"},
"y": {"field": "animal", "type": "nominal"}
}
}
A simple bar chart

Sort

{
"data": {
"values": [
{"animal": "Cheetah", "kph": 120},
{"animal": "Domestic Cat", "kph": 48},
{"animal": "Elephant", "kph": 40},
{"animal": "Giraffe", "kph": 52},
{"animal": "Horse", "kph": 88},
{"animal": "Ostrich", "kph": 70},
{"animal": "Pig", "kph": 17.7},
{"animal": "Polar Bear", "kph": 30},
{"animal": "Rabbit", "kph": 48},
{"animal": "Squirrel", "kph": 20}
]
},
"transform": [{"calculate": "datum.kph*0.62137", "as": "mph"}],
"mark": "bar",
"encoding": {
"x": {"field": "mph", "type": "quantitative"},
"y": {
"field": "animal",
"type": "nominal",
"sort": {"field": "mph", "op": "average", "order": "descending"}
}
}
}
Chart, sorted!

Finishing touches

{
"width": 300,
"title": {"text": "Top speeds of selected land animals"},
"data": {
"values": [
{"animal": "Cheetah", "kph": 120},
{"animal": "Domestic Cat", "kph": 48},
{"animal": "Elephant", "kph": 40},
{"animal": "Giraffe", "kph": 52},
{"animal": "Horse", "kph": 88},
{"animal": "Ostrich", "kph": 70},
{"animal": "Pig", "kph": 17.7},
{"animal": "Polar Bear", "kph": 30},
{"animal": "Rabbit", "kph": 48},
{"animal": "Squirrel", "kph": 20}
]
},
"transform": [{"calculate": "datum.kph*0.62137", "as": "mph"}],
"mark": "bar",
"encoding": {
"x": {
"field": "mph",
"type": "quantitative",
"axis": {"title": "Speed (mph)"}
},
"y": {
"field": "animal",
"type": "nominal",
"sort": {"field": "mph", "op": "average", "order": "descending"},
"axis": {"title": null}
},
"color": {"value": "#fc6721"},
"opacity": {"value": 0.7},
"tooltip": [
{"field": "animal", "type": "nominal", "title": "Animal"},
{
"field": "mph",
"type": "quantitative",
"title": "Speed",
"format": ".1f"
}
]
}
}
An interactive bar chart

Final thoughts

References

--

--

--

Supporting decision-making in Trafford by revealing patterns in data through visualisation.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Predictive Analysis — Netflix and Spotify can read your mind!

e-grocery rating 2018 results

Day 68: Average Precipitation by State

GA COVID-19 Report October 10, 2020

Flash in the pan: Trends from 2020

Predicting Happiness with Climate and Topography

Back to Facebook down on October 2021 | Financial analysis

tick trades, facebook outage, nasdaq, trades, financial data, financial markets, stock trading, equities

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Trafford Data Lab

Trafford Data Lab

Supporting decision-making in Trafford by revealing patterns in data through visualisation.

More from Medium

Microsoft Azure Fundamentals Training Series | 7-Azure Compute Services Series — Azure Virtual…

R-Programming -a little insight!

OData — No problem with KNIME

Comparison between ArcGIS Dashboard, Tableau Dashboard, and R Flexdashboard