DEV Community: Daria Filozop

#CodePenChallange: Colorful Way of Data Presentation Using Data Viz Library

Daria Filozop — Fri, 20 Feb 2026 15:01:09 +0000

Just realized it had been a long time since I'd posted any interesting demos. So, I checked this month’s #CodePenChallenge, and that’s where I’ve found my inspiration. I decided to create something bright and vivid, a small experiment where color isn’t just a decoration, but the data itself. Sounds interesting? Then I’m sure you’re gonna like what comes next.

So, I’m happy to present you Colors Cheatsheet, powered by WebDataRocks pivot table library, featuring dynamic styling, custom cell rendering, and a rainbow-glass UI effect.

For better experience I recommend opening it in a new tab.

Step 1: Connecting WebDataRocks 📦

Firstly, include WebDataRocks library:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Then create its container with a heading which we’ll style in the future:

<div class="container">
  <h3>🎨 Colors Cheatsheet 🎨</h3>
  <div id="pivotContainer"></div>
</div>

Step 2: Initializing the Pivot Table 🚀

Now let’s render the pivot:

const pivot = new WebDataRocks({
  container: "#pivotContainer",
  customizeCell: customizeCellFunction,
  width: 800,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      columns: [
        { uniqueName: "colorName" },
        { uniqueName: "family" },
        { uniqueName: "hex" },
        { uniqueName: "rgb" },
        { uniqueName: "hue" },
        { uniqueName: "saturation" },
        { uniqueName: "lightness" }
      ]
    },
    options: {
      grid: {
        type: "flat",
        showGrandTotals: "off"
      }
    }
  }
});

We’re using a flat grid layout here, displaying clean, easy-to-read data.

By including hue, saturation, and lightness alongside HEX and RGB, we’re not just showing how a color looks, but also how it’s structured mathematically. It actually helps to understand colors more deeply, connecting what we see on the screen with the values behind it.

Step 3: Smart Cell Customization 🎯

Now comes the fun part.

Instead of displaying color names just as plain text, we bring them to life by filling each cell with the color it represents.

function customizeCellFunction(cell, data) {
  if (
    data &&
    data.type !== "header" &&
    data.hierarchy &&
    data.hierarchy.uniqueName === "colorName"
  ) {
    const textColor = data.recordId;
    cell.style["color"] = textColor;
    cell.style["background-color"] = data.label;
  }
}

Step 4: Header Coloring 🧩

To improve readability and visual grouping, we color-code headers by category:

const headerColors = {
  colorName: "crimson",
  family: "orange",
  hex: "gold",
  rgb: "limegreen",
  hue: "dodgerblue",
  saturation: "blue",
  lightness: "indigo"
};

Step 5: Designing the Rainbow Glass UI 🌈

For our demo topic, we definitely need appropriate customization, so let’s apply a rainbow background with a glass effect here.

As a first step, create a rainbow gradient on the background:

body {
  background: linear-gradient(
    135deg,
    crimson 0%,
    orange 16.66%,
    gold 33.33%,
    limegreen 50%,
    dodgerblue 66.66%,
    indigo 83.33%,
    mediumpurple 100%
  );
  background-attachment: fixed;
}

Then wrap the pivot in a semi-transparent container to create the glass effect:

.container {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 30px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

Moreover, to add some kind of visual depth, add a glowing animated border:

.container::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    crimson,
    orange,
    gold,
    limegreen,
    dodgerblue,
    blue,
    indigo,
    crimson
  );
  z-index: -1;
  border-radius: 17px;
  animation: sparkle 3s ease-in-out infinite;
}

And as I promised, it’s time for customizing the heading:

