Merge pull request #63 from deneb-viz/sample-workbook

Sample workbook

Author: dm-p

blog/2025-05-08-sample-workbook-update.mdx

@@ -0,0 +1,90 @@
+---
+title: New AppSource Sample Workbook
+description: The sample workbook that is available with Deneb's AppSource listing has received a huge update, to additionally focus on learning Vega-Lite concepts.
+slug: sample-workbook-update
+authors:
+  - imran
+tags: [samples, getting-started, vega-lite]
+image: /img/blog/2025-05-08-sample-workbook/blog-header-sample-workbook.png
+hide_table_of_contents: false
+---
+
+import { SlideShow } from "../src/components/SlideShow";
+
+We're excited to introduce a brand-new sample workbook designed to help you get started with Deneb and Vega-Lite for Power BI. Inside, you'll find practical learning materials, a selection official Vega datasets, and various chart types to help you dive straight into the world of Deneb and the powerful grammar of graphics behind Vega and Vega-Lite.
+
+{/* truncate */}
+
+:::tip Where to download
+The sample workbook can be downloaded from [Deneb's page in AppSource](https://appsource.microsoft.com/en-us/product/power-bi-visuals/coacervolimited1596856650797.deneb) or from the listing in Power BI Desktop.
+:::
+
+Whether you're just starting out or looking to explore new data visualization possibilities, this workbook was created with you in mind—especially if you're new to Deneb or the Vega languages. We've included a collection of official Vega datasets and a mix of chart examples so you can begin experimenting and building your own custom visuals in Power BI right away.
+
+<SlideShow
+  images={[
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-001.png",
+      alt: "Page 1: Intro",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-002.png",
+      alt: "Page 2: Selected Examples",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-003.png",
+      alt: "Page 3: Getting Started",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-004.png",
+      alt: "Page 4: Dataset",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-005.png",
+      alt: "Page 5: Import Practice Datasets",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-006.png",
+      alt: "Page 6: Multi-Layered Charts",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-007.png",
+      alt: "Page 7: Conditional Formatting",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-008.png",
+      alt: "Page 8: Concat & Facet",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-009.png",
+      alt: "Page 9: Number Formatting",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-010.png",
+      alt: "Page 10: Combining DAX",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-011.png",
+      alt: "Page 11: Patterns",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-012.png",
+      alt: "Page 12: Color Schemes",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-013.png",
+      alt: "Page 13: Color Themes",
+    },
+    {
+      src: "/img/blog/2025-05-08-sample-workbook/page-014.png",
+      alt: "Page 10: Acknowledgements",
+    },
+  ]}
+/>
+<br />
+
+This project was inspired by my own learning journey. Coming into Power BI without a technical or data-specific background, I initially found it challenging to work with new languages like Vega-Lite. I understood the types of visuals I wanted to create, but I didn’t yet have the foundational knowledge to bring those ideas to life. After much studying and hands-on practice, I can now say with confidence that creating visualizations with Vega-Lite in Deneb feels just as natural and intuitive as building native Power BI visuals.
+
+This workbook is a way of giving back to the community that helped me grow and develop my skills. It is not only a celebration of learning and discovery, but also a celebration of all data enthusiasts, and the art of data visualization. The combination of Deneb, Vega/Vega-Lite and Power BI enable us to expand our visualization vocabulary, and to think beyond the pre-built confinements. It opens up an exciting space for data storytelling and exploration, where our only limitation is our imagination.
+
+We hope you find this resource helpful and that you enjoy it as much as we did creating it. Enjoy!

blog/authors.yml

@@ -3,3 +3,8 @@ daniel:
   title: Program Manager & Developer
   url: https://github.com/dm-p
   image_url: https://github.com/dm-p.png
+imran:
+  name: Imran Haq
+  title: Community Contributor
+  url: https://pbi-datavizzle.github.io/
+  image_url: /img/support/community-expert-imran-haq.png

package.json

@@ -29,6 +29,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "^2.10.1",
+    "react-slideshow-image": "^4.3.2",
     "react-vega": "^7.6.0",
     "vega": "^5.33.0",
     "vega-lite": "^5.23.0"

src/components/SlideShow/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Slide } from "react-slideshow-image";
+import "react-slideshow-image/dist/styles.css";
+import styles from "./styles.module.css";
+
+type ImageDefinition = {
+  src: string;
+  alt: string;
+};
+
+export function SlideShow({ images }: { images: ImageDefinition[] }) {
+  return (
+    <Slide>
+      {images.map((image, index) => (
+        <div key={index}>
+          <div
+            className={styles.imageContainer}
+            style={{ backgroundImage: `url(${image.src})` }}
+          />
+        </div>
+      ))}
+    </Slide>
+  );
+}

src/components/SlideShow/styles.module.css

@@ -0,0 +1,16 @@
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 400px;
+}
+
+.imageAlt {
+  padding: 20px;
+  font-size: 20px;
+  background: #efefef;
+  text-align: center;
+}