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

Source: Dev.to

Just realized it had been a long time since I’d posted any interesting demos. I checked this month’s #CodePenChallenge and found my inspiration: a bright, vivid experiment where color isn’t just decoration, but the data itself. Below is the Colors Cheatsheet, powered by the WebDataRocks pivot table library, featuring dynamic styling, custom cell rendering, and a rainbow‑glass UI effect. For the best experience, open the demo in a new tab.

Step 1: Connecting WebDataRocks 📦

Include the WebDataRocks library in your page:

Create a container for the pivot table and a heading that we’ll style later:

  
### 🎨 Colors Cheatsheet 🎨

  

Step 2: Initializing the Pivot Table 🚀

Render the pivot table with a flat grid layout:

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"
      }
    }
  }
});

By including hue, saturation, and lightness alongside HEX and RGB, the table shows not only how a color looks but also its underlying numeric structure.

Step 3: Smart Cell Customization 🎯

Fill each cell with the color it represents instead of plain text:

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;
  }
}

Step 4: Header Coloring 🧩

Apply distinct colors to column headers for better visual grouping:

const headerColors = {
  colorName: "crimson",
  family: "orange",
  hex: "gold",
  rgb: "limegreen",
  hue: "dodgerblue",
  saturation: "blue",
  lightness: "indigo"
};

Step 5: Designing the Rainbow Glass UI 🌈

Rainbow 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;
}

Glass‑effect container

.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;
}

Animated glowing 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;
}

Gradient 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;
}

Now the Colors Cheatsheet is ready for use! Check it out and let the colors guide you. I’d love to hear your feedback, suggestions for improvement, or ideas for future projects.