How to Make Bubble Text. Inspired by #CodepenChallange

TutorialWeb development

We love exploring the potential of our tools while participating in CodePen challenges.
In this blog post, we’ll delve into our latest creation for the April “Bubbles” demo: a chocolate themed report styled with bubble text.

A Data Visualization Challenge on CodePen

Every month, CodePen hosts a challenge where people show off their creative skills with mini-projects. Check out our previous challenge that was focused on  How to Use Pivot Tables to Create Web Reports in Different Styles. This April, the theme was “Bubbles,” so we decided to get creative and turn text into chocolate bubbles!

Our journey begins with a delicious dataset from Kaggle: Chocolate Bar Ratings. This dataset dives into the world of chocolate, offering information on makers, bean origins, review dates, ratings, and more — the perfect foundation for our chocolate report demo.

Building the Bubbles: HTML, CSS, and JavaScript

HTML Foundation:

So let’s start with a basic HTML structure that lays the groundwork for our bubbly adventure. We use <div> containers to reserve space for the pivot grid and the bubble text.

<!-- WebDataRocks Striped-Blue Theme -->
<link href="https://cdn.webdatarocks.com/latest/theme/dark/webdatarocks.min.css" rel="stylesheet" />

<!-- WebDataRocks Scripts -->
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<div id="wdr-component"></div>

CSS Magic:

The visual transformation happens through CSS styling. We craft styles that transform our text into delightful, airy chocolate bubbles. But we don’t stop there! We customize fonts, colors, and grid layouts to create a visually stunning and cohesive design.

#wdr-pivot-view {
    background: transparent;
    border: none;
}

.wdr-pivot-title {
    font-size: 60px !important;
    font-family: "Rubik Bubbles", sans-serif !important;
    text-transform: uppercase;
    background-color: transparent;
    color: #6B3A00 !important;
    -webkit-text-stroke: 1px #000 !important;
    text-stroke: 1px #000 !important;
    text-shadow: 1px 1px 5px #000 !important;
}

.choco {
    background-color: rgba(67, 29, 2, 1) !important;
}

.choco::before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 92%;
    height: 83%;
    background: transparent;
    border: outset .25em #6B3A00;
    border-radius: .1em;
}

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: rgb(249, 235, 222);
    background: radial-gradient(
        circle,
        rgba(249, 235, 222, 1) 6%,
        rgba(129, 88, 84, 1) 40%,
        rgba(67, 29, 2, 1) 88%
    );
}

JavaScript Interaction:

JavaScript makes our chocolate data come alive. It brings in the Chocolate Bar Ratings information and lets us see it in a cool, interactive way using WebDataRocks. This makes it easy to explore and pivot the chocolate ratings.

var pivot = new WebDataRocks({
    container: "wdr-component",
    width: 1000,
    customizeCell: customizeCellFunction,
    height: "100%",
    report: {
        dataSource: {
            dataSourceType: "json",
            data: getJSONData()
        },
        formats: [
            {
                name: "rating",
                decimalPlaces: 2
            }
        ],
        slice: {
            rows: [
                {
                    uniqueName: "Company Location"
                }
            ],
            columns: [
                {
                    uniqueName: "Review Date",
                    sort: "desc"
                },
                {
                    uniqueName: "Measures"
                }
            ],
            measures: [
                {
                    uniqueName: "Rating",
                    aggregation: "average",
                    format: "rating"
                }
            ],
            sorting: {
                column: {
                    type: "desc",
                    tuple: [],
                    measure: "Rating"
                }
            }
        ],
        options: {
            configuratorButton: false,
            grid: {
                title: "Chocolate Bar Ratings"
            }
        }
    }
});

function customizeCellFunction(cellBuilder, cellData) {
  if (cellData.type == "value") {
      cellBuilder.addClass("choco");
  }
}

function getJSONData() {
    return [
        {
            "Company Maker": "A. Morin",
            "Specific Bean Origin": "Agua Grande",
            REF: 1876,
            "Review Date": 2016,
            "Cocoa Percent": "63%",
            "Company Location": "France",
            Rating: 3.75,
            "Bean Type": "",
            "Broad Bean Origin": "Sao Tome"
        },
        // Other data entries...
    ];
}

Feeling inspired?

Dive into our CodePen demo and explore the delicious world of chocolate bar ratings. Don’t be afraid to experiment with WebDataRocks!

See the Pen Text Bubbles by WebDataRocks (@webdatarocks) on CodePen.

What else to read?

• How to Use Pivot Table to Create Web Reports in Different Styles. Inspired by #CodepenChallange
• How to make annual report with WebDataRocks
• Tutorial: How to create a dashboard with WebDataRocks and AnyChart
• Responsive Design: Ensuring Accessibility Across Different Websites
• 5 Tips on How to Visualize Data for Insightful Solutions