Make examples more engaging with storytelling approach (v0.1.1)

- Rename examples with compelling titles and descriptions:
  * "Car weight vs fuel efficiency" - automotive relationship
  * "Why cylinder count matters" - engine analysis
  * "Focus on efficient cars" - data filtering story
  * "Manual vs automatic transmission" - transmission comparison
  * "Metal bands vs happiness" - surprising correlation
  * "Global warming evidence" - climate data
  * "The startup gold rush" - venture capital analysis
- Add blog reference link to metal bands example
- Use explicit data() loading for all built-in R datasets
- Reset CSV data when switching to examples without datasets
- Fix ExampleSelector to show first example on app start
- Avoid unsafe optional chaining patterns

Examples now tell engaging stories rather than being generic tutorials.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: stared

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webr-ggplot2-demo",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -137,6 +137,11 @@ const handleExampleSelect = async (example: RExample) => {
       console.error('Failed to load CSV for example:', error)
     }
   } else {
+    // Reset CSV data for examples without datasets
+    if (currentCsvData.value) {
+      handleFileRemoved()
+    }
+    
     // Execute code immediately for examples without CSV
     if (example.code.trim()) {
       clearMessages() // Clear console and charts before running

src/components/ExampleSelector.vue

@@ -7,7 +7,8 @@ const emit = defineEmits<{
   exampleSelected: [example: RExample]
 }>()
 
-const selectedExample = ref<string>('getting-started')
+// Initialize with the first example's id
+const selectedExample = ref<string>(examples[0].id)
 
 const currentExample = computed(() => {
   return examples.find((ex) => ex.id === selectedExample.value) || null

src/data/examples.ts

@@ -2,42 +2,51 @@ import type { RExample } from '@/types'
 
 export const examples: RExample[] = [
   {
-    id: 'getting-started',
-    title: 'Getting started',
-    description: 'Simple scatter plot to get you started with ggplot2',
-    code: `# WebR ggplot2 & dplyr Demo
-# Select an example or write your own code
-
-library(ggplot2)
-library(dplyr)
+    id: 'car-weight-mpg',
+    title: 'Car weight vs fuel efficiency',
+    description: 'Heavier cars consume more fuel - classic automotive relationship',
+    code: `library(ggplot2)
 
-# Create your first visualization
+# Load built-in R dataset about car characteristics
+# Contains data on 32 car models from 1973-74
+data(mtcars)
 ggplot(mtcars, aes(x = wt, y = mpg)) +
   geom_point() +
+  labs(title = "Car Weight vs Fuel Efficiency",
+       x = "Weight (1000 lbs)",
+       y = "Miles per Gallon") +
   theme_minimal()`,
   },
   {
-    id: 'basic-plot',
-    title: 'Basic example',
-    description: 'Simple scatter plot with built-in mtcars dataset',
+    id: 'cylinders-matter',
+    title: 'Why cylinder count matters',
+    description: 'Engine cylinders affect both weight and fuel efficiency',
     code: `library(ggplot2)
 
-# Basic scatter plot
-ggplot(mtcars, aes(x = wt, y = mpg)) +
-  geom_point() +
-  labs(title = "Car Weight vs MPG",
+# Load built-in dataset
+# Visualize multiple variables: weight, mpg, and cylinder count
+data(mtcars)
+ggplot(mtcars, aes(x = wt, y = mpg, color = factor(cyl))) +
+  geom_point(size = 3, alpha = 0.7) +
+  geom_smooth(method = "lm", se = FALSE) +
+  scale_color_manual(values = c("4" = "#E31A1C", "6" = "#1F78B4", "8" = "#33A02C")) +
+  labs(title = "Car Weight vs MPG by Cylinder Count",
        x = "Weight (1000 lbs)",
-       y = "Miles per Gallon") +
-  theme_minimal()`,
+       y = "Miles per Gallon",
+       color = "Cylinders") +
+  theme_minimal() +
+  theme(legend.position = "bottom")`,
   },
   {
-    id: 'dplyr-filter',
-    title: 'Data filtering with dplyr',
-    description: 'Filter and summarize data using dplyr',
+    id: 'efficient-cars-only',
+    title: 'Focus on efficient cars',
+    description: 'What makes fuel-efficient cars special?',
     code: `library(dplyr)
 library(ggplot2)
 
-# Filter and summarize data
+# Load built-in dataset
+# Filter cars with good fuel efficiency and summarize by cylinders
+data(mtcars)
 mtcars_summary <- mtcars %>%
   filter(mpg > 20) %>%
   group_by(cyl) %>%
@@ -51,37 +60,21 @@ mtcars_summary <- mtcars %>%
 ggplot(mtcars_summary, aes(x = factor(cyl), y = avg_mpg)) +
   geom_col(fill = "steelblue") +
   geom_text(aes(label = paste("n =", count)), vjust = -0.5) +
-  labs(title = "Average MPG by Cylinder Count (MPG > 20)",
+  labs(title = "Average MPG by Cylinder Count (Efficient Cars Only)",
        x = "Number of Cylinders",
        y = "Average MPG") +
   theme_minimal()`,
   },
   {
-    id: 'scatter-plot',
-    title: 'Enhanced scatter plot',
-    description: 'Scatter plot with color mapping and smooth line',
-    code: `library(ggplot2)
-
-# Enhanced scatter plot with color and smooth line
-ggplot(mtcars, aes(x = wt, y = mpg, color = factor(cyl))) +
-  geom_point(size = 3, alpha = 0.7) +
-  geom_smooth(method = "lm", se = FALSE) +
-  scale_color_manual(values = c("4" = "#E31A1C", "6" = "#1F78B4", "8" = "#33A02C")) +
-  labs(title = "Car Weight vs MPG by Cylinder Count",
-       x = "Weight (1000 lbs)",
-       y = "Miles per Gallon",
-       color = "Cylinders") +
-  theme_minimal() +
-  theme(legend.position = "bottom")`,
-  },
-  {
-    id: 'bar-chart',
-    title: 'Bar chart with dplyr',
-    description: 'Create a bar chart after data manipulation',
+    id: 'manual-vs-automatic',
+    title: 'Manual vs automatic transmission',
+    description: 'Do manual transmissions really save fuel?',
     code: `library(dplyr)
 library(ggplot2)
 
-# Create bar chart with data manipulation
+# Load built-in dataset
+# Create grouped bar chart showing gears vs transmission type
+data(mtcars)
 gear_summary <- mtcars %>%
   group_by(gear, am) %>%
   summarize(count = n(), .groups = 'drop') %>%
@@ -90,30 +83,75 @@ gear_summary <- mtcars %>%
 ggplot(gear_summary, aes(x = factor(gear), y = count, fill = transmission)) +
   geom_col(position = "dodge") +
   scale_fill_manual(values = c("Automatic" = "#FF7F00", "Manual" = "#1F78B4")) +
-  labs(title = "Number of Cars by Gear and Transmission Type",
+  labs(title = "Cars by Gear Count and Transmission Type",
        x = "Number of Gears",
        y = "Count",
        fill = "Transmission") +
   theme_minimal() +
   theme(legend.position = "bottom")`,
   },
   {
-    id: 'startup-analysis',
-    title: 'Startup funding analysis',
-    description: 'Analyze startup funding data by sector and region',
+    id: 'metal-bands-happiness',
+    title: 'Metal bands vs happiness',
+    description: 'Surprising correlation: more metal bands = happier countries',
+    csvUrl: '/metal_bands_happiness.csv',
+    code: `library(ggplot2)
+library(ggrepel)
+
+# Load CSV data - correlation between metal bands and happiness by country
+data <- read.csv("/tmp/metal_bands_happiness.csv", stringsAsFactors = FALSE)
+
+# Create labeled scatter plot with logarithmic scale
+ggplot(data, aes(x = Metal.bands.per.capita, y = Score, label = Country.or.region)) +
+  scale_x_log10() +
+  stat_smooth(method = "lm", linewidth = 0.5, alpha = 0.2) +
+  geom_point(color = "red", size = 0.8) +
+  geom_text_repel(size = 2.5, point.size = 0.5, segment.alpha = 0.5, segment.color = "red") +
+  xlab("Metal bands per 1M people") +
+  ylab("Average happiness score") +
+  labs(title = "Metal Bands per Capita vs Happiness Score",
+       caption = "Read more: https://p.migdal.pl/blog/2023/01/metal-bands-happiness-correlation") +
+  theme_minimal()`,
+  },
+  {
+    id: 'global-warming',
+    title: 'Global warming evidence',
+    description: 'Temperature rise over the past decades',
+    csvUrl: '/global_temperature.csv',
+    code: `library(ggplot2)
+
+# Load global temperature time series data
+data <- read.csv("/tmp/global_temperature.csv", stringsAsFactors = FALSE)
+
+# Create time series visualization with trend line
+ggplot(data, aes(x = year)) +
+  geom_line(aes(y = temperature_celsius), color = "#e74c3c", size = 1.5) +
+  geom_point(aes(y = temperature_celsius), color = "#c0392b", size = 2) +
+  geom_smooth(aes(y = temperature_celsius), method = "loess", se = TRUE, 
+              color = "#e74c3c", alpha = 0.2) +
+  labs(title = "Global Temperature Trend (2000-2020)",
+       x = "Year",
+       y = "Temperature (°C)",
+       caption = "Data: Global temperature measurements") +
+  theme_minimal()`,
+  },
+  {
+    id: 'startup-gold-rush',
+    title: 'The startup gold rush',
+    description: 'Which sectors attract the most venture capital?',
     csvUrl: '/startup_funding.csv',
     code: `library(dplyr)
 library(ggplot2)
 library(scales)
 
-# Load the startup funding data
+# Load startup funding data
 data <- read.csv("/tmp/startup_funding.csv", stringsAsFactors = FALSE)
 
-# Check the data
+# Explore the data structure
 head(data)
 
-# Analyze funding by sector
-data %>%
+# Summarize funding by sector
+sector_summary <- data %>%
   group_by(sector) %>%
   summarise(
     total_funding = sum(funding_amount_usd),
@@ -122,90 +160,47 @@ data %>%
   ) %>%
   arrange(desc(total_funding))
 
-# Create visualization
+print(sector_summary)
+
+# Create horizontal bar chart with formatted currency
 ggplot(data, aes(x = reorder(sector, funding_amount_usd), 
                  y = funding_amount_usd, fill = sector)) +
   geom_col(show.legend = FALSE) +
   coord_flip() +
   scale_y_continuous(labels = label_dollar(scale = 1e-6, suffix = "M")) +
   labs(title = "Startup Funding by Sector",
        x = "Sector",
-       y = "Funding Amount (USD)",
-       caption = "Data: Sample startup funding by sector and valuation") +
+       y = "Funding Amount (USD)") +
   theme_minimal()`,
   },
   {
-    id: 'csv-example',
-    title: 'Work with uploaded CSV',
-    description: 'Generic example for any uploaded CSV file',
+    id: 'custom-csv-template',
+    title: 'Your CSV template',
+    description: 'Starting point for analyzing your own data',
     code: `library(dplyr)
 library(ggplot2)
 
-# After uploading your CSV file, load it like this:
+# TO USE YOUR OWN DATA:
+# 1. Upload your CSV file using the interface above
+# 2. Replace the filename below with your actual filename
 # data <- read.csv("/tmp/your_filename.csv", stringsAsFactors = FALSE)
 
-# For now, using built-in iris dataset as example
+# For demonstration, load iris - built-in dataset with flower measurements
+# iris contains 150 observations of 3 species with 4 measurements each
+data(iris)
 data <- iris
 
 # Explore your data structure
-str(data)
-head(data)
-# summary(data)  # Uncomment for basic statistics
+str(data)      # Show data types and structure
+head(data)     # Show first 6 rows
+summary(data)  # Show statistical summary
 
-# Create a scatter plot
+# Example scatter plot - modify based on your columns
 ggplot(data, aes(x = Sepal.Length, y = Sepal.Width, color = Species)) +
   geom_point(size = 3, alpha = 0.7) +
-  labs(title = "Sepal Dimensions by Species",
-       x = "Sepal Length (cm)",
-       y = "Sepal Width (cm)",
-       color = "Species") +
-  theme_minimal() +
-  theme(legend.position = "bottom")`,
-  },
-  {
-    id: 'metal-bands-happiness',
-    title: 'Metal bands vs happiness',
-    description: 'Correlation between metal bands per capita and happiness score by country',
-    csvUrl: '/metal_bands_happiness.csv',
-    code: `library(ggplot2)
-library(ggrepel)
-
-# Load the data from the uploaded CSV file
-data <- read.csv("/tmp/metal_bands_happiness.csv", stringsAsFactors = FALSE)
-
-# Create the visualization
-ggplot(data, aes(x = Metal.bands.per.capita, y = Score, label = Country.or.region)) +
-  scale_x_log10() +
-  stat_smooth(method = "lm", linewidth = 0.5, alpha = 0.2) +
-  geom_point(color = "red", size = 0.8) +
-  geom_text_repel(size = 2.5, point.size = 0.5, segment.alpha = 0.5, segment.color = "red") +
-  xlab("Metal bands per 1M people") +
-  ylab("Average happiness score") +
-  labs(title = "Metal Bands per Capita vs Happiness Score",
-       caption = "Data sources: Enc. Metallum (2016), after Jakub Marian; World Happiness Report (2022). Chart by Piotr Migdał, p.migdal.pl, CC-BY.") +
+  labs(title = "Your Data Visualization",
+       x = "X Variable",
+       y = "Y Variable") +
   theme_minimal()`,
   },
-  {
-    id: 'global-temperature',
-    title: 'Global temperature trends',
-    description: 'Analyze global temperature and CO2 trends over time',
-    csvUrl: '/global_temperature.csv',
-    code: `library(ggplot2)
-library(dplyr)
-
-# Load the global temperature data
-data <- read.csv("/tmp/global_temperature.csv", stringsAsFactors = FALSE)
-
-# Create temperature trend visualization
-ggplot(data, aes(x = year)) +
-  geom_line(aes(y = temperature_celsius), color = "#e74c3c", size = 1.5) +
-  geom_point(aes(y = temperature_celsius), color = "#c0392b", size = 2) +
-  geom_smooth(aes(y = temperature_celsius), method = "loess", se = TRUE, color = "#e74c3c", alpha = 0.2) +
-  labs(title = "Global Temperature Trend (2000-2020)",
-       x = "Year",
-       y = "Temperature (°C)",
-       caption = "Data: Global temperature measurements") +
-  theme_minimal() +
-  theme(plot.title = element_text(hjust = 0.5, size = 16, face = "bold"))`,
-  },
 ]