births_visual = { // States let drillLevel = "season"; let selectedSeason = null; let selectedMonth = null; let selectedYear = "All Years"; // Unique years const allYears = [...new Set(data_enriched.map(d => d.year))].sort(); // Get filtered and aggregated data based on current drill level function getAggregatedData() { let filtered = data_enriched; // Filter by year if year selected if (selectedYear !== "All Years") { filtered = filtered.filter(d => d.year === selectedYear); } if (drillLevel === "month" && selectedSeason) { filtered = filtered.filter(d => d.season === selectedSeason); // If "All Years", group by both year and month for comparison if (selectedYear === "All Years") { return d3.rollups( filtered, v => d3.sum(v, d => d.births), d => d.year, d => d.month_name ).flatMap(([year, months]) => months.map(([month_name, births]) => ({ category: month_name, births, month_name, year })) ); } else { return d3.rollups( filtered, v => d3.sum(v, d => d.births), d => d.month_name ).map(([month_name, births]) => ({ category: month_name, births, month_name })); } } else if (drillLevel === "day" && selectedMonth) { filtered = filtered.filter(d => d.season === selectedSeason && d.month_name === selectedMonth ); return d3.rollups( filtered, v => ({ births: d3.sum(v, d => d.births), isWeekend: v[0].isWeekend, holiday: v[0].holiday, dayName: v[0].dayName }), d => d.date_of_month ).map(([day, data]) => ({ category: day, births: data.births, isWeekend: data.isWeekend, holiday: data.holiday, dayName: data.dayName })).sort((a, b) => a.category - b.category); } else { // If "All Years" if (selectedYear === "All Years") { return d3.rollups( filtered, v => d3.sum(v, d => d.births), d => d.year, d => d.season ).flatMap(([year, seasons]) => seasons.map(([season, births]) => ({ category: season, births, season, year })) ); } else { return d3.rollups( filtered, v => d3.sum(v, d => d.births), d => d.season ).map(([season, births]) => ({ category: season, births, season })); } } } // Calc coefficient of variation to find volatility function calculateVolatility(data) { const mean = d3.mean(data, d => d.births); const variance = d3.mean(data, d => Math.pow(d.births - mean, 2)); const stdDev = Math.sqrt(variance); return (stdDev / mean) * 100; } // Get color for year function getYearColor(year) { // Custom color scale with more distinct colors for time period const yearIndex = allYears.indexOf(year); const totalYears = allYears.length; const progress = yearIndex / (totalYears - 1); const colorStops = [ { stop: 0.00, color: '#440154' }, // Dark purple (1994) { stop: 0.20, color: '#3b528b' }, // Blue (late 90s) { stop: 0.40, color: '#21918c' }, // Cyan (early 2000s) { stop: 0.60, color: '#5ec962' }, // Green (mid 2000s) { stop: 0.80, color: '#fde724' }, // Yellow (late 2000s) { stop: 1.00, color: '#ff6b35' } // Orange (2014) ]; // Interpolate colors let lowerStop = colorStops[0]; let upperStop = colorStops[colorStops.length - 1]; for (let i = 0; i < colorStops.length - 1; i++) { if (progress >= colorStops[i].stop && progress <= colorStops[i + 1].stop) { lowerStop = colorStops[i]; upperStop = colorStops[i + 1]; break; } } const localProgress = (progress - lowerStop.stop) / (upperStop.stop - lowerStop.stop); return d3.interpolate(lowerStop.color, upperStop.color)(localProgress); } function render() { const aggregated_data = getAggregatedData(); const isComparingYears = selectedYear === "All Years" && drillLevel !== "day"; // Calc y-axis domain const yMin = isComparingYears ? d3.min(aggregated_data, d => d.births) * 0.95 : 0; const yMax = isComparingYears ? d3.max(aggregated_data, d => d.births) * 1.05 : d3.max(aggregated_data, d => d.births); // Calc fluctuation/ volatility metrics let earlyYearsFluctuation = null; let recentYearsFluctuation = null; if (isComparingYears) { const earlyData = aggregated_data.filter(d => d.year >= 1994 && d.year <= 2003); const recentData = aggregated_data.filter(d => d.year >= 2005 && d.year <= 2014); earlyYearsFluctuation = calculateVolatility(earlyData); recentYearsFluctuation = calculateVolatility(recentData); } const spec = { $schema: "https://vega.github.io/schema/vega-lite/v5.json", title: { text: drillLevel === "season" ? (selectedYear === "All Years" ? "Births by Season - Click to Explore (All Years)" : `Births by Season - ${selectedYear}`) : drillLevel === "month" ? (selectedYear === "All Years" ? `Births in ${selectedSeason} - Click Month for Daily View (All Years)` : `Births in ${selectedSeason} - ${selectedYear}`) : `Daily Births in ${selectedMonth} ${selectedYear !== "All Years" ? `(${selectedYear})` : ""}`, fontSize: 20, fontWeight: "bold", anchor: "middle", color: selectedYear !== "All Years" && isComparingYears === false ? "#667eea" : "#333" }, data: { values: aggregated_data }, width: 800, height: 450, layer: drillLevel === "day" ? [ // Line for daily view { mark: { type: "line", strokeWidth: 2.5, color: "#e91e63" }, encoding: { x: { field: "category", type: "quantitative", title: "Day of Month", axis: { tickMinStep: 1 } }, y: { field: "births", type: "quantitative", title: "Total Births", axis: { format: "~s" } } } }, // Color oints with weekend/weekday { mark: { type: "circle", size: 100, cursor: "default" }, encoding: { x: { field: "category", type: "quantitative" }, y: { field: "births", type: "quantitative" }, color: { field: "isWeekend", type: "nominal", scale: { domain: [false, true], range: ["#2196f3", "#ff9800"] }, legend: { title: "Day Type", labelExpr: "datum.value ? 'Weekend' : 'Weekday'" } }, strokeWidth: { condition: { test: "datum.holiday != null", value: 3 }, value: 1.5 }, stroke: { condition: { test: "datum.holiday != null", value: "#f44336" }, value: "white" }, tooltip: [ { field: "category", type: "quantitative", title: "Day" }, { field: "dayName", type: "nominal", title: "Day of Week" }, { field: "births", type: "quantitative", title: "Births", format: "," }, { field: "holiday", type: "nominal", title: "Holiday" } ] } }, // Holiday label { transform: [{ filter: "datum.holiday != null" }], mark: { type: "text", dy: -15, fontSize: 10, fontWeight: "bold", color: "#f44336" }, encoding: { x: { field: "category", type: "quantitative" }, y: { field: "births", type: "quantitative" }, text: { field: "holiday", type: "nominal" } } } ] : isComparingYears ? [ // Multiline chart for year by year comparison { mark: { type: "line", strokeWidth: 2.5, point: { size: 80, filled: true }, tooltip: true }, encoding: { x: { field: "category", type: "nominal", title: drillLevel === "season" ? "Season" : "Month", sort: drillLevel === "season" ? ["Winter", "Spring", "Summer", "Fall"] : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], axis: { labelAngle: 0, labelFontSize: 13 } }, y: { field: "births", type: "quantitative", title: "Total Births", scale: { domain: [yMin, yMax] }, axis: { format: "~s", tickCount: 5 } }, color: { field: "year", type: "quantitative", scale: { range: ['#440154', '#3b528b', '#21918c', '#5ec962', '#fde724', '#ff6b35'], domain: [allYears[0], allYears[allYears.length - 1]], interpolate: 'hsl' }, legend: null }, detail: { field: "year" }, tooltip: [ { field: "year", type: "quantitative", title: "Year" }, { field: "category", title: drillLevel === "season" ? "Season" : "Month" }, { field: "births", title: "Births", format: "," } ] } } ] : [ // Bar chart for one year view { mark: { type: "bar", cursor: "pointer", tooltip: true }, encoding: { x: { field: "category", type: "nominal", title: drillLevel === "season" ? "Season" : "Month", sort: drillLevel === "season" ? ["Winter", "Spring", "Summer", "Fall"] : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], axis: { labelAngle: 0, labelFontSize: 13 } }, y: { field: "births", type: "quantitative", title: "Total Births", axis: { format: "~s" } }, color: drillLevel === "season" ? { field: "category", type: "nominal", scale: { domain: ["Winter", "Spring", "Summer", "Fall"], range: ["#6baed6", "#74c476", "#fd8d3c", "#c994c7"] }, legend: null } : { value: "#e91e63" }, opacity: { condition: { param: "select", value: 1 }, value: 0.7 }, tooltip: [ { field: "category", title: drillLevel === "season" ? "Season" : "Month" }, { field: "births", title: "Births", format: "," } ] }, params: [{ name: "select", select: { type: "point", on: "click", clear: "dblclick" } }] } ] }; // Clear container, rebuild container.innerHTML = ''; // Header const header = container.appendChild(html`

Medical Birth Scheduling Trends

Exploring Medical Scheduling in U.S. Birth Patterns (1994-2014)

${selectedYear !== "All Years" ? html`

📅 Viewing Year: ${selectedYear}

` : ''}

`); // Select year const yearSelector = container.appendChild(html`

Compare Years: ${selectedYear === "All Years" ? "Viewing trends across all years" : `Viewing year ${selectedYear}`}

`); // Back Button/ Menu option const navBar = container.appendChild(html`

🏠 Seasons ${selectedSeason ? html` / ${selectedSeason}` : ''} ${selectedMonth ? html` / ${selectedMonth}` : ''} ${selectedYear !== "All Years" ? html`${selectedYear}` : ''}

${drillLevel !== 'season' ? html`` : ''}

`); // Instruction banner with context const instructionText = drillLevel === "season" ? (isComparingYears ? "📊 Trends: Notice how recent years (green/yellow/orange) show steeper peaks at Summer than early years (purple/blue), indicating increasing medical scheduling over time. Click any point to to further examine." : "📊 Click on any season bar to see monthly breakdown") : drillLevel === "month" ? (isComparingYears ? "📈 Medical Scheduling Intensifies: Lines from recent years show more dramatic fluctuations, reflecting greater control over birth timing. Click to see daily trends." : "📈 Click on any month bar to see daily trends and holiday/ weekday/ weekend effects") : "📅 Daily birth patterns: Blue = Weekday | Orange = Weekend | Red border = Holiday"; const instruction = container.appendChild(html`

${instructionText}

`); // Legend container const chartContainer = container.appendChild(html`

`); // Chart container const visDiv = chartContainer.appendChild(html`

`); // Color legend for line chart if (isComparingYears) { // Era Grouping const eras = [ { label: "1994-1999", years: allYears.filter(y => y >= 1994 && y <= 1999), description: "Early Period" }, { label: "2000-2004", years: allYears.filter(y => y >= 2000 && y <= 2004), description: "Mid Period" }, { label: "2005-2009", years: allYears.filter(y => y >= 2005 && y <= 2009), description: "Late Period" }, { label: "2010-2014", years: allYears.filter(y => y >= 2010 && y <= 2014), description: "Recent Period" } ].filter(era => era.years.length > 0); // Only include eras with data const legendDiv = chartContainer.appendChild(html`

Year Color Legend

Earlier → More Recent

${eras.map(era => { const startColor = getYearColor(era.years[0]); const endColor = getYearColor(era.years[era.years.length - 1]); return `

${era.label}

${era.description}

`; }).join('')}

Pattern: Purple/Blue = earlier years; Cyan/Green = mid years; Yellow/Orange = recent years

`); } // Add legend for line charts explanation if (isComparingYears) { const legend = container.appendChild(html`

📈 Understanding the Visualization

Color Groupings: Purple/Blue = Early years (1994-2000s), Cyan/Green = Mid years (2000s), Yellow/Orange = Recent years (2010s)

Line Steepness: More dramatic peaks/valleys indicate stronger medical scheduling influence

${earlyYearsFluctuation && recentYearsFluctuation ? html`

📊 Fluctuation Analysis: Recent years show ${((recentYearsFluctuation - earlyYearsFluctuation) / earlyYearsFluctuation * 100).toFixed(0)}% more variation in birth timing compared to the 1990s, indicating increasingly sophisticated medical scheduling practices.

` : ''}

`); } // Stats const filteredForStats = selectedYear === "All Years" ? data_enriched : data_enriched.filter(d => d.year === selectedYear); const weekdayAvg = drillLevel === "day" ? d3.mean(aggregated_data.filter(d => !d.isWeekend), d => d.births) : d3.mean(filteredForStats.filter(d => d.isWeekday && !d.holiday), d => d.births); const weekendAvg = drillLevel === "day" ? d3.mean(aggregated_data.filter(d => d.isWeekend), d => d.births) : d3.mean(filteredForStats.filter(d => d.isWeekend), d => d.births); const comparisonPct = (weekdayAvg && weekendAvg) ? ((weekdayAvg - weekendAvg) / weekendAvg * 100).toFixed(1) : null; const stats = container.appendChild(html`

WEEKDAY AVG

${weekdayAvg ? weekdayAvg.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "N/A"}

WEEKEND AVG

${weekendAvg ? weekendAvg.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "N/A"}

WEEKDAY EFFECT

${comparisonPct ? `+${comparisonPct}%` : "N/A"}