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

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!