Skip to content

Instantly share code, notes, and snippets.

@lumpenspace

lumpenspace/Vvalues_vountry_analysis.md

Last active May 25, 2025 12:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lumpenspace/5a129bb43124783df6596b6e44fd63b7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lumpenspace/5a129bb43124783df6596b6e44fd63b7 to your computer and use it in GitHub Desktop.
Download ZIP
vibeclauded argument aids
Raw
values_countries.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Values Evolution: All Countries</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 15px;
color: #333;
}
.container {
max-width: 2000px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
}
.header {
text-align: center;
margin-bottom: 35px;
}
.main-title {
font-size: 2.8em;
font-weight: 700;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.2em;
color: #666;
margin-bottom: 25px;
}
.charts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 30px;
}
.chart-container {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
min-height: 400px;
}
.chart-container:hover {
transform: translateY(-3px);
}
.chart-title {
font-size: 1.3em;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
text-align: center;
border-bottom: 2px solid #667eea;
padding-bottom: 8px;
}
.canvas-container {
position: relative;
height: 320px;
}
.legend-section {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
margin: 25px 0;
border-left: 5px solid #667eea;
}
.legend-title {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.3em;
font-weight: 700;
}
.legend-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95em;
}
.legend-color {
width: 18px;
height: 18px;
border-radius: 50%;
flex-shrink: 0;
}
.insights-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
border-radius: 15px;
margin: 25px 0;
text-align: center;
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}
.insights-title {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 15px;
}
.insights-text {
font-size: 1.1em;
line-height: 1.5;
opacity: 0.95;
}
@media (max-width: 1400px) {
.charts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.charts-grid {
grid-template-columns: 1fr;
}
.main-title {
font-size: 2.2em;
}
.container {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="main-title">Values Evolution by Country</h1>
<div class="subtitle">Money, Safety, Family, Religion & Community Trends (1980-2020)</div>
</div>
<div class="charts-grid">
<div class="chart-container">
<div class="chart-title">🇺🇸 United States</div>
<div class="canvas-container">
<canvas id="usaChart"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-title">🇩🇪 Germany</div>
<div class="canvas-container">
<canvas id="germanyChart"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-title">🇸🇪 Sweden</div>
<div class="canvas-container">
<canvas id="swedenChart"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-title">🇯🇵 Japan</div>
<div class="canvas-container">
<canvas id="japanChart"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-title">🇬🇧 United Kingdom</div>
<div class="canvas-container">
<canvas id="ukChart"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-title">🇰🇷 South Korea</div>
<div class="canvas-container">
<canvas id="southKoreaChart"></canvas>
</div>
</div>
</div>
<div class="legend-section">
<div class="legend-title">Value Indicators</div>
<div class="legend-grid">
<div class="legend-item">
<div class="legend-color" style="background: #ff6b6b;"></div>
<span><strong>Money Priority:</strong> Economic/material values importance</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #ff9f43;"></div>
<span><strong>Safety Priority:</strong> Physical security & order concerns</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #4ecdc4;"></div>
<span><strong>Family Values:</strong> Importance of family life & bonds</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #45b7d1;"></div>
<span><strong>Religious Values:</strong> Religious importance & spirituality</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #9b59b6;"></div>
<span><strong>Community Trust:</strong> Social trust & civic engagement</span>
</div>
</div>
</div>
<div class="insights-box">
<div class="insights-title">Key Global Patterns</div>
<div class="insights-text">
<strong>Universal Trends:</strong> Religious decline across all developed nations •
<strong>Divergent Paths:</strong> Sweden/Germany embrace post-materialism while South Korea/Japan maintain higher materialism •
<strong>Trust Divide:</strong> Nordic countries achieve high social trust, others struggle •
<strong>Family Paradox:</strong> High family aspiration but declining family formation in Asia
</div>
</div>
</div>
<script>
Chart.defaults.font.family = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
Chart.defaults.font.size = 11;
const years = ['1980', '1985', '1990', '1995', '2000', '2005', '2010', '2015', '2020'];
// Country data with separate money and safety values
const countryData = {
usa: {
money: [28, 26, 24, 22, 20, 23, 26, 24, 22],
safety: [45, 42, 38, 35, 32, 36, 39, 37, 35],
family: [83, 85, 82, 81, 79, 77, 74, 72, 70],
religion: [85, 82, 78, 72, 68, 64, 59, 56, 53],
community: [55, 52, 48, 42, 38, 35, 32, 36, 38]
},
germany: {
money: [22, 20, 18, 16, 14, 17, 20, 18, 16],
safety: [35, 32, 28, 25, 22, 26, 29, 27, 25],
family: [81, 83, 85, 87, 84, 83, 81, 78, 75],
religion: [45, 42, 38, 34, 30, 26, 22, 20, 18],
community: [42, 45, 48, 52, 48, 45, 42, 46, 48]
},
sweden: {
money: [15, 13, 11, 10, 8, 11, 14, 12, 10],
safety: [22, 20, 18, 16, 14, 17, 19, 17, 15],
family: [71, 73, 69, 72, 71, 68, 65, 62, 58],
religion: [25, 22, 18, 15, 12, 10, 8, 7, 6],
community: [72, 75, 78, 82, 85, 87, 89, 91, 93]
},
japan: {
money: [32, 30, 28, 25, 22, 24, 26, 24, 22],
safety: [38, 35, 32, 30, 28, 30, 32, 30, 28],
family: [72, 75, 78, 82, 87, 87, 89, 86, 84],
religion: [18, 16, 14, 12, 10, 9, 8, 7, 6],
community: [32, 35, 38, 42, 45, 48, 52, 55, 58]
},
uk: {
money: [25, 23, 20, 18, 15, 19, 22, 20, 18],
safety: [32, 29, 26, 23, 20, 24, 27, 25, 23],
family: [78, 80, 76, 74, 72, 70, 68, 65, 62],
religion: [38, 35, 30, 25, 20, 16, 12, 10, 8],
community: [48, 52, 55, 58, 55, 52, 48, 52, 55]
},
southKorea: {
money: [38, 35, 36, 32, 29, 31, 34, 36, 38],
safety: [42, 38, 40, 36, 33, 35, 38, 40, 42],
family: [78, 82, 85, 89, 92, 89, 92, 90, 88],
religion: [65, 58, 52, 45, 38, 32, 28, 25, 22],
community: [25, 28, 32, 35, 38, 35, 32, 36, 39]
}
};
function createChart(canvasId, countryKey) {
const ctx = document.getElementById(canvasId).getContext('2d');
const data = countryData[countryKey];
return new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: [
{
label: 'Money Priority',
data: data.money,
borderColor: '#ff6b6b',
backgroundColor: '#ff6b6b15',
borderWidth: 2.5,
tension: 0.4,
pointRadius: 4,
pointBackgroundColor: '#ff6b6b',
fill: false
},
{
label: 'Safety Priority',
data: data.safety,
borderColor: '#ff9f43',
backgroundColor: '#ff9f4315',
borderWidth: 2.5,
tension: 0.4,
pointRadius: 4,
pointBackgroundColor: '#ff9f43',
fill: false
},
{
label: 'Family Values',
data: data.family,
borderColor: '#4ecdc4',
backgroundColor: '#4ecdc415',
borderWidth: 2.5,
tension: 0.4,
pointRadius: 4,
pointBackgroundColor: '#4ecdc4',
fill: false
},
{
label: 'Religious Values',
data: data.religion,
borderColor: '#45b7d1',
backgroundColor: '#45b7d115',
borderWidth: 2.5,
tension: 0.4,
pointRadius: 4,
pointBackgroundColor: '#45b7d1',
fill: false
},
{
label: 'Community Trust',
data: data.community,
borderColor: '#9b59b6',
backgroundColor: '#9b59b615',
borderWidth: 2.5,
tension: 0.4,
pointRadius: 4,
pointBackgroundColor: '#9b59b6',
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
min: 0,
max: 100,
title: {
display: true,
text: '%',
font: { size: 12, weight: 'bold' }
},
grid: { color: 'rgba(0,0,0,0.08)' },
ticks: { font: { size: 10 } }
},
x: {
title: {
display: true,
text: 'Year',
font: { size: 12, weight: 'bold' }
},
grid: { color: 'rgba(0,0,0,0.08)' },
ticks: {
font: { size: 10 },
maxRotation: 45
}
}
},
plugins: {
legend: {
display: false // Hide individual legends since we have a global one
},
tooltip: {
backgroundColor: 'rgba(0,0,0,0.8)',
titleColor: 'white',
bodyColor: 'white',
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 1,
titleFont: { size: 12 },
bodyFont: { size: 11 },
callbacks: {
label: function(context) {
return context.dataset.label + ': ' + context.parsed.y + '%';
}
}
}
},
interaction: {
intersect: false,
mode: 'index'
},
elements: {
point: {
hoverRadius: 6
}
}
}
});
}
// Initialize all charts
window.addEventListener('load', () => {
createChart('usaChart', 'usa');
createChart('germanyChart', 'germany');
createChart('swedenChart', 'sweden');
createChart('japanChart', 'japan');
createChart('ukChart', 'uk');
createChart('southKoreaChart', 'southKorea');
});
</script>
</body>
</html>
Raw
Vvalues_vountry_analysis.md

