25:["$","title",null,{"children":"Assignment 2 | Jacksonhaught | Observable"}] 4b:T594,// Cleaned version of the advertisement data ads_clean = { // Set remembers full rows that have already appeared // It lets us remove exact duplicate records const seen = new Set(); return ads_raw .filter((row) => { // Turn whole row into text so it can be compared to prior rows const dedupe_key = JSON.stringify(row); // If we have already seen this identical row, remove it if (seen.has(dedupe_key)) return false; // Otherwise remember this row and keep it seen.add(dedupe_key); return true; }) .map((row) => { // Standardize the brand name const raw_brand = String(row.brand ?? "").trim(); // The source data misspells Hyundai as "Hynudai" const cleaned_brand = raw_brand === "Hynudai" ? "Hyundai" : raw_brand || "Unknown"; // Keep only variables needed for these two charts return { // Convert these fields into numeric values. year: parse_number(row.year), view_count: parse_number(row.view_count), // Use the corrected brand name brand: cleaned_brand, // Keep identifiers for stable dot placement and hover tooltips id: row.id ?? "", youtube_url: row.youtube_url ?? "", title: row.title ?? "" }; }) // Remove any row without a valid whole-number year .filter((row) => Number.isInteger(row.year)); }4c:Te79,// Visualization 1 brand_heatmap = { // Set margins around chart const margin = {top: 80, right: 35, bottom: 75, left: 115}; const height = Math.max(430, 160 + brand_order.length * 28); // Store subtitle so its width can determine minimum chart width const subtitle = "Each tile shows the number of ads from that brand in the corresponding year. The top 10 brands in overall ad presence from 2000-2020 are shown."; // Measure subtitle width before creating SVG const text_canvas = document.createElement("canvas"); const text_context = text_canvas.getContext("2d"); text_context.font = "13px sans-serif"; const subtitle_width = text_context.measureText(subtitle).width; const minimum_chart_width = Math.ceil( margin.left + subtitle_width + margin.right + 20 ); // Use available notebook width or extra width needed for subtitle const chart_width = Math.max(width, minimum_chart_width); // Map ad counts from zero through seven to blue shades const color = d3 .scaleSequential([0, 7], d3.interpolateBlues) .clamp(true); // Place years across chart const x = d3 .scaleBand() .domain(year_levels) .range([margin.left, chart_width - margin.right]) .padding(0.06); // Place brands down chart const y = d3 .scaleBand() .domain(brand_order) .range([margin.top, height - margin.bottom]) .padding(0.06); // Add horizontal scrolling if chart becomes wider than notebook cell const chart = html`

