Building a Snowy Weather Dashboard with Free Pivot Grid Library

#webdev #coding #codepen #frontend

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!