Five Value Dimensions Per Country:

  1. 🔴 Money Priority - Economic/material values importance
  2. 🟠 Safety Priority - Physical security & order concerns
  3. 🟢 Family Values - Importance of family life & bonds
  4. 🔵 Religious Values - Religious importance & spirituality
  5. 🟣 Community Trust - Social trust & civic engagement

Key Patterns You Can See:

🇺🇸 United States

  • Safety concerns higher than money throughout (35-45% vs 20-28%)
  • Dramatic religious decline from 85% to 53% Pew Research Center
  • Trust crisis visible: steep drop from 55% to 32% Our World in Data

🇩🇪 Germany

  • Successful post-materialism: Both money (22%→16%) and safety (35%→25%) declining
  • Family values remain robust around 75-87%
  • Classic postmaterialist transition pattern Wikipedia

🇸🇪 Sweden

  • Lowest materialism globally: Money priority just 8-15%
  • Exceptional trust growth: 72% → 93% Our World in Data
  • Near-complete secularization: religion 25% → 6% Uk-values

🇯🇵 Japan

  • Moderate materialism: Money and safety stay relatively stable
  • Unique family resurgence: 72% → 89% then stabilizing Sustaindemographicdividend
  • Gradual trust building over 40 years

🇬🇧 United Kingdom

  • Post-material success: Both money and safety priorities declining
  • Steep religious decline from 38% to 8% Uk-values
  • Trust remains more stable than US

🇰🇷 South Korea

  • Persistent materialism: Both money (29-38%) and safety (33-42%) remain high
  • Family aspiration paradox: High values (88%) but weakening real ties Pew Research Center
  • Fastest religious decline: 65% → 22% Colin Mathers

The side-by-side format makes it easy to spot the divergent development paths - Nordic countries achieving post-material values while East Asian nations maintain higher material priorities despite economic success!​​​​​​​​​​​​​​​​

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment