chore: move posts to qmd

posts/bar-charts-makeover.qmd

@@ -1,17 +1,14 @@
 ---
 title: "Bar Charts: Makeover in Vega-Lite"
 date:  2025-07-07
-draft: false
+image: https://static.olehomelchenko.com/blog/tableau-seven-bar-charts-yoy-growth.png
 
-load_vega: true
 tags:
   - dataviz
   - vega-lite
   - makeover
 ---
 
-## oeuth
-
 Of all tools for data visualization, I mostly enjoy working with Vega-Lite. As I enhance my skills in making the visualizations using it, I become increasingly interesting not just in the "dataviz" part of its capabilities, but also on making it aesthetically compelling, as well as challenging myself to reach the limits of what is possible with Vega-Lite. I am by no means near the limits so far, however I got increasingly interested in replicating the charts I see throughout the internet.
 
 One that caught me attention is Tableau's Viz of the Day: [Seven Bar Charts to Visualise Year-Over-Year Growth](https://public.tableau.com/app/profile/jacob.rothemund/viz/SevenBarChartstoVisualiseYear-Over-YearGrowth/Dashboard)
@@ -75,7 +72,7 @@ After this, we can make the following layers:
 - `text` mark with calculated `text_label`
 - two separate `point` mark layers, each with a different color but more importantly - `triangle-up` and `triangle-down`. We cannot encode the two marks dynamically (or, rather, we cannot make dynamic fill color which is my goal here) so we'll need to do it separately for positive and negative changes.
 
-{{< vega-lite id="chart-bar-in-bar" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -300,13 +297,13 @@ After this, we can make the following layers:
     }
   ]
 }
-{{< /vega-lite >}}
+```
 
 
 ## Highlighted Absolute Change
 
 This one largely repeats the bar-in-bar, with the exception that the highlighted changes are achieved by combining `x` and `x2` channels combined with `color`
-{{< vega-lite id="chart-highlighted-absolute-change" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -556,13 +553,13 @@ This one largely repeats the bar-in-bar, with the exception that the highlighted
     }
   ]
 }
-{{< /vega-lite >}}
+```
 
 ## Bullet
 
 Key difference in schema here - instead of highlighted bar mark, we use `tick` with exact value for the previous period.
 
-{{< vega-lite id="chart-bullet" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -793,13 +790,13 @@ Key difference in schema here - instead of highlighted bar mark, we use `tick` w
     }
   ]
 }
-{{< /vega-lite >}}
+```
 
 
 ## Direction Arrows
 
 
-{{< vega-lite id="chart-direction-arrows" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -1044,7 +1041,8 @@ Key difference in schema here - instead of highlighted bar mark, we use `tick` w
     }
   ]
 }
-{{< /vega-lite >}}
+```
+
 
 
 ## Error Bars