Transform McDonald’s Dataset into Interactive Web Report. Inspired by #CodepenChallenge
In this article
Learn how to filter a large amount of data before loading, switch between layouts, and apply custom design using JavaScript and CSS. And all of that on a tasty, real-world example everyone knows: the McDonald’s menu.
As you may have already noticed, we love participating in CodePen Challenges! This time, the topic was “food”, so we decided to use a dataset that is familiar to everyone — McDonald’s menu items. You can find McDonald’s almost everywhere, and their burgers? Loved by lots of people. We thought it’d be fun to turn their menu data into an insightful visual report.
In this article, we’ll walk through our workflow for this Codepen Challenge and show you how to create a pivot table. Does that sound intriguing? Let’s take a look!
JavaScript Code Setup:
Since the McDonald’s menu dataset is so huge that it’s easy to get lost there, we decided to make things easier by showing only the categories which we are interested in. Instead of displaying everything after loading, we set up the JavaScript pivot grid to include just specific items right from the start.
For example, in code, we defined chosen categories like this:
{
uniqueName: "Category",
filter: {
members: [
"Category.Breakfast",
"Category.Beef & Pork",
"Category.Chicken & Fish"
]
}
},
In other words, we just filtered our dataset even before it was loaded into the table. Thus, only the information chosen from McDonald’s menu is shown.
Want to know more about filtering in WebDataRocks? We recommend you to look through our documentation.
By the way, are you more used to Excel format? Then our classic layout is for you. It shows data in a more structured, column-based format. You can easily do it with this code:
options: {
grid: {
type: "classic",
showTotals: "off",
showGrandTotals: "off"
}
},
Customization and Styling:
To customize more our JavaScript pivot table example, we import “Quicksand” font. Also we decided to style background with burger emojis to match the McDonald’s theme:
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
And then specify it in the code for the background:
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, you can use WebDataRocks built-in themes, pre-made CSS files. Here we decided to choose the orange one:
<link href="https://cdn.webdatarocks.com/latest/theme/orange/webdatarocks.css" rel="stylesheet" />
Final Result:
As a result, you can now easily check your favorite burger’s energy and nutrient content. This demo is ready for you to try out!
Don’t be afraid to experiment with different fonts, designs, and all features of WebDataRocks. We’d love to see what you come up with, so share your results with the community!
