Skip to content

Instantly share code, notes, and snippets.

@aaronlevin

aaronlevin/analysis.html

Created May 30, 2025 23:42
Show Gist options
  • Save aaronlevin/259b2d44a5ff920bd783963707b5d8f2 to your computer and use it in GitHub Desktop.
Save aaronlevin/259b2d44a5ff920bd783963707b5d8f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
analysis.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dance Music Price Distribution</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0a0a0a;
color: #fff;
margin: 0;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 2.5em;
margin-bottom: 10px;
background: linear-gradient(45deg, #ff0080, #00ffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glow 3s ease-in-out infinite;
}
.subtitle {
text-align: center;
color: #888;
margin-bottom: 40px;
font-size: 1.1em;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.stat-card {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
border: 1px solid #333;
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,0,128,0.1) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
}
.stat-card:hover {
transform: translateY(-5px);
border-color: #ff0080;
box-shadow: 0 10px 30px rgba(255,0,128,0.3);
}
.stat-label {
color: #888;
font-size: 0.9em;
margin-bottom: 5px;
}
.stat-value {
font-size: 2em;
font-weight: bold;
color: #fff;
}
.chart-container {
background: #1a1a1a;
border-radius: 12px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
.price-ranges {
background: #1a1a1a;
border-radius: 12px;
padding: 30px;
overflow-x: auto;
}
.price-table {
width: 100%;
border-collapse: collapse;
}
.price-table th {
background: #2a2a2a;
padding: 12px;
text-align: left;
color: #ff0080;
font-weight: 600;
}
.price-table td {
padding: 10px 12px;
border-bottom: 1px solid #333;
}
.price-table tr:hover {
background: rgba(255,0,128,0.1);
}
.bar-fill {
height: 20px;
background: linear-gradient(90deg, #ff0080 0%, #00ffff 100%);
border-radius: 10px;
transition: width 0.5s ease;
box-shadow: 0 0 10px rgba(255,0,128,0.5);
}
@keyframes glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}
@keyframes pulse {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(180deg); }
}
.insights {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
border: 1px solid #333;
border-radius: 12px;
padding: 30px;
margin-top: 40px;
}
.insights h2 {
color: #ff0080;
margin-bottom: 20px;
}
.insight-item {
margin-bottom: 15px;
padding-left: 20px;
position: relative;
}
.insight-item::before {
content: '▸';
position: absolute;
left: 0;
color: #00ffff;
}
</style>
</head>
<body>
<div class="container">
<h1>Dance Music Catalog Price Analysis</h1>
<p class="subtitle">Distribution of 35,641 Dance Music Titles</p>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Total Items</div>
<div class="stat-value">35,641</div>
</div>
<div class="stat-card">
<div class="stat-label">Average Price</div>
<div class="stat-value">$13.49</div>
</div>
<div class="stat-card">
<div class="stat-label">Median Price</div>
<div class="stat-value">$10</div>
</div>
<div class="stat-card">
<div class="stat-label">Price Range</div>
<div class="stat-value">$0.72 - $755</div>
</div>
</div>
<div class="chart-container">
<canvas id="priceChart"></canvas>
</div>
<div class="price-ranges">
<h2 style="color: #ff0080; margin-bottom: 20px;">Detailed Price Breakdown</h2>
<table class="price-table">
<thead>
<tr>
<th>Price Range</th>
<th>Count</th>
<th>Percentage</th>
<th style="width: 40%;">Distribution</th>
</tr>
</thead>
<tbody id="priceTableBody">
</tbody>
</table>
</div>
<div class="insights">
<h2>Key Insights</h2>
<div class="insight-item">
<strong>61.4%</strong> of the catalog is priced between $5-$10, making this the dominant price range
</div>
<div class="insight-item">
<strong>$7</strong> is the most common price point, representing 35.87% of all items
</div>
<div class="insight-item">
<strong>79%</strong> of items are priced under $15, indicating a budget-friendly catalog
</div>
<div class="insight-item">
Only <strong>2.1%</strong> of titles are priced above $50, showing limited high-end inventory
</div>
<div class="insight-item">
The catalog includes rare collectibles, with 10 items priced over $200
</div>
</div>
</div>
<script>
const distributionData = [
{ label: '$0-$5', count: 924, percentage: 2.6 },
{ label: '$5-$10', count: 21878, percentage: 61.4 },
{ label: '$10-$15', count: 6288, percentage: 17.6 },
{ label: '$15-$20', count: 2389, percentage: 6.7 },
{ label: '$20-$25', count: 1141, percentage: 3.2 },
{ label: '$25-$30', count: 886, percentage: 2.5 },
{ label: '$30-$40', count: 972, percentage: 2.7 },
{ label: '$40-$50', count: 475, percentage: 1.3 },
{ label: '$50-$75', count: 405, percentage: 1.1 },
{ label: '$75-$100', count: 190, percentage: 0.5 },
{ label: '$100-$150', count: 70, percentage: 0.2 },
{ label: '$150-$200', count: 13, percentage: 0.0 },
{ label: '$200+', count: 10, percentage: 0.0 }
];
// Create bar chart
const ctx = document.getElementById('priceChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: distributionData.map(d => d.label),
datasets: [{
label: 'Number of Items',
data: distributionData.map(d => d.count),
backgroundColor: 'rgba(255, 0, 128, 0.8)',
borderColor: 'rgba(255, 0, 128, 1)',
borderWidth: 2,
borderRadius: 8,
hoverBackgroundColor: 'rgba(0, 255, 255, 0.8)',
hoverBorderColor: 'rgba(0, 255, 255, 1)',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
const item = distributionData[context.dataIndex];
return [
`Count: ${item.count.toLocaleString()}`,
`Percentage: ${item.percentage}%`
];
}
},
backgroundColor: 'rgba(0, 0, 0, 0.9)',
titleColor: '#ff0080',
bodyColor: '#fff',
borderColor: '#ff0080',
borderWidth: 1,
padding: 12,
displayColors: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.1)',
drawBorder: false
},
ticks: {
color: '#888',
callback: function(value) {
return value.toLocaleString();
}
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#888',
maxRotation: 45,
minRotation: 45
}
}
}
}
});
// Populate table
const tableBody = document.getElementById('priceTableBody');
distributionData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td style="font-weight: 600;">${item.label}</td>
<td>${item.count.toLocaleString()}</td>
<td>${item.percentage}%</td>
<td>
<div style="background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;">
<div class="bar-fill" style="width: ${item.percentage}%;"></div>
</div>
</td>
`;
tableBody.appendChild(row);
});
// Animate chart height
ctx.canvas.height = 400;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment