Skip to content

Commit f070059

Browse files
okbytesokbytes
committed
Add auto-indexed exploration pages
1 parent fdf6bad commit f070059

3 files changed

Lines changed: 640 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
hey
1+
# okbytes.github.io
2+
3+
Static research pages for quick sharing via GitHub Pages.
4+
5+
## Workflow
6+
7+
- Put shareable HTML files in `explorations/`
8+
- Prefer sortable names like `YYYY-MM-DD-topic-name.html`
9+
- Push to `main`
10+
- GitHub Pages rebuilds the site and `index.html` auto-lists the pages

‎explorations/2026-03-07-tequila-nyc.html‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>The Añejo Alternative: NYC Market Analysis</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9+
<style>
10+
.chart-container {
11+
position: relative;
12+
width: 100%;
13+
max-width: 800px;
14+
margin-left: auto;
15+
margin-right: auto;
16+
height: 400px;
17+
}
18+
@media (max-width: 640px) {
19+
.chart-container { height: 300px; }
20+
}
21+
</style>
22+
</head>
23+
<body class="bg-stone-50 text-stone-800 font-sans antialiased">
24+
25+
<!-- Chosen Palette: Warm Agave (stone-50 background, stone-800 text, amber-600/emerald-700 accents) -->
26+
<!-- Application Structure Plan: A linear narrative structured as a brief report. Section 1 addresses the user's specific context (NV Costco vs NYC retail prices for DJ1942). Section 2 introduces superior, traditionally-made alternatives categorized for exploration. Section 3 uses a scatter plot to visually prove the thesis that higher price doesn't equate to higher quality in this specific market segment, empowering the user's purchasing decision. -->
27+
<!-- Visualization & Content Choices:
28+
1. Bar Chart (Chart.js): Compares NV Costco price to NYC average to illustrate the markup reality. Interaction: Tooltips. Justification: Clearly shows the baseline problem.
29+
2. Interactive Cards (HTML/JS): Displays curated alternatives. Interaction: Click to reveal details/tasting notes. Justification: Organizes recommendations cleanly without overwhelming text.
30+
3. Scatter Plot (Chart.js): Maps Price vs. Quality Rating. Interaction: Tooltips on points. Justification: The most effective way to show 'Value' (high rating, lower price) compared to the DJ1942 benchmark.
31+
CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
32+
33+
<div class="max-w-5xl mx-auto px-4 py-12">
34+
35+
<header class="text-center mb-16">
36+
<div class="inline-block bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-semibold tracking-wide mb-4">MARKET ANALYSIS</div>
37+
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-stone-900">The Añejo Alternative</h1>
38+
<p class="text-xl text-stone-600 max-w-2xl mx-auto">Evaluating the $150 Don Julio 1942 benchmark against the NYC market and uncovering superior additive-free alternatives.</p>
39+
</header>
40+
41+
<section class="mb-20 bg-white rounded-2xl shadow-sm p-8 border border-stone-200">
42+
<h2 class="text-2xl font-bold mb-4 text-stone-900 border-b border-stone-100 pb-2">1. The Benchmark Reality: Nevada vs. New York</h2>
43+
<p class="text-stone-600 mb-8 leading-relaxed">
44+
You secured a highly favorable price of ~$150 for Don Julio 1942 at a Costco in Carson City, NV. In the New York City market, duplicating this price point for the same bottle is highly improbable. Due to state liquor taxes, distributor pricing, and general retail markup in NYC, the average retail price for DJ1942 ranges significantly higher. To find a "similar or better price" for the <em>exact same bottle</em> in NYC, you would likely need to rely on rare sales or out-of-state shipping (which incurs its own costs).
45+
</p>
46+
47+
<div class="bg-stone-50 p-6 rounded-xl">
48+
<h3 class="text-lg font-semibold mb-4 text-center">Don Julio 1942 Estimated Retail Pricing</h3>
49+
<div class="chart-container">
50+
<canvas id="priceChart"></canvas>
51+
</div>
52+
</div>
53+
</section>
54+
55+
<section class="mb-20">
56+
<h2 class="text-2xl font-bold mb-4 text-stone-900 border-b border-stone-200 pb-2">2. The Upgrade: Better Añejos for Less</h2>
57+
<p class="text-stone-600 mb-8 leading-relaxed">
58+
The good news is that the $150 price point opens the door to the upper echelon of traditional, additive-free tequilas. Don Julio 1942 is a commercial profile (often utilizing additives for sweetness and vanilla notes). By shifting your focus to heritage brands that use traditional production methods (brick ovens, tahona crushing, copper pot stills), you can find significantly richer, more complex Añejos for half the price you paid in NV.
59+
</p>
60+
<p class="text-sm text-stone-500 mb-6 italic">Select a bottle below to view market details and tasting profiles.</p>
61+
62+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
63+
64+
<div class="flex flex-col gap-3">
65+
<button class="alt-btn w-full text-left p-4 rounded-xl border-2 border-stone-200 hover:border-emerald-600 hover:bg-emerald-50 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white" data-target="tequila-ocho">
66+
<div class="flex justify-between items-center">
67+
<span class="font-bold text-lg">Tequila Ocho Añejo</span>
68+
<span class="text-emerald-700 font-semibold">~$75 - $90</span>
69+
</div>
70+
</button>
71+
<button class="alt-btn w-full text-left p-4 rounded-xl border-2 border-stone-200 hover:border-emerald-600 hover:bg-emerald-50 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white" data-target="el-tesoro">
72+
<div class="flex justify-between items-center">
73+
<span class="font-bold text-lg">El Tesoro Añejo</span>
74+
<span class="text-emerald-700 font-semibold">~$65 - $85</span>
75+
</div>
76+
</button>
77+
<button class="alt-btn w-full text-left p-4 rounded-xl border-2 border-stone-200 hover:border-emerald-600 hover:bg-emerald-50 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white" data-target="artenom">
78+
<div class="flex justify-between items-center">
79+
<span class="font-bold text-lg">ArteNOM Selección 1146</span>
80+
<span class="text-emerald-700 font-semibold">~$90 - $110</span>
81+
</div>
82+
</button>
83+
<button class="alt-btn w-full text-left p-4 rounded-xl border-2 border-stone-200 hover:border-emerald-600 hover:bg-emerald-50 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white" data-target="fortaleza">
84+
<div class="flex justify-between items-center">
85+
<span class="font-bold text-lg">Fortaleza Añejo</span>
86+
<span class="text-emerald-700 font-semibold">~$120+ (Scarce)</span>
87+
</div>
88+
</button>
89+
</div>
90+
91+
<div class="bg-stone-800 text-stone-100 rounded-xl p-6 shadow-lg min-h-[300px] flex flex-col justify-center relative overflow-hidden">
92+
<div class="absolute top-0 right-0 p-4 opacity-10 text-6xl">🥃</div>
93+
94+
<div id="default-panel" class="text-center">
95+
<p class="text-stone-400 text-lg">Select a tequila from the list to view expert analysis and tasting notes.</p>
96+
</div>
97+
98+
<div id="detail-panel" class="hidden h-full flex flex-col">
99+
<div class="mb-auto">
100+
<h3 id="dt-name" class="text-2xl font-bold text-amber-400 mb-1">Name</h3>
101+
<p id="dt-price" class="text-emerald-400 font-mono mb-4 border-b border-stone-600 pb-2 inline-block">Price</p>
102+
<p id="dt-desc" class="text-stone-300 leading-relaxed mb-4">Description</p>
103+
</div>
104+
<div>
105+
<p class="text-sm font-semibold text-stone-400 uppercase tracking-wider mb-2">Primary Notes</p>
106+
<div id="dt-notes" class="flex flex-wrap gap-2">
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
112+
</div>
113+
</section>
114+
115+
<section class="mb-12 bg-white rounded-2xl shadow-sm p-8 border border-stone-200">
116+
<h2 class="text-2xl font-bold mb-4 text-stone-900 border-b border-stone-100 pb-2">3. The Value Matrix: Price vs. Quality</h2>
117+
<p class="text-stone-600 mb-8 leading-relaxed">
118+
This scatter plot illustrates the concept of the "Value Zone." The Y-axis represents an aggregated quality score (based on expert consensus and community ratings for traditional production and complexity), while the X-axis represents average NYC retail price. Don Julio 1942 sits far to the right (high price) but lower on the traditional quality axis compared to the alternatives, which cluster in the high-quality, mid-price quadrant.
119+
</p>
120+
121+
<div class="bg-stone-50 p-6 rounded-xl">
122+
<div class="chart-container">
123+
<canvas id="valueChart"></canvas>
124+
</div>
125+
</div>
126+
</section>
127+
128+
<footer class="text-center border-t border-stone-300 pt-8 mt-12 pb-8">
129+
<h4 class="text-xl font-bold text-stone-800 mb-2">Final Recommendation for NYC</h4>
130+
<p class="text-stone-600 max-w-xl mx-auto">
131+
Do not attempt to chase the $150 price point for DJ1942 in New York; the market dynamics are against you. Instead, take that budget to a reputable NYC liquor store (like Astor Wines or Warehouse Wines) and purchase a bottle of <strong>El Tesoro Añejo</strong> or <strong>Tequila Ocho Añejo</strong>. You will spend half the money and acquire a superior, traditionally crafted spirit.
132+
</p>
133+
</footer>
134+
135+
</div>
136+
137+
<script>
138+
const priceCtx = document.getElementById('priceChart').getContext('2d');
139+
new Chart(priceCtx, {
140+
type: 'bar',
141+
data: {
142+
labels: ['Your NV Purchase', 'NYC Average Retail', 'NYC Premium/Boutique'],
143+
datasets: [{
144+
label: 'Price (USD)',
145+
data: [150, 195, 230],
146+
backgroundColor: [
147+
'rgba(16, 185, 129, 0.8)',
148+
'rgba(245, 158, 11, 0.8)',
149+
'rgba(239, 68, 68, 0.8)'
150+
],
151+
borderWidth: 0,
152+
borderRadius: 4
153+
}]
154+
},
155+
options: {
156+
responsive: true,
157+
maintainAspectRatio: false,
158+
plugins: {
159+
legend: { display: false },
160+
tooltip: {
161+
callbacks: {
162+
label: function(context) {
163+
return '$' + context.parsed.y;
164+
}
165+
}
166+
}
167+
},
168+
scales: {
169+
y: {
170+
beginAtZero: true,
171+
title: { display: true, text: 'Price ($)' },
172+
grid: { color: '#e5e7eb' }
173+
},
174+
x: {
175+
grid: { display: false }
176+
}
177+
}
178+
}
179+
});
180+
181+
const tequilaData = {
182+
'tequila-ocho': {
183+
name: 'Tequila Ocho Añejo',
184+
price: 'NYC Est: $75 - $90',
185+
desc: 'A pioneer in emphasizing "terroir" in tequila. They use agave from single estates for each batch. It is highly regarded for maintaining strong roasted agave flavors even after barrel aging.',
186+
notes: ['Roasted Agave', 'Light Caramel', 'Black Pepper', 'Citrus']
187+
},
188+
'el-tesoro': {
189+
name: 'El Tesoro Añejo',
190+
price: 'NYC Est: $65 - $85',
191+
desc: 'One of the best values in premium tequila. Made traditionally at La Alteña distillery. It spends 2 to 3 years in ex-bourbon barrels, resulting in a rich, balanced, and slightly sweet profile without additives.',
192+
notes: ['Vanilla', 'Oak', 'Cooked Agave', 'Butterscotch']
193+
},
194+
'artenom': {
195+
name: 'ArteNOM Selección 1146',
196+
price: 'NYC Est: $90 - $110',
197+
desc: 'A unique project that highlights specific master distillers. The 1146 is an Añejo (bordering on Extra Añejo) aged primarily in Cabernet Franc casks, giving it an incredible depth, dried fruit notes, and a darker color natively.',
198+
notes: ['Dark Chocolate', 'Dried Cherry', 'Baking Spices', 'Toasted Oak']
199+
},
200+
'fortaleza': {
201+
name: 'Fortaleza Añejo',
202+
price: 'NYC Est: $120+ (If found)',
203+
desc: 'The darling of tequila aficionados. Produced using old-world methods including a stone tahona. It is incredibly balanced and complex. Note: Due to extreme popularity, it is very hard to find at retail price in NYC.',
204+
notes: ['Butter', 'Vanilla', 'Citrus', 'Earthy Agave']
205+
}
206+
};
207+
208+
const buttons = document.querySelectorAll('.alt-btn');
209+
const defaultPanel = document.getElementById('default-panel');
210+
const detailPanel = document.getElementById('detail-panel');
211+
const dtName = document.getElementById('dt-name');
212+
const dtPrice = document.getElementById('dt-price');
213+
const dtDesc = document.getElementById('dt-desc');
214+
const dtNotes = document.getElementById('dt-notes');
215+
216+
buttons.forEach(btn => {
217+
btn.addEventListener('click', () => {
218+
buttons.forEach(b => {
219+
b.classList.remove('border-emerald-500', 'bg-emerald-50');
220+
b.classList.add('border-stone-200', 'bg-white');
221+
});
222+
btn.classList.remove('border-stone-200', 'bg-white');
223+
btn.classList.add('border-emerald-500', 'bg-emerald-50');
224+
225+
const target = btn.getAttribute('data-target');
226+
const data = tequilaData[target];
227+
228+
defaultPanel.classList.add('hidden');
229+
detailPanel.classList.remove('hidden');
230+
231+
dtName.textContent = data.name;
232+
dtPrice.textContent = data.price;
233+
dtDesc.textContent = data.desc;
234+
235+
dtNotes.innerHTML = '';
236+
data.notes.forEach(note => {
237+
const span = document.createElement('span');
238+
span.className = 'bg-stone-700 text-amber-200 px-3 py-1 rounded-full text-xs';
239+
span.textContent = note;
240+
dtNotes.appendChild(span);
241+
});
242+
});
243+
});
244+
245+
const scatterCtx = document.getElementById('valueChart').getContext('2d');
246+
new Chart(scatterCtx, {
247+
type: 'scatter',
248+
data: {
249+
datasets: [
250+
{
251+
label: 'Traditional Additive-Free Alternatives',
252+
data: [
253+
{x: 75, y: 92, label: 'El Tesoro Añejo'},
254+
{x: 85, y: 93, label: 'Tequila Ocho Añejo'},
255+
{x: 100, y: 94, label: 'ArteNOM 1146'},
256+
{x: 130, y: 96, label: 'Fortaleza Añejo'}
257+
],
258+
backgroundColor: 'rgba(16, 185, 129, 0.8)',
259+
pointRadius: 8,
260+
pointHoverRadius: 10
261+
},
262+
{
263+
label: 'The Benchmark (NYC Retail Est.)',
264+
data: [
265+
{x: 195, y: 84, label: 'Don Julio 1942'}
266+
],
267+
backgroundColor: 'rgba(239, 68, 68, 0.8)',
268+
pointRadius: 10,
269+
pointStyle: 'rectRot',
270+
pointHoverRadius: 12
271+
}
272+
]
273+
},
274+
options: {
275+
responsive: true,
276+
maintainAspectRatio: false,
277+
plugins: {
278+
tooltip: {
279+
callbacks: {
280+
label: function(context) {
281+
return context.raw.label + ': $' + context.raw.x + ' | Score: ' + context.raw.y;
282+
}
283+
}
284+
},
285+
legend: {
286+
position: 'bottom'
287+
}
288+
},
289+
scales: {
290+
x: {
291+
title: { display: true, text: 'Estimated NYC Price ($)' },
292+
min: 50,
293+
max: 250,
294+
grid: { color: '#e5e7eb' }
295+
},
296+
y: {
297+
title: { display: true, text: 'Estimated Quality Score (Out of 100)' },
298+
min: 75,
299+
max: 100,
300+
grid: { color: '#e5e7eb' }
301+
}
302+
}
303+
}
304+
});
305+
</script>
306+
</body>
307+
</html>

0 commit comments

Comments
 (0)