`; const svg = d3.select(chart).select("svg"); // Add chart title svg .select(".title-layer") .append("text") .attr("x", margin.left) .attr("y", 30) .attr("font-size", 20) .attr("font-weight", "bold") .text("Brand Presence by Super Bowl Year"); // Add subtitle svg .select(".title-layer") .append("text") .attr("x", margin.left) .attr("y", 53) .attr("font-size", 13) .attr("fill", "#4B5563") .text(subtitle); // Draw one tile for each year and brand pair svg .select(".cell-layer") .selectAll("rect") .data(brand_by_year) .join("rect") .attr("x", d => x(d.year)) .attr("y", d => y(d.brand)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => color(d.ad_count)) .attr("stroke", "white") .attr("stroke-width", 0.5) .append("title") .text(d => `${d.brand}, ${d.year}: ${d.ad_count} ad${d.ad_count === 1 ? "" : "s"}`); // Center ad counts inside heat map tiles svg .select(".cell-layer") .selectAll("text") .data(brand_by_year) .join("text") .attr("x", d => x(d.year) + x.bandwidth() / 2) .attr("y", d => y(d.brand) + y.bandwidth() / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", 12) .attr("font-weight", "600") .attr("fill", d => d.ad_count >= 4 ? "white" : "#111827") .text(d => d.ad_count); // Draw horizontal year labels svg .select(".x-axis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); // Draw brand labels svg .select(".y-axis") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).tickSize(0)) .call(g => g.select(".domain").remove()); return chart; }4d:T1c22,// Visualization 2 youtube_views_by_year = { const chart_width = width; const height = 600; // Leave space for titles and horizontal year labels const margin = { top: 80, right: 35, bottom: 70, left: 85 }; // Place years across x axis const x = d3 .scaleBand() .domain(year_levels) .range([margin.left, chart_width - margin.right]) .padding(0.25); // Use log scale from one to one billion views const y = d3 .scaleLog() .domain([1, 1_000_000_000]) .range([height - margin.bottom, margin.top]); // Remove ads with fewer than 500 observed YouTube views const filtered_view_data = view_data.filter( d => d.view_count >= 500 ); const removed_count = view_data.length - filtered_view_data.length; // Group remaining observations by year const filtered_views_by_year = d3 .groups(filtered_view_data, d => d.year) .map(([year, values]) => ({year, values})); // Create major and minor log-scale grid values const major_log_ticks = d3 .range(0, 10) .map(power => 10 ** power); const all_log_ticks = y.ticks(100); // Calculate quartiles and whiskers in log space const log_box_stats = filtered_views_by_year.map(({year, values}) => { const sorted_log_views = values .map(d => Math.log10(d.view_count)) .sort(d3.ascending); const q1_log = d3.quantileSorted(sorted_log_views, 0.25); const median_log = d3.quantileSorted(sorted_log_views, 0.5); const q3_log = d3.quantileSorted(sorted_log_views, 0.75); const log_iqr = q3_log - q1_log; const lower_fence_log = q1_log - 1.5 * log_iqr; const upper_fence_log = q3_log + 1.5 * log_iqr; const inlier_log_views = sorted_log_views.filter( value => value >= lower_fence_log && value <= upper_fence_log ); const whisker_low_log = d3.min(inlier_log_views); const whisker_high_log = d3.max(inlier_log_views); return { year, q1: 10 ** q1_log, median: 10 ** median_log, q3: 10 ** q3_log, whisker_low_log, whisker_high_log, whisker_low: 10 ** whisker_low_log, whisker_high: 10 ** whisker_high_log }; }); // Store recalculated boxplot values by year const stats_by_year = new Map( log_box_stats.map(stat => [stat.year, stat]) ); // Keep only remaining observations outside whisker bounds const outliers = filtered_view_data.filter(d => { const stats = stats_by_year.get(d.year); const log_view_count = Math.log10(d.view_count); const tolerance = 1e-12; return ( stats && ( log_view_count < stats.whisker_low_log - tolerance || log_view_count > stats.whisker_high_log + tolerance ) ); }); // Create SVG and layers for chart parts const chart = html` `; const svg = d3.select(chart); // Add chart title svg .select(".title-layer") .append("text") .attr("x", margin.left) .attr("y", 25) .attr("font-size", 20) .attr("font-weight", "bold") .text("Observed YouTube Views for Ads from Each Super Bowl Year"); // Explain filtering and outlier dots svg .select(".title-layer") .append("text") .attr("x", margin.left) .attr("y", 48) .attr("font-size", 13) .attr("fill", "#4B5563") .text('Hover over outliers to see brand and view count. Note: observations with under 500 views have been removed' ); // Draw major and minor horizontal log-scale grid lines const grid = svg .select(".grid-layer") .attr("transform", `translate(${margin.left}, 0)`) .call( d3 .axisLeft(y) .tickValues(all_log_ticks) .tickSize(-(chart_width - margin.left - margin.right)) .tickFormat("") ); grid.select(".domain").remove(); grid .selectAll(".tick line") .attr("stroke", d => major_log_ticks.includes(d) ? "#E5E7EB" : "#F3F4F6" ) .attr("stroke-width", 1); // Select layer for boxplots const boxes = svg.select(".boxplot-layer"); // Draw one log-scale boxplot for each year log_box_stats.forEach(d => { const center = x(d.year) + x.bandwidth() / 2; const box_width = Math.max(6, x.bandwidth() * 0.58); // Draw line between whisker endpoints boxes .append("line") .attr("x1", center) .attr("x2", center) .attr("y1", y(d.whisker_low)) .attr("y2", y(d.whisker_high)) .attr("stroke", "#1D4ED8"); // Draw lower whisker cap boxes .append("line") .attr("x1", center - box_width / 3) .attr("x2", center + box_width / 3) .attr("y1", y(d.whisker_low)) .attr("y2", y(d.whisker_low)) .attr("stroke", "#1D4ED8"); // Draw upper whisker cap boxes .append("line") .attr("x1", center - box_width / 3) .attr("x2", center + box_width / 3) .attr("y1", y(d.whisker_high)) .attr("y2", y(d.whisker_high)) .attr("stroke", "#1D4ED8"); // Draw box from first quartile to third quartile boxes .append("rect") .attr("x", center - box_width / 2) .attr("y", y(d.q3)) .attr("width", box_width) .attr("height", Math.max(1, y(d.q1) - y(d.q3))) .attr("fill", "#BFDBFE") .attr("stroke", "#1D4ED8"); // Draw median line boxes .append("line") .attr("x1", center - box_width / 2) .attr("x2", center + box_width / 2) .attr("y1", y(d.median)) .attr("y2", y(d.median)) .attr("stroke", "#1D4ED8") .attr("stroke-width", 2); }); // Draw remaining outliers as solid blue dots const dots = svg .select(".dots-layer") .selectAll("circle") .data(outliers) .join("circle") .attr("cx", d => x(d.year) + x.bandwidth() / 2) .attr("cy", d => y(d.view_count)) .attr("r", 3) .attr("fill", "#1D4ED8") .attr("stroke", "none"); // Add hover text for each outlier dots .append("title") .text( d => `${d.brand}\n${d.year}\n${d3.format(",.0f")( d.view_count )} observed YouTube views` ); // Draw horizontal year labels svg .select(".x-axis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); // Draw major y-axis labels svg .select(".y-axis") .attr("transform", `translate(${margin.left}, 0)`) .call( d3 .axisLeft(y) .tickValues(major_log_ticks) .tickFormat(d3.format(",")) ); // Add vertical y-axis label svg .select(".axis-label-layer") .append("text") .attr( "transform", `translate(20, ${height / 2}) rotate(-90)` ) .attr("text-anchor", "middle") .attr("font-size", 12) .text("Observed YouTube views (log scale)"); return chart; }4e:[{"id":"149db5db104ec9bc4626f9b38da062e6c3bd59f3b9f54997d9524cdc51ea5b04330b3bb9a1078af5b02eb225d73ef44adc63feee38b97fba96009cb09a360162","href":"https://static.observableusercontent.com/files/149db5db104ec9bc4626f9b38da062e6c3bd59f3b9f54997d9524cdc51ea5b04330b3bb9a1078af5b02eb225d73ef44adc63feee38b97fba96009cb09a360162","name":"youtube.csv","type":"text/csv","lastModified":1791343544000,"size":144884}] 47:{"id":"d5b92ce681ff3679","slug":"assignment-2","title":"Assignment 2","thumbnail":"6a374cc3457760ea600679a495083d8cd9d5cd75dad1c61ac24f80c40ac12572","access_level":"public","create_time":"$D2026-10-14T22:03:51.601Z","update_time":"$D2026-11-04T02:48:06.964Z","view_time":null,"first_public_time":"$D2026-11-04T02:59:51.580Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4d053496ba0138b1","login":"jacksonhaught","name":"Jacksonhaught","avatar_url":"https://avatars-next.observableusercontent.com/0155cfa6bc9ab443b045e5b6d32bf9c7e1ad584a8d59bc4fa6b38293d3d60c4f","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":111,"publish_version":111,"role":null,"authored":false,"authors":[{"type":"individual","id":"64e5c94b7c204751","login":"jacksonhaught","name":"Jacksonhaught","avatar_url":"https://avatars-next.observableusercontent.com/0155cfa6bc9ab443b045e5b6d32bf9c7e1ad584a8d59bc4fa6b38293d3d60c4f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4d053496ba0138b1","login":"jacksonhaught","name":"Jacksonhaught","avatar_url":"https://avatars-next.observableusercontent.com/0155cfa6bc9ab443b045e5b6d32bf9c7e1ad584a8d59bc4fa6b38293d3d60c4f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 2","cells":[{"id":1,"value":"# Assignment 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"

How Has Super Bowl Advertisement Success Changed Over Time?

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// Convert CSV values into numbers.\n// Blank cells and \"NA\" become NaN\nparse_number = (value) => {\n const text = String(value ?? \"\").trim();\n return text === \"\" || text === \"NA\" ? NaN : Number(text);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// Load the CSV attached to the notebook\nads_raw = await FileAttachment(\"youtube.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Put years in chronological order\nyear_levels = Array.from(new Set(ads_clean.map((d) => d.year)))\n .sort(d3.ascending)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Order brands from most ads to fewest ads.\nbrand_order = d3.rollups(\n ads_clean,\n (rows) => rows.length,\n (d) => d.brand\n)\n .sort(\n ([brand_a, count_a], [brand_b, count_b]) =>\n d3.descending(count_a, count_b) ||\n d3.ascending(brand_a, brand_b)\n )\n .map(([brand]) => brand)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Count ads for every year-and-brand combination\nbrand_by_year = {\n // Create nested counts in this format\n // year → brand → number of ads\n const counts = d3.rollup(\n ads_clean,\n (rows) => rows.length,\n (d) => d.year,\n (d) => d.brand\n );\n\n // Create every possible year-and-brand pair\n return year_levels.flatMap((year) =>\n brand_order.map((brand) => ({\n year,\n brand,\n ad_count: counts.get(year)?.get(brand) ?? 0\n }))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"

Brand Presence Heatmap

Observed YouTube Views by Super Bowl Year

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// Logarithmic scales cannot display zero, negative, or missing values\nview_data = ads_clean.filter(\n (d) => Number.isFinite(d.view_count) && d.view_count > 0\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Group usable view-count records by year\nviews_by_year = year_levels\n .map((year) => ({\n year,\n values: view_data.filter((d) => d.year === year)\n }))\n .filter((group) => group.values.length > 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"// Calculate boxplot values\nbox_stats = views_by_year.map(({year, values}) => {\n // Extract and sort the numeric view counts.\n const sorted_views = values\n .map((d) => d.view_count)\n .sort(d3.ascending);\n\n // Calculate the first quartile, median, and third quartile\n const q1 = d3.quantileSorted(sorted_views, 0.25);\n const median = d3.quantileSorted(sorted_views, 0.5);\n const q3 = d3.quantileSorted(sorted_views, 0.75);\n\n // Calculate IQR\n const iqr = q3 - q1;\n\n // Boxplot whiskers using 1.5 times the IQR\n const lower_fence = q1 - 1.5 * iqr;\n const upper_fence = q3 + 1.5 * iqr;\n\n // Keep values that fall inside the whisker limits\n const inlier_views = sorted_views.filter(\n (value) => value >= lower_fence && value <= upper_fence\n );\n\n return {\n year,\n q1,\n median,\n q3,\n\n // The whiskers stop at the lowest and highest inlier values\n whisker_low: d3.min(inlier_views),\n whisker_high: d3.max(inlier_views)\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null