Bubble Pop Heatmap - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bubble Pop Heatmap</title> <style> body { font-family: 'Verdana', sans-serif; background-color: #f3f4f6; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #333333; } .heatmap-container { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 5px; padding: 20px; background: #ffffff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; } .heatmap-cell { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; font-size: 20px; color: white; position: relative; overflow: hidden; } .heatmap-cell:hover { transform: scale(1.2); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); } .heatmap-cell:before { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease-in-out; } .heatmap-cell:hover:before { transform: translate(-50%, -50%) scale(1); } .heatmap-cell[data-value="1"] { background-color: #4caf50; } .heatmap-cell[data-value="2"] { background-color: #ffeb3b; } .heatmap-cell[data-value="3"] { background-color: #ff9800; } .heatmap-cell[data-value="4"] { background-color: #f44336; } .heatmap-cell[data-value="5"] { background-color: #9c27b0; } .emoji { font-size: 20px; margin-left: 5px; } </style> </head> <body> <div class="heatmap-container" id="bubble-heatmap"> <!-- Cells will be dynamically created here --> </div> <script> function generateHeatmapData(rows, cols) { const data = []; for (let i = 0; i < rows; i++) { const row = []; for (let j = 0; j < cols; j++) { row.push(Math.floor(Math.random() * 5) + 1); } data.push(row); } return data; } function createHeatmap(data) { const heatmapContainer = document.getElementById('bubble-heatmap'); data.forEach(row => { row.forEach(value => { const cell = document.createElement('div'); cell.className = 'heatmap-cell'; cell.dataset.value = value; cell.innerHTML = value + ' <span class="emoji">💧</span>'; heatmapContainer.appendChild(cell); }); }); } const heatmapData = generateHeatmapData(10, 10); createHeatmap(heatmapData); </script> </body> </html>