From d347a54b065500a2cee2403024ac3eca509f4a0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?George=20Ara=C3=BAjo?= Date: Sat, 27 Jan 2024 00:33:47 -0300 Subject: [PATCH 1/3] Added support for vega lite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: George Araújo --- _includes/scripts/vega.liquid | 40 +++++++++++++ _layouts/default.liquid | 1 + _posts/2024-01-27-vega-lite.md | 102 +++++++++++++++++++++++++++++++++ assets/js/copy_code.js | 3 +- assets/js/theme.js | 17 ++++++ 5 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 _includes/scripts/vega.liquid create mode 100644 _posts/2024-01-27-vega-lite.md diff --git a/_includes/scripts/vega.liquid b/_includes/scripts/vega.liquid new file mode 100644 index 000000000000..bc3c62b22e66 --- /dev/null +++ b/_includes/scripts/vega.liquid @@ -0,0 +1,40 @@ +{% if page.chart and page.chart.vega_lite %} + + + + + +{% endif %} diff --git a/_layouts/default.liquid b/_layouts/default.liquid index f42bfda8fa0f..820a39e1397c 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -49,6 +49,7 @@ {% include scripts/masonry.liquid %} {% include scripts/mermaid.liquid %} {% include scripts/chart.liquid %} + {% include scripts/vega.liquid %} {% include scripts/misc.liquid %} {% include scripts/badges.liquid %} {% include scripts/mathjax.liquid %} diff --git a/_posts/2024-01-27-vega-lite.md b/_posts/2024-01-27-vega-lite.md new file mode 100644 index 000000000000..5ced5dd7eaef --- /dev/null +++ b/_posts/2024-01-27-vega-lite.md @@ -0,0 +1,102 @@ +--- +layout: post +title: a post with vega lite +date: 2024-01-27 00:20: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" + } + } +} +``` diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js index 2d107f0bf1a5..3256f7af31be 100644 --- a/assets/js/copy_code.js +++ b/assets/js/copy_code.js @@ -4,7 +4,8 @@ codeBlocks.forEach(function (codeBlock) { if ( (codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) && codeBlock.querySelector("code:not(.language-chart)") && - codeBlock.querySelector("code:not(.language-mermaid)") + codeBlock.querySelector("code:not(.language-mermaid)") && + codeBlock.querySelector("code:not(.language-vega_lite)") ) { // create copy button var copyButton = document.createElement("button"); diff --git a/assets/js/theme.js b/assets/js/theme.js index efd3ae490505..f5365109f45f 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -16,6 +16,10 @@ let setTheme = (theme) => { if (typeof mermaid !== "undefined") { setMermaidTheme(theme); } + // if vegaEmbed is not defined, do nothing + if (typeof vegaEmbed !== "undefined") { + setVegaLiteTheme(theme); + } if (theme) { document.documentElement.setAttribute("data-theme", theme); @@ -120,6 +124,19 @@ let setMermaidTheme = (theme) => { } }; +let setVegaLiteTheme = (theme) => { + document.querySelectorAll(".vega-lite").forEach((elem) => { + // Get the code block content from previous element, since it is the vega lite code itself as defined in Markdown, but it is hidden + let jsonData = elem.previousSibling.childNodes[0].innerHTML; + elem.innerHTML = ""; + if (theme === 'dark') { + vegaEmbed(elem, JSON.parse(jsonData), {theme: 'dark'}); + } else { + vegaEmbed(elem, JSON.parse(jsonData)); + } + }); +}; + let transTheme = () => { document.documentElement.classList.add("transition"); window.setTimeout(() => { From b425b7757f65c9f502554e007c36f75a7d5adeea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?George=20Ara=C3=BAjo?= Date: Sat, 27 Jan 2024 01:18:33 -0300 Subject: [PATCH 2/3] Fixed prettier complaints MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: George Araújo --- _includes/scripts/vega.liquid | 2 +- _posts/2024-01-27-vega-lite.md | 2 ++ assets/js/theme.js | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/_includes/scripts/vega.liquid b/_includes/scripts/vega.liquid index bc3c62b22e66..1e8c397c8d79 100644 --- a/_includes/scripts/vega.liquid +++ b/_includes/scripts/vega.liquid @@ -31,7 +31,7 @@ /* Embed the visualization in the container */ if (theme === 'dark') { - vegaEmbed(chartElement, JSON.parse(jsonData), {theme: 'dark'}); + vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' }); } else { vegaEmbed(chartElement, JSON.parse(jsonData)); } diff --git a/_posts/2024-01-27-vega-lite.md b/_posts/2024-01-27-vega-lite.md index 5ced5dd7eaef..e94c3deeb87d 100644 --- a/_posts/2024-01-27-vega-lite.md +++ b/_posts/2024-01-27-vega-lite.md @@ -100,3 +100,5 @@ Which generates: } } ``` + +This plot supports both light and dark themes. diff --git a/assets/js/theme.js b/assets/js/theme.js index f5365109f45f..9598ce87b08a 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -129,8 +129,8 @@ let setVegaLiteTheme = (theme) => { // Get the code block content from previous element, since it is the vega lite code itself as defined in Markdown, but it is hidden let jsonData = elem.previousSibling.childNodes[0].innerHTML; elem.innerHTML = ""; - if (theme === 'dark') { - vegaEmbed(elem, JSON.parse(jsonData), {theme: 'dark'}); + if (theme === "dark") { + vegaEmbed(elem, JSON.parse(jsonData), { theme: "dark" }); } else { vegaEmbed(elem, JSON.parse(jsonData)); } From 1d4871a8a543e04ba1dd30b6278e2c0cd33a5f03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?George=20Ara=C3=BAjo?= Date: Sat, 27 Jan 2024 11:13:27 -0300 Subject: [PATCH 3/3] Fixed prettier complaints MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: George Araújo --- assets/js/theme.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/js/theme.js b/assets/js/theme.js index dbb5520ad06e..8436959ad3cc 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -12,17 +12,17 @@ let setTheme = (theme) => { transTheme(); setHighlight(theme); setGiscusTheme(theme); - + // if mermaid is not defined, do nothing if (typeof mermaid !== "undefined") { setMermaidTheme(theme); } - + // if echarts is not defined, do nothing if (typeof echarts !== "undefined") { setEchartsTheme(theme); } - + // if vegaEmbed is not defined, do nothing if (typeof vegaEmbed !== "undefined") { setVegaLiteTheme(theme); @@ -144,9 +144,9 @@ let setEchartsTheme = (theme) => { } chart.setOption(JSON.parse(jsonData)); - }); + }); }; - + let setVegaLiteTheme = (theme) => { document.querySelectorAll(".vega-lite").forEach((elem) => { // Get the code block content from previous element, since it is the vega lite code itself as defined in Markdown, but it is hidden