Welcome to a behind-the-scenes look at our #CodePenChallenge demo creation! In this tutorial, I'll dissect the code and walk through the process of crafting our bubble text to style our report on the Chocolate Bar Ratings dataset from Kaggle.
What is this challenge all about?
CodePen Challenge is a monthly coding event that brings together developers, designers, and creators to showcase their skills and creativity. Each month, a new theme sparks inspiration for creating innovative mini-projects on CodePen.
This April, the theme is "Bubbles", and the week’s assignment is to create bubble text. So, I invite you to explore playful and bubbly designs.
What data to use?
Our journey begins with data from Kaggle — a Chocolate Bar Ratings dataset. This dataset contains information about chocolate makers, bean origins, review dates, ratings, and more. It's a deliciously diverse dataset that inspired this chocolate report demo.
Tools of the Trade
To bring our chocolate data to life, we'll leverage the power of WebDataRocks — a versatile web pivot table component. WebDataRocks allows us to visualize and interact with data dynamically, making it the perfect tool for exploring our chocolate ratings dataset.
Code Structure
Before we dive into the chocolatey goodness, let's understand how our CodePen demo is structured:
HTML Structure: We start with a simple HTML structure that sets the stage for our crafty adventure. Inside
<div>containers, we have placeholders for our pivot grid and the bubbly text.CSS Styling: The magic begins with CSS styling that transforms our text into bubbly aerated chocolate delights. We don't stop at default settings — we customize fonts, colors, and grid layouts to create a visually appealing and cohesive design.
JavaScript Interaction: To bring our data into play, we use JavaScript to fetch and display the Chocolate Bar Ratings dataset. We leverage WebDataRocks to visualize and interact with the data dynamically.
Process Breakdown: Creating Bubbles from Chocolate Data
HTML Structure
We start with importing the necessary CSS theme and JavaScript libraries for WebDataRocks. The wdr-component div serves as the container for our pivot table component.
<!-- 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 Styling
Our CSS styles are the heart of this demo: they define the look and feel of the whole work. We customize the pivot view, pivot the chocolate title, and create the chocolate bar cells to match the concept.
For our title, we used Rubik Bubbles font and customized it a little to create that aerated chocolate effect.
To make sense of that, not only after diving into the meaning of data we decided to add another twist to the demo. Using .choco and .choco::before selectors, we created a new look for each grid cell that we will further apply with the help of the JS function.
The overall layout uses grid and radial gradients for a visually appealing backdrop.
#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 Logic
The JavaScript section brings our demo and data to life. We initialize WebDataRocks, configure the pivot table with data via the getJSONData() function, customize cell rendering with customizeCellFunction using the previously created choco styles, and set various formatting options for our chocolate bar ratings data to look more understandable and appealing.
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...
];
}
Wrapping Up
Feeling inspired? Dive into our CodePen demo to explore the magic of bubble text and discover the best chocolate flavor ever! Don't be afraid to experiment, tweak the code, and add your unique touch to the project. After all, #CodePenChallenge is all about embracing your creativity and pushing the boundaries of what's possible!
Top comments (0)