DEV Community

Daria Filozop
Daria Filozop

Posted on

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

#codepen #coding #tutorial #data

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

 

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"
      }
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

 

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"
};
Enter fullscreen mode Exit fullscreen mode

 

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

 

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.

Top comments (0)