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

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:[email protected]&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!