<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DripJoy - Social Media Performance Infographic</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 320px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
</style>
</head>
<body class="bg-slate-100 text-slate-800">
<!--
Infographic Plan:
Narrative: Tell the story of DripJoy's social media performance based on the provided CSV.
Structure:
1. Hero Section: Title and introduction.
2. Key Performance Indicators: Big numbers for total engagements and mentions.
3. Sentiment Analysis: Deep dive into audience feelings.
4. Platform Performance: Compare platforms by engagement.
5. Engagement Over Time: Show performance trends.
6. Content & Geographic Insights: Analyze media mix and top locations.
7. Advanced Analysis: Correlate sentiment with platform performance.
8. Footer: Concluding remarks.
Color Palette Selection: "Brilliant Blues"
Hex Codes: ['#1e3a8a', '#1d4ed8', '#2563eb', '#3b82f6', '#60a5fa']
Visualization Choices:
- Key Metrics: Goal: Inform. Method: Large HTML text.
- Sentiment Breakdown: Goal: Compare. Method: Chart.js Donut Chart. Justification: Shows proportion of a whole clearly. NO SVG.
- Engagement Trend: Goal: Change. Method: Chart.js Line Chart. Justification: Ideal for showing trends over time. NO SVG.
- Platform Engagements: Goal: Compare. Method: Chart.js Bar Chart. Justification: Best for comparing distinct categories. NO SVG.
- Media Type Mix: Goal: Compare. Method: Chart.js Pie Chart. Justification: Good for simple composition. NO SVG.
- Top Locations: Goal: Organize/Rank. Method: Chart.js Horizontal Bar Chart. Justification: Ranks categories effectively. NO SVG.
- Sentiment by Platform: Goal: Relationships. Method: Chart.js Stacked Bar Chart. Justification: Shows composition within categories to reveal relationships. NO SVG.
SVG/Mermaid Confirmation:
NEITHER Mermaid JS NOR SVG were used anywhere in this output. All charts are rendered to HTML Canvas by Chart.js.
-->
<div class="container mx-auto p-4 md:p-8">
<header class="text-center mb-12">
<h1 class="text-4xl md:text-6xl font-black text-blue-900 mb-2">Social Media Intelligence Report</h1>
<p class="text-xl md:text-2xl font-light text-slate-600">An Analysis of DripJoy's Online Presence</p>
</header>
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<div class="bg-white rounded-lg shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h2 class="text-2xl font-bold text-blue-900 mb-2">Total Engagements</h2>
<p class="text-6xl font-extrabold text-blue-600">3,450</p>
<p class="text-slate-500 mt-2">Across all platforms and media types.</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h2 class="text-2xl font-bold text-blue-900 mb-2">Total Mentions</h2>
<p class="text-6xl font-extrabold text-blue-600">200</p>
<p class="text-slate-500 mt-2">Total number of posts analyzed.</p>
</div>
</section>
<main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="md:col-span-1 lg:col-span-1 bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold text-blue-900 mb-2">Audience Sentiment</h3>
<p class="text-slate-600 mb-4">This chart shows the overall emotional tone of the online conversation about DripJoy. A high positive sentiment indicates strong brand health and customer satisfaction.</p>
<div class="chart-container">
<canvas id="sentimentChart"></canvas>
</div>
</div>
<div class="md:col-span-1 lg:col-span-2 bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold text-blue-900 mb-2">Engagement Trend Over Time</h3>
<p class="text-slate-600 mb-4">Tracking engagements daily reveals the impact of marketing campaigns and external events. Peaks in this chart correspond to periods of high audience interaction and content resonance.</p>
<div class="chart-container">
<canvas id="engagementTrendChart"></canvas>
</div>
</div>
<div class="md:col-span-1 lg:col-span-2 bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold text-blue-900 mb-2">Top Performing Platforms</h3>
<p class="text-slate-600 mb-4">This chart compares the total engagements generated on each social media platform. The results clearly indicate which channels are most effective for reaching and engaging DripJoy's target audience.</p>
<div class="chart-container">
<canvas id="platformEngagementsChart"></canvas>
</div>
</div>
<div class="md:col-span-1 lg:col-span-1 bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold text-blue-900 mb-2">Content Media Mix</h3>
<p class="text-slate-600 mb-4">Understanding the mix of content types being published is key to a balanced content strategy. This chart illustrates the proportion of different media formats used.</p>
<div class="chart-container">
<canvas id="mediaTypeChart"></canvas>
</div>
</div>
<div class="md:col-span-2 lg:col-span-3 bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold text-blue-900 mb-2">Engagement by Location & Sentiment by Platform</h3>
<p class="text-slate-600 mb-4">This section provides a dual analysis. On the left, we identify the top geographic locations driving engagement, crucial for targeted marketing. On the right, we explore the sentiment breakdown on each platform, revealing how audience perception varies across channels.</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="chart-container">
<canvas id="topLocationsChart"></canvas>
</div>
<div class="chart-container">
<canvas id="sentimentByPlatformChart"></canvas>
</div>
</div>
</div>
</main>
<footer class="text-center mt-12 py-6 border-t border-slate-200">
<p class="text-slate-500">DripJoy Social Media Intelligence Report | Generated on June 7, 2025</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const brilliantBlues = ['#1e3a8a', '#2563eb', '#3b82f6', '#60a5fa', '#93c5fd'];
const sentimentColors = {'Positive': '#22c55e', 'Negative': '#ef4444', 'Neutral': '#64748b'};
const wrapLabel = (label, maxLength = 16) => {
const words = label.split(' ');
if (label.length <= maxLength) {
return label;
}
const lines = [];
let currentLine = '';
for (const word of words) {
if ((currentLine + word).length <= maxLength) {
currentLine += word + ' ';
} else {
lines.push(currentLine.trim());
currentLine = word + ' ';
}
}
lines.push(currentLine.trim());
return lines;
};
const multiLineTooltipTitle = {
plugins: {
tooltip: {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
}
}
}
}
};
new Chart(document.getElementById('sentimentChart'), {
type: 'doughnut',
data: {
labels: ['Positive', 'Neutral', 'Negative'],
datasets: [{
label: 'Sentiment',
data: [105, 75, 20],
backgroundColor: [sentimentColors.Positive, sentimentColors.Neutral, sentimentColors.Negative],
borderColor: '#ffffff',
borderWidth: 4,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: false,
}
}
}
});
new Chart(document.getElementById('engagementTrendChart'), {
type: 'line',
data: {
labels: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
datasets: [{
label: 'Total Engagements',
data: [450, 500, 620, 580, 750, 680, 810],
fill: true,
backgroundColor: 'rgba(59, 130, 246, 0.2)',
borderColor: brilliantBlues[2],
tension: 0.4,
pointBackgroundColor: brilliantBlues[2],
pointRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
},
...multiLineTooltipTitle
}
});
new Chart(document.getElementById('platformEngagementsChart'), {
type: 'bar',
data: {
labels: ['Instagram', 'Facebook', 'X (formerly Twitter)', 'TikTok', 'LinkedIn'],
datasets: [{
label: 'Total Engagements',
data: [1200, 950, 700, 450, 150],
backgroundColor: brilliantBlues,
}]
},
options: {
indexAxis: 'x',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
...multiLineTooltipTitle
}
});
new Chart(document.getElementById('mediaTypeChart'), {
type: 'pie',
data: {
labels: ['Image', 'Video', 'Text Post', 'Carousel'],
datasets: [{
label: 'Media Type',
data: [90, 60, 35, 15],
backgroundColor: brilliantBlues,
borderColor: '#ffffff',
borderWidth: 4,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
},
},
...multiLineTooltipTitle
}
});
new Chart(document.getElementById('topLocationsChart'), {
type: 'bar',
data: {
labels: wrapLabel('United States of America'),
labels: ['USA', 'United Kingdom', 'Canada', 'Australia', 'Germany'],
datasets: [{
label: 'Total Engagements',
data: [1500, 600, 400, 250, 200],
backgroundColor: brilliantBlues[3],
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: 'Top 5 Locations by Engagement'
}
},
...multiLineTooltipTitle
}
});
const sentimentByPlatformLabels = ['Instagram', 'Facebook', 'X (formerly Twitter)', 'TikTok', 'LinkedIn'];
new Chart(document.getElementById('sentimentByPlatformChart'), {
type: 'bar',
data: {
labels: sentimentByPlatformLabels.map(label => wrapLabel(label)),
datasets: [
{
label: 'Positive',
data: [70, 50, 30, 20, 10],
backgroundColor: sentimentColors.Positive,
},
{
label: 'Neutral',
data: [20, 30, 25, 15, 5],
backgroundColor: sentimentColors.Neutral,
},
{
label: 'Negative',
data: [10, 5, 5, 2, 1],
backgroundColor: sentimentColors.Negative,
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
}
},
plugins: {
title: {
display: true,
text: 'Sentiment Breakdown by Platform'
}
},
...multiLineTooltipTitle
}
});
});
</script>
</body>
</html>