h3 {
    text-align: center;
    margin: 0 0 30px 0;
    font-size: 2.5em;
    font-weight: bold;
    background: linear-gradient(
        135deg,
        crimson,
        orange,
        gold,
        limegreen,
        dodgerblue,
        indigo,
        mediumpurple
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
    text-transform: uppercase;
}

Now, happy to announce that our Colors Cheatsheet is ready for use! Check it and let the colors guide you.

As always, I’d love to hear your feedback, any thoughts on improving this project, or ideas for the next ones.

Entering the Upside Down of Pivot Grid: A Stranger Things Data-Viz Tutorial

Daria Filozop — Mon, 15 Dec 2025 12:41:26 +0000

Hi!

No, it’s not another holiday project, but the subject is just as captivating. I’m sure most of you have been binge-watching “Stranger Things” season 5, and I’m not the exception. This mysterious, 1980s-style story inspired me to create a data-viz project in its style. So keep reading, I promise it’s going to be pretty interesting!

Tech Stack ⚙️

No doubt, for a project like this, I should have an appropriate dataset, so I found “Stranger Things Episode Ratings” on Kaggle. It’s intriguing to find out what the most highly rated episode is per season and throughout the whole series, right? For visualizing this entire dataset in a table format, WebDataRocks will assist us. It’s pretty intuitive to use and offers numerous customization options.
So, let’s step into the Upside Down of this dataset 🔦

Step 1: Adding WebDataRocks Library and Styles in HTML 📦

As an initial step, we should load styles and the container of WebDataRocks:

<link id="wdr-theme" href="https://cdn.webdatarocks.com/latest/theme/stripedteal/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Moreover, here I will use the built-in theme “Striped-Teal.” (By the way, WebDataRocks suggests six more themes and allows creating your own)

Step 2: Initializing the Pivot Table 🚀

Now, we need to render the pivot table for future display of data:

var pivot = new WebDataRocks({
  container: "wdr-component",
  width: "100%",
  height: 490,
  report: {
    dataSource: { data: getData() },
    options: {
      grid: { showTotals: "off", showGrandTotals: "off" }
    }
  }
});

For fetching the data, as you see, we call the getData() function, so let’s get it done now:

function getData() {
  return [
    {
      index: {caption: "index", type: "number"},
      Episode_Number: {caption: "Episode Number", type: "number"},
      Title: {caption: "Title", type: "string" },
      Image_url: {caption: "Image_url", type: "string"},
      Year: {caption: "Year", type: "string"},
      Description: {caption: "Description", type: "string"},
      Genre: {caption: "Genre", type: "string"},
      Runtime: {caption: "Runtime", type: "string"},
      Rating: {caption: "Rating", type: "number"}
    }
...
}

However, I guess we don’t need that much information, which is stored in the dataset, so let’s display only the most important one. To achieve it, we need to add the Slice Object to the pivot component:

var pivot = new WebDataRocks({
…
  report: {
    dataSource: { data: getData() },
   slice: {
      rows: [
        {uniqueName: "Episode_Number"},
        {uniqueName: "Year"},
        {uniqueName: "Title"},
        {uniqueName: "Runtime"}
      ],
      columns: [
        {uniqueName: "Measures"}
      ],
      measures: [
        {uniqueName: "Rating" , aggregation: "sum"}
      ],
      expands: {expandAll: true}
    },
…
  }
});

As you can see, I’ve decided to display only the Episode Number, Year, Title, and Runtime. Moreover, for convenience, let’s display the Episode Number in ascending order. That means that it will go from the first episode to the newest one, and here sorting in WebDataRocks will help us make it easy. All we need to do is call the sort and set it to asc.

{uniqueName: "Episode_Number", sort: "asc"},

Step 3: Conditional Formatting 🖌️

Okay, but it would be perfect somehow to highlight the most rated episodes, wouldn’t it? So, let’s do it by using conditional formatting in WebDataRocks!

   conditions: [
      {
        formula: "#value >= 9",
        measure: "Rating",
        format: {
          backgroundColor: "#007A6E",
          color: "#FFFFFF",
          fontFamily: "Arial",
          fontSize: "12px"
        }
      }

By using the code snippet above, we will highlight episodes with a rating of 9 or higher.

Step 4: Styling the Heading 🎨

At first, I wanted so much to recreate the heading in the same style as “Stranger Things” has: font, colors, structure, etc. And I think I achieved it! Let’s take a closer look.

As usual, start with an easy div element in your HTML:

<h2 id="title">Stranger Things Episode Rating</h2>

Now, we center our text and give it a dark cinematic background:

body {
  height: 100%;
  padding: 30px;
  margin: 0;
  display: grid;
  place-items: center;
  background: #100d08;
}

To create something similar to the well-known “Stranger Things” red glowing, we should set these changes:

h2 {
  margin: 0 0 20px 0;
  font-family: "Benguiat Bold", "Times New Roman", serif; // Typical Stranger Things font
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;

 /* neon outlight */
  color: #000;
  text-shadow: 0 0 5px #ff0000;
  -webkit-text-stroke: 2px #ff0000;
  text-stroke: 2px #ff0000;

  position: relative;
  z-index: 500;
}

Step 5: Upside Down World Effect 🔮

And here’s the time for actual magic, and I guess the main feature of this project: Upside Down World’s version of the demo! Being more precise, there will be a button, clicking on which will move the user to those mysterious and scary dimensions.

At the beginning, let’s simply add a button that will be responsible for these transitions.

<button id="toggle-spotlight" title="Turn the light off">⬇️ Go to the Upside Down</button>

Next step is to add our future spotlight effect wrapper:

<div id="wrapper">
  <div class="spotlight off"></div>
  <div id="wdr-component"></div>
</div>

Now time to edit CSS code, here is applied all changed styles:

h2 {
  font-family: "Benguiat Bold", serif;
  font-size: 2.5rem;
  color: #000;
  text-shadow: 0 0 5px #ff0000;
  -webkit-text-stroke: 2px #ff0000;
}
h2.upside-down {
  transform: rotate(180deg);
  text-shadow: 0 0 5px #ff4444;
  -webkit-text-stroke: 2px #ff4444;
}
.spotlight {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at var(--clientX,50%) var(--clientY,50%),
    transparent 6em,
    black 8em
  );
}
.spotlight.off {
  opacity: 0;
}
#toggle-spotlight {
  position: absolute; top: 1rem; left: 1rem;
  background: #880808; color: #fff;
  padding: 8px 14px; border-radius: 8px;
  cursor: pointer;
}

Then, complete the project with a bit of JavaScript that will actually make our styles flip from one world to another:

toggleBtn.addEventListener("click", () => {
  spotlightEnabled = !spotlightEnabled;
  spotlight.classList.toggle("off", !spotlightEnabled);
  title.classList.toggle("upside-down", spotlightEnabled);

  if (spotlightEnabled) {
    themeLink.href = lightBlueTheme;
    toggleBtn.textContent = "🚲 Go back";
    toggleBtn.title = "Light up the grid";
  } else {
    themeLink.href = defaultTheme;
    toggleBtn.textContent = "⬇️ Go to the Upside Down";
    toggleBtn.title = "Turn the light off";
  }
});

Finally, the last adjustments, with this code, we will make our lighter move:

wrapper.addEventListener("mousemove", (e) => {
  const rect = wrapper.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  wrapper.style.setProperty("--clientX", x + "px");
  wrapper.style.setProperty("--clientY", y + "px");
});

Results ✅

And that’s it, you’ve just walked through a full Stranger Things–themed data visualization with a dynamic Upside Down effect, custom styling, conditional formatting, and interactive spotlight movement.

For better experience I recommend opening it in a new tab.

I’d love to hear what you think! Did you enjoy the transition to the Upside Down? Any ideas for improvements?
And tell me, are you also counting down the days to the Season 5 finale on December 31?

Building a Snowy Weather Dashboard with Free Pivot Grid Library

Daria Filozop — Tue, 09 Dec 2025 14:05:52 +0000

Hi!

Have you seen snow this year yet? My city was full of it yesterday, and it actually inspired me to create a new project! Moreover, this week’s #CodePen Challenge is about snow. No intrigue, today I’ll tell you how I developed a visualization of the “London Weather Data” dataset using free web pivot table component (WebDataRocks) and a snow effect. Sounds interesting? Then grab a warm coffee and let’s dive in!

Step 1: Including WebDataRocks Library and HTML Container 🖥️

First, add the necessary CSS and JS files to load WebDataRocks and its Toolbar:

<link href="https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Next, setting up a container for a pivot table in the HTML part with some instructions for future features:

<main>
  <h2>The most snowy days in London</h2>
  <p>Click on a cell to see the snow effect!</p>
  <div id="wdr-component"></div>
</main>

Step 2: Initializing Pivot Table ⚙️

For rendering a pivot table, we need to initialize WebDataRocks. This code snippet can achieve it, including the slice object, where we set what data we want to be displayed on the screen:

var pivot = new WebDataRocks({
    container: "wdr-component",
    width: 700,
    report: {
        dataSource: { data: getData() },
        slice: {
            rows: [{ uniqueName: "date" }],
            columns: [{ uniqueName: "Measures" }],
            measures: [
                { uniqueName: "max_temp", format: "temp" },
                { uniqueName: "min_temp", format: "temp" },
                { uniqueName: "precipitation", format: "precipitation" },
                { uniqueName: "snow_depth", sort: "desc", format: "snow_depth" }
            ]
        },
        options: {
            grid: { showTotals: "off", showGrandTotals: "off" },
            showAggregationLabels: false
        }
    }
});

Step 3: Specifying Format Object 📝

Additionally, within the formats section, you can specify which currency symbol will appear next to the value. To provide users with a better understanding of the data, I added a temperature field in degrees Celsius, precipitation in millimeters, and snow depth in centimeters:

report: {
    formats: [
                { name: "temp", currencySymbol: " °C", textAlign: "right" },
                { name: "precipitation", currencySymbol: " mm", textAlign: "right" },
                { name: "snow_depth", currencySymbol: " cm", textAlign: "right" }
            ]
}

For sure, it’s not the only property that can be set for Format Object, more info about it can be found in its docs.

Step 4: Enable Sorting 🔀

I guess it is a perfect idea to sort all our data in descending order, so at the moment of just opening the demo, we’ll instantly see the snowiest day of London's history. Using sorting in WebDataRocks is quite intuitive, as you only need to specify the field and direction, and the component handles the rest automatically.

var pivot = new WebDataRocks({
…
    report: {


            sorting: {
                column: {
                    type: "desc",
                    tuple: [],
                    measure: "snow_depth"
        }
…
});

Step 5: Styling for Winter Vibe ❄️

Okay, our display of data is ready, but I want to add more winter atmosphere, and here styling will help us. By adjusting colors, backgrounds, and headers, we can create a frosty look that evokes the feeling of cold London mornings, right on the dashboard.

Step 6: Snow Effect ☃️

And here’s the last but not least feature of this demo: snow effect!
To add even more cozy and magical winter atmosphere, let’s make it so that when the user clicks on any pivot table cell, snowflakes will fall. Think, will there be a lot of complex code? No, no, all we need to do is add letItSnow() function, that shows the snowflake container for a couple of seconds:

function letItSnow() {
    console.log(true);
    const snowflakeArea = document.querySelector(".snowflake-area");

    if (snowflakeArea) {
        snowflakeArea.style.display = "block";
        snowflakeArea.style.visibility = "visible";

        setTimeout(() => {
            snowflakeArea.style.display = "none";
        }, 10000);
    }
}

Define this function on cell click in our pivot container:

var pivot = new WebDataRocks({
    container: "wdr-component",
    width: 700,
    cellclick: letItSnow,
…
})

Then, in the HTML file place a separate container with snowflakes, I will use this emoji: ❄️

<div class="snowflake-area">
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
    <div class="snowflake">❄️</div>
</div>

To make it even more snowy, just add more div with class “snowflake”

And the final touch is the CSS code for creating the effect of snowflakes falling out of the top of the screen:

.snowflake-area {
    display: none;
}

.snowflake {
    position: absolute;
    top: -5%;
    font-size: 2rem;
    animation: fall linear infinite;
    opacity: 0.8;
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}

.snowflake:nth-child(1) {
    left: 10%;
    animation-duration: 5s;
}
.snowflake:nth-child(2) {
    left: 20%;
    animation-duration: 3s;
    font-size: 1.5rem;
}
…
.snowflake:nth-child(10) {
    left: 95%;
    animation-duration: 4s;
    font-size: 2.3rem;
}

Results 🎉

And that’s it, our little winter-themed data adventure is complete! Actually, it’s always surprising how even the simplest visuals can turn raw data into a bright and interesting story.

For better experience I recommend opening it in a new tab.

I hope this brief tutorial inspires you to create your own winter visualizations.
If you have ideas for improvements or suggestions for the next project, feel free to leave a comment. I’d love to hear your feedback!

CodePen #Challenge Halloween Time: Building a Pivot Table with Horror Movies using WebDataRocks

Daria Filozop — Thu, 16 Oct 2025 13:43:24 +0000

Hi guys!

I continue to experiment with data visualization, and this time, I didn’t spend a long time thinking about the topic for my project; the #CodePenChallenge helped me with that. They posted this month's challenge, which is called Halloween Time, and I decided that it’s a perfect topic! Who doesn’t love spooky Halloween atmosphere? And in addition to it, it’s an ideal opportunity to practice time formatting in WebDataRocks!

So, no intrigue with a tech stack, because this time I’m going to use WebDataRocks. It’s completely free, lightweight, super easy to set up, and perfect for quickly creating pivot tables right in the browser.

For the dataset, I’ve chosen IMDb Horror: Chilling Movie Dataset. I guess it's perfect for our topic, as it lists the most popular Horror Movies and their durations.

Step 1: Preparing the Data 📊

First, I included all needed fields using the getData() function. Also, defined specific types for each field, for example, the year field was set as a string to avoid unexpected calculations (I think here summing up years doesn’t make much sense).

function getData() {
    return [
        {
            "Movie Title": {
                caption: "Movie Title",
                type: "string"
            },
            "Movie Year": {
                caption: "Movie Year",
                type: "string"
            },
            Runtime: {
                caption: "Runtime",
                type: "time"
            },
            Genre: {
                caption: "Genre",
                type: "string"
            },
            Rating: {
                caption: "Rating",
                type: "number"
            },
            Director: {
                caption: "Director",
                type: "string"
            },
            Votes: {
                caption: "Votes",
                type: "string"
            },
            Gross: {
                caption: "Gross",
                type: "string"
            }
        },

Step 2: Settup 🔧

Then, I created a basic HTML project and added WebDataRocks via CDN:

<link href="https://cdn.webdatarocks.com/latest/theme/dark/webdatarocks.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

This is all you need to get started, no heavy frameworks, just a pivot table ready for customization.

Step 3: Rendering the Pivot Table 💻

The next step is to render it in a pivot table using WebDataRocks. To do this, I added a <div> in my HTML where the pivot table will appear:

<div id="wdr-component"></div>

Then I decided that I want to include not all information from the dataset, so I initialized WebDataRocks and in the slice mentioned, only the needed columns by writing these lines of code:

const pivot = new WebDataRocks({
    container: "#wdr-component",
    width: 700,
    report: {
        dataSource: {
            type: "json",
            data: getData()
        },
        slice: {
            rows: [
                {
                    uniqueName: "Movie Title"
                },
                {
                    uniqueName: "Movie Year",
                    aggregation: "sum"
                },
                {
                    uniqueName: "Runtime",
                    aggregation: "sum",
                    sort: "desc"
                },
                {
                    uniqueName: "Rating",
                    aggregation: "sum"
                }
            ]
        },
…
}

Step 4: Highlighting Top-Rated Movie 🎃

Using WebDataRocks’ conditional formatting, I highlighted all movies with a rating higher than 7 in orange. This makes it easy to spot top horrors instantly.

        conditions: [
            {
                formula: "#value > 7",
                measure: "Rating",
                format: {
                    backgroundColor: "#eb5e28",
                    color: "#FFFFFF",
                    fontFamily: "Arial",
                    fontSize: "12px"
                }
            }
        ]

Step 5: Time Format

Notice that the Runtime column is of type time. In the dataset, it is stored in seconds, but WebDataRocks automatically converts it into a readable HH:MM:SS format. Everyone’s used to this time format, so it’s incredibly convenient when working with durations or comparing movie lengths.

Step 6: Halloween Styling 👻

After all, it’s Halloween, so let’s create an appropriate design for our dashboard:

body {
    position: relative;
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: #232023;
    font-family: "Nunito", sans-serif;
}

h2 {
    color: #403d39;
    margin: 0 0 15px 0;
    text-align: center;
}

span {
    color: #eb5e28;
}

section {
    background-color: #ccc5b9;
    padding: 20px;
    border-radius: 10px;
}

You can experiment even more with that, change fonts, play with colors, or add a spooky effect.

Results 💡

And here it is! My fully-Halloween customized pivot table with top horror movies is ready:

For better experience I recommend opening it in a new tab.

Now it’s 100% easier for me to choose what to watch this weekend. If you’re trying to do something similar with WebDataRocks, feel free to ask any questions in the comments, and I will be happy to help.

You can also suggest the next topic for my pivot table experiment. I’d like to hear what you think!

Svelte + Flexmonster Pivot: Building an Interactive Dashboard of World Happiness

Daria Filozop — Tue, 12 Aug 2025 09:17:52 +0000

Hi guys!

Recently, I was thinking about what new project I could create and ended up scrolling through Kaggle in search of a new interesting dataset. And actually, I found it! When I saw its caption, I understood—that’s it. Okay, I’m not gonna keep long intrigues. It’s the World Happiness Report—2024. I think it’s quite interesting data to explore because I’ve always been curious about which country people are the happiest in and which position in this rating is my own country.

As for the tech stack, I used Svelte. It’s a pretty new framework that is actively developing and gaining popularity nowadays. I did some brief research and found that it compiles your code at build time, making it much faster. Also, the community admires its readability, because it has a familiar structure based on HTML, CSS, and JavaScript. Since Svelte is similar to React, which I had experience using before, I thought it would be a good idea to try it out. As well, I was curious to see whether it’s really that good or just hype from the community. By the way, what do you think about Svelte rapidly gaining popularity? Have you tried it already? Would really appreciate your thoughts on it.

For data visualization, I’ve chosen Flexmonster. It’s a pivot grid library that helps conveniently organize and display your data. Moreover, Flexmonster recently announced its integration with Svelte, making it easier to start.

As a result, I want to get an interactive report based on Svelte and the World Happiness Report 2024 data.

To achieve it, I took the next steps.

Step 1: Setting up the project 🔧

Firstly, you need to create a Svelte project. I was doing it using the command line:

npx sv create fm-svelte-app
cd fm-svelte-app

Then get Flexmonster for your project:

npm install svelte-flexmonster --save-exact

Note. Don’t forget to import Flexmonster styles:

import "flexmonster/flexmonster.css";

And now, after these two easy steps, we can start coding!

Step 2: Building the Pivot Table 🔢

Next step is to add the <Flexmonster> component to App.svelte file for rendering the pivot table:

<Flexmonster
  toolbar={true}
  report={{
    dataSource: {
      type: "csv",
      filename: "/World-happiness-report-2024.csv"
    },
    ...
  }}
/>

Here, you can see I enabled the Toolbar. You can also set its value to false if it’s more convenient for you to work without it.

Step 3: Setting fields to display 📝

I think this is quite an essential step in the whole project, because now it’s the time to decide which fields to use and how to display them. In my project, I grouped countries by regions and presented them this way:

rows: [
  { uniqueName: "Regional indicator" },
  { uniqueName: "Country name", sorting: "CountrySorting" }
]

For measures, I wanted to display all the main info from the dataset, so I’ve chosen these parameters: Ladder score, Log GDP per capita, Social support, Healthy life expectancy:

measures: [
  { uniqueName: "Ladder score", aggregation: "average" },
  { uniqueName: "Log GDP per capita", aggregation: "average" },
  { uniqueName: "Social support", aggregation: "average" },
  { uniqueName: "Healthy life expectancy", aggregation: "average" }
]

Why not only the Ladder score? It shows how happy people are (they rate their life wellbeing from 0 to 10), but it doesn’t explain why they feel that way. I thought it would be better to analyze which factors impact the level of happiness, so I’ve chosen three more (Log GDP per capita, Social support, and Healthy life expectancy).

Log GDP per capita measures the average income of people in a country,
Social support shows whether people have relatives or friends to count on in difficult times.
Healthy life expectancy displays the average number of years a newborn can live in good health, without major illness or disability.

Step 4: Numbers Formatting 📐

Here, I’ve noticed that some numbers in the dataset are five or more digits, which makes the data difficult to read and analyze. So, I formatted all numeric values to show exactly three digits after the decimal point:

formats: [
  {
    name: "",
    decimalPlaces: 3
  }
]

By the way, Flexmonster has many number formatting options; you can read more about them on this documentation page.

Step 5: Sorting by Ladder Score 📈

Also, I wanted to structure the whole data more, so I sorted all rows in descending order by Ladder Score. You can easily achieve it by writing this code:

sorting: {
    column: {
        type: "desc",
        tuple: [],
        measure: {
            uniqueName: "Ladder score",
            aggregation: "average"
        }
    }

}

Step 6: Customizing Ladder Score with Emojis 😃

Now, to make the dashboard look better, I decided to add emojis depending on the ladder score for each country:

function customizeCell(cell: any, data: any) {
    if (data.type !== "value")
        return;

    if (!data.measure || data.measure.uniqueName !== "Ladder score") return;

    const score = data.value;

    let emoji = "";

    if (score >= 7) {
        emoji = "😃";
    } else if (score >= 5) {
        emoji = "😊";
    } else if (score >= 4) {
        emoji = "😐";
    } else {
        emoji = "😢";
    }

    cell.text = cell.text + emoji;

}

And don’t forget about adding the customizeCell function to <Flexmonster> component:

<Flexmonster
  toolbar={true}
  report={{
    dataSource: {
      type: "csv",
      filename: "/World-happiness-report-2024.csv"
    },
    ...
  }}
  customizeCell={customizeCell}
/>

Step 7: Adding Charts 📊

Now it’s time for charts! Using them, I displayed information about the Ladder score in every country. Also, I decided to add to the filter values the top 10 happiest countries (You can do the same with the least happy countries, just by changing desc to asc):

slice: {
  rows: [{
    uniqueName: "Country name",
    sort: "desc",
    filter: {
      query: {
        top: 10,
        measure: "Ladder score"
      }
    }
  }],
  columns: [{ uniqueName: "[Measures]" }],
  measures: [
    { uniqueName: "Ladder score", aggregation: "average", format: "averageNumber" }
  ]
}

As I’m using Flexmonster built-in charts, there’s no need to integrate other libraries; adding these lines is enough:

options: {
  viewType: "charts",
  chart: {
    type: "bar",
    showDataLabels: true
  }
}

But if you prefer other charts, Flexmonster integrates with Highcharts, amCharts, Google Charts, and so on. You can learn more about integration options with other charting libraries in the docs.

Step 8: Customization and Styling 🎨

And here’s, honestly, my favourite part of every project — styling!

First things first, import into your App.svelte file your main css file, where you plan to set all customization settings:

import "./styles.css";

I decided to do this project quite simple, but modern at the same time.I added borders to the grid, added some spacing, and chose a light gradient background to match the mood of the project. Nothing really complex and easy to do.

My results 🏆

This project was a great way for me to explore Svelte and its integration with Flexmonster. It was also quite enjoyable working with this dataset, learning which countries are the happiest in the world and analyzing how they may achieve this.

If you want to look closer at my project, I’ve shared it on my GitHub. Also, in the README, you can find a GIF showing the result.

Hope this article inspired you to experiment more with new tools and data visualization libraries.

I would also appreciate your thoughts and feedback. Feel free to ask any questions in the comments!

CodePen #Challenge: Visualizing McDonald’s Menu with Free Pivot Grid Library 👩🏼‍💻📊🍔

Daria Filozop — Fri, 20 Jun 2025 10:07:40 +0000

Hi guys!

I am a Software Engineering student and a beginner developer. I decided to create this blog to share my journey of learning and developing my professional skills. Now, I usually spend a lot of time doing my uni projects, but sometimes I just want to take a break from all that and try something a bit more fun and unusual. And recently, I discovered #CodePenChallenges. I think it's a great opportunity to develop your professional skills and experiment with new technologies.

Every week, CodePen posts a topic - and the rest is up to your imagination. You can create an animation, webpage, mini game, or literally anything. So, this month I decided to give it a try.

I’ve chosen a recent challenge with a Food topic. Lately, I’ve been exploring different types of data visualization, so I tried to find an interesting dataset. After a bit of searching, I found the McDonald's Menu - Comparative Nutrition Values dataset. McDonald's is pretty much everywhere, and hey, who doesn't love their burgers? I thought it'd be fun to turn their menu data into an insightful visual report.

As a main tool, I’ve chosen WebDataRocks - a free pivot grid library, because it’s easy to use, free, and perfect for quickly creating interactive pivot tables with prebuilt functional and different customization options.

So in this article, I'll walk you through my workflow for this Codepen Challenge and show you how to create a pivot table. Sounds intriguing? Let’s take a look!

Step 1: JS code ⚙️

So first, I loaded the entire McDonald’s menu dataset, and only then did I realize how easy it is to get lost there (never expected McDonald’s to have that many meals). That’s why I decided to simplify things from the start and display only selected categories in the JavaScript pivot grid.

For example, in code, I limited the categories like this:

            {
                uniqueName: "Category",
                filter: {
                    members: [
                        "Category.Breakfast",
                        "Category.Beef & Pork",
                        "Category.Chicken & Fish"
                    ]
                }
            },

By doing this, I filtered the dataset before it was even loaded into the pivot table. So, instead of a long list of every McDonald’s item from the dataset, users immediately see only the needed and prechosen information.

For more details about filtering in WebDataRocks, you can check the documentation.

Also, by default, WebDataRocks uses a compact layout form, but I am more used to Excel, so I chose the classic layout, which shows sub-levels of hierarchies, one by one, in separate columns.

Step 2: CSS code 🎨

For better styling of my JavaScript pivot table example, I import the “Quicksand” font and customize the background with burger emojis. To achieve this, you first need to import the chosen font:

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

And then specify it in the code:

body {
    font-family: "Quicksand", serif;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='0' y='24' font-size='24'>🍔</text></svg>");
    height: 100vh;
    margin: 20px;
    background: #ffd700;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-repeat: repeat;
    background-size: 64px 64px;
}

Also, WebDataRocks has built-in themes, which are ready-to-use CSS files, so I decided to use the orange one. You can do it easily by adding to your HTML code:

<link href="https://cdn.webdatarocks.com/latest/theme/orange/webdatarocks.css" rel="stylesheet" />

My result of the challenge: ✅

This Codepen Challenge was such a fun and interesting experience for me. Now you can easily check the energy and nutrient content of your favorite burger. My demo is ready for you to try out!

For better experience I recommend opening it in a new tab.

I would really appreciate your feedback and any thoughts.

Also, if you have any questions about how to add a JS pivot table to your web application, feel free to ask me in the comments or send a DM. I’ll be happy to help!