a29e24a46b
This PR is related to #2309. I added an optional `last_updated` field. This new field represents the timestamp for when the post was last updated. Consequently, the existing `date` metadata should now be interpreted as the creation date of the post. The formatting for displaying these dates has been standardized as follows: ```text Created: July 11, 2023 | Last Updated: April 14, 2024 ``` For a practical implementation example, please refer to [this post](https://torydeng.github.io/blog/2023/deploying-server/) on my website, where I have applied these changes. --- Any feedback is wellcome.
106 lines
2.7 KiB
Markdown
106 lines
2.7 KiB
Markdown
---
|
|
layout: post
|
|
title: a post with vega lite
|
|
date: 2024-01-27 00:20:00
|
|
last_updated: 2024-04-14 04:30:00
|
|
description: this is what included vega lite code could look like
|
|
tags: formatting charts
|
|
categories: sample-posts
|
|
chart:
|
|
vega_lite: true
|
|
---
|
|
|
|
This is an example post with some [vega lite](https://vega.github.io/vega-lite/) code.
|
|
|
|
````markdown
|
|
```vega_lite
|
|
{
|
|
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
|
|
"description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
|
|
"data": {
|
|
"url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
|
|
},
|
|
"transform": [
|
|
{"filter": "datum['IMDB Rating'] != null"},
|
|
{"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
|
|
{
|
|
"joinaggregate": [{
|
|
"op": "mean",
|
|
"field": "IMDB Rating",
|
|
"as": "AverageRating"
|
|
}]
|
|
},
|
|
{
|
|
"calculate": "datum['IMDB Rating'] - datum.AverageRating",
|
|
"as": "RatingDelta"
|
|
}
|
|
],
|
|
"mark": "point",
|
|
"encoding": {
|
|
"x": {
|
|
"field": "Release Date",
|
|
"type": "temporal"
|
|
},
|
|
"y": {
|
|
"field": "RatingDelta",
|
|
"type": "quantitative",
|
|
"title": "Rating Delta"
|
|
},
|
|
"color": {
|
|
"field": "RatingDelta",
|
|
"type": "quantitative",
|
|
"scale": {"domainMid": 0},
|
|
"title": "Rating Delta"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
````
|
|
|
|
Which generates:
|
|
|
|
```vega_lite
|
|
{
|
|
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
|
|
"description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
|
|
"data": {
|
|
"url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
|
|
},
|
|
"transform": [
|
|
{"filter": "datum['IMDB Rating'] != null"},
|
|
{"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
|
|
{
|
|
"joinaggregate": [{
|
|
"op": "mean",
|
|
"field": "IMDB Rating",
|
|
"as": "AverageRating"
|
|
}]
|
|
},
|
|
{
|
|
"calculate": "datum['IMDB Rating'] - datum.AverageRating",
|
|
"as": "RatingDelta"
|
|
}
|
|
],
|
|
"mark": "point",
|
|
"encoding": {
|
|
"x": {
|
|
"field": "Release Date",
|
|
"type": "temporal"
|
|
},
|
|
"y": {
|
|
"field": "RatingDelta",
|
|
"type": "quantitative",
|
|
"title": "Rating Delta"
|
|
},
|
|
"color": {
|
|
"field": "RatingDelta",
|
|
"type": "quantitative",
|
|
"scale": {"domainMid": 0},
|
|
"title": "Rating Delta"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
This plot supports both light and dark themes.
|