32:T483,md`# What Sports Fans Are Watching When They're Not Watching Sports - Summer 2020
When live sports starting canceling or postponing back in early March, we here at Simulmedia received urgent questions from advertisers who had been relying on sports to reach their target audiences. Without live sports, they wondered, would these TV viewers simply tune out? The short answer was "no." In fact, the analysis we ran back in May clearly demonstrated that M18-49 who were avid sports viewers watched even more TV after live sports disappeared. Not only that, but they started watching what many might have considered to be unexpected networks and dayparts. Our analysis then reinforced the value of taking a data-driven, audience-based approach to TV planning. A contextual approach almost certainly would not have predicted that M18-49 avid sports viewers would be drawn to Food Network on weekends (which they were). Two months have elapsed since we ran that analysis, so we thought we'd ask again: what are sports fans watching when they can't watch live sports?
`33:T569,chart = { const svg = d3 .create("svg") // .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("background", "white"); svg.append("g").append(() => legend({ color, title: "Impressions Delivered", tickFormat: "s" }) ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", d => `${d.network}-${d.daypart.replace(' ', '')}`) .attr("x", d => x(d.daypart)) .attr("y", d => y(d.network)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => color(d[metric])); svg .append("g") .attr("fill", "#ccc") .selectAll("rect") .data(networkData) .join("rect") .attr("x", width * heatmapWidth) .attr("y", d => y(d.network) + 1) .attr("width", d => xBar(d[metric])) .attr("height", y.bandwidth() - 2); svg .append("g") .attr("fill", "#333") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(networkData) .join("text") .attr("x", d => width * heatmapWidth + xBar(d[metric]) + 4) .attr("y", d => y(d.network) + 5) .attr("dy", "0.35em") .text(d => d3.format(".2s")(d[metric])); return svg.node(); }34:[{"id":"287ffc35567a07f5d0876aca1a30bd5f60261a4a3949dd81d83f1e99bab18965156ca0c5be2bb7cb5c45011d61a0a495548507ebbb67936d733e4418a23a5efc","href":"https://static.observableusercontent.com/files/287ffc35567a07f5d0876aca1a30bd5f60261a4a3949dd81d83f1e99bab18965156ca0c5be2bb7cb5c45011d61a0a495548507ebbb67936d733e4418a23a5efc","name":"sports_viewing (1).csv","type":"text/csv","lastModified":1594991862070.774,"size":5413}] 30:{"title":"What Sports Fans Are Watching When They're Not Watching Sports - Summer 2020","cells":[{"id":296,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"md`**Audience**: M18-49 Avid Sports Viewers\n
\nThe chart immediately below shows how much TV M18-49 sports viewers have been watching. The red line indicates when sports cancellations began. The chart below that indicates changes in viewing on sports networks. \n\nAs you can see, M18-49 avid sports viewers are still watching a lot of TV. We attribute the observable declines in viewing relative to early February to some churn in the audience we've analyzed and to seasonality effects as people take vacations and spend more time outdoors.\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"html`\n

\n ${audienceTrendChart}\n

\n ${sportsChart}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"md`## Sports Viewers in June\n
\nThis chart shows what M18-49 sports fans have been watching in the month of June. It shows the average audience concentration at a network-daypart level across all days in the month. The darker the red, the more impressions served to this audience.\n\nOnce again, some of what they watched in June may not be intuitive, e.g. Food Network, Nick, and CNN. That's why it's still so important to let audience data and not contextual assumptions guide TV planning.\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"audiences = d3.tsv(\n \"https://cors-anywhere.herokuapp.com/https://assets.simulmedia.com/data/leadgen/gain-control/audiences.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"audienceData = d3.csv(\n `https://cors-anywhere.herokuapp.com/https://assets.simulmedia.com/data/leadgen/gain-control/${selAudienceId}.csv`,\n function(d) {\n return {\n date: d3.timeParse(\"%Y-%m-%d\")(d.viewing_date),\n network: d.sm_call_sign,\n audienceId: d.audience_id,\n audienceName: d.audience_name,\n daypart: d.daypart,\n dow: d.dayofweek,\n weekStart: d3.timeParse(\"%Y-%m-%d\")(d.broadcast_week_start),\n weekeEnd: d3.timeParse(\"%Y-%m-%d\")(d.broadcast_week_end),\n timeshift: d.timeshift,\n genre: d.network_genre,\n minutes: +d.viewing_minutes,\n impressions: +d.impression\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"networks = [...new Set(audienceData.map(obj => obj.network))].sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"dayparts = [\n \"Late Night\",\n \"Overnight\",\n \"Early Morning\",\n \"Daytime\",\n \"Fringe\",\n \"Primetime\",\n \"Weekend\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"metric = \"after\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"dateExtent = d3.extent(sportsViewership, d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"selAudience = audiences[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"selAudienceId = selAudience.id","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"beforeData = {\n const groupedData = d3\n .nest()\n .key(d => d.network)\n .key(d => d.daypart)\n .rollup(v => {\n return {\n network: v[0].network,\n daypart: v[0].daypart,\n impressions: d3.mean(v, d => d.impressions),\n minutes: d3.mean(v, d => d.minutes)\n };\n })\n .entries(\n audienceData.filter(\n obj =>\n obj.date >= d3.timeParse(\"%Y-%m-%d\")(\"2020-01-01\") &&\n obj.date < d3.timeParse(\"%Y-%m-%d\")(\"2020-03-12\")\n )\n );\n\n let flattenedData = [];\n\n groupedData.forEach(eachNetwork => {\n eachNetwork.values.forEach(eachDaypart => {\n flattenedData.push(eachDaypart.value);\n });\n });\n\n return flattenedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"afterData = {\n const groupedData = d3\n .nest()\n .key(d => d.network)\n .key(d => d.daypart)\n .rollup(v => {\n return {\n network: v[0].network,\n daypart: v[0].daypart,\n impressions: d3.mean(v, d => d.impressions),\n minutes: d3.mean(v, d => d.minutes)\n };\n })\n .entries(\n audienceData.filter(\n obj =>\n obj.date >= d3.timeParse(\"%Y-%m-%d\")(\"2020-06-01\") &&\n obj.date < d3.timeParse(\"%Y-%m-%d\")(\"2020-07-01\")\n )\n );\n\n let flattenedData = [];\n\n groupedData.forEach(eachNetwork => {\n eachNetwork.values.forEach(eachDaypart => {\n flattenedData.push(eachDaypart.value);\n });\n });\n\n return flattenedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"data = {\n let data = [];\n networks.forEach(eachNetwork => {\n dayparts.forEach(eachDaypart => {\n const before = beforeData.filter(\n obj => obj.network === eachNetwork && obj.daypart === eachDaypart\n )[0];\n const after = afterData.filter(\n obj => obj.network === eachNetwork && obj.daypart === eachDaypart\n )[0];\n\n const beforeImps = before ? before.impressions : null;\n const afterImps = after ? after.impressions : null;\n\n const beforeMins = before ? before.minutes : null;\n const afterMins = after ? after.minutes : null;\n\n if (beforeImps || afterImps) {\n data.push({\n network: eachNetwork,\n daypart: eachDaypart,\n before: beforeImps,\n after: afterImps,\n delta: afterImps - beforeImps\n });\n }\n });\n });\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"beforeNetData = {\n const groupedData = d3\n .nest()\n .key(d => d.network)\n .rollup(v => {\n return {\n network: v[0].network,\n impressions: d3.mean(v, d => d.impressions),\n minutes: d3.mean(v, d => d.minutes)\n };\n })\n .entries(\n audienceData.filter(\n obj =>\n obj.date >= d3.timeParse(\"%Y-%m-%d\")(\"2020-01-01\") &&\n obj.date < d3.timeParse(\"%Y-%m-%d\")(\"2020-03-12\")\n )\n );\n console.log(groupedData);\n let flattenedData = [];\n\n groupedData.forEach(eachNetwork => {\n flattenedData.push(eachNetwork.value);\n });\n\n return flattenedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"afterNetData = {\n const groupedData = d3\n .nest()\n .key(d => d.network)\n .rollup(v => {\n return {\n network: v[0].network,\n impressions: d3.mean(v, d => d.impressions),\n minutes: d3.mean(v, d => d.minutes)\n };\n })\n .entries(\n audienceData.filter(\n obj => obj.date >= d3.timeParse(\"%Y-%m-%d\")(\"2020-03-12\")\n )\n );\n console.log(groupedData);\n let flattenedData = [];\n\n groupedData.forEach(eachNetwork => {\n flattenedData.push(eachNetwork.value);\n });\n\n return flattenedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"networkData = {\n let data = [];\n networks.forEach(eachNetwork => {\n const before = beforeNetData.filter(obj => obj.network === eachNetwork)[0];\n const after = afterNetData.filter(obj => obj.network === eachNetwork)[0];\n\n const beforeImps = before ? before.impressions : null;\n const afterImps = after ? after.impressions : null;\n\n const beforeMins = before ? before.minutes : null;\n const afterMins = after ? after.minutes : null;\n\n if (beforeImps || afterImps) {\n data.push({\n network: eachNetwork,\n before: beforeImps,\n after: afterImps,\n delta: afterImps - beforeImps\n });\n }\n });\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"audienceTrend = {\n const groupedData = d3\n .nest()\n .key(d => d.date)\n .rollup(v => {\n return {\n date: v[0].date,\n value: d3.sum(v, d => d.impressions)\n };\n })\n .entries(audienceData);\n\n let flattenedData = [];\n\n groupedData.forEach(eachDate => {\n flattenedData.push(eachDate.value);\n });\n\n return flattenedData.filter(\n obj =>\n obj.date >= d3.timeParse(\"%Y-%m-%d\")(\"2020-02-01\") &&\n obj.date <= d3.timeParse(\"%Y-%m-%d\")(\"2020-07-10\") //dateExtent[1]\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"sportsViewership = d3\n .csvParse(await FileAttachment(\"sports_viewing (1).csv\").text(), d => ({\n date: d3.timeParse(\"%Y-%m-%d\")(d.start_time),\n value: +d.impressions\n }))\n .filter(obj => obj.date >= d3.timeParse(\"%Y-%m-%d\")(\"2020-02-01\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`### Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"x = d3\n .scaleBand(dayparts, [margin.left, width * heatmapWidth - margin.right])\n .round(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"xBar = d3\n .scaleLinear()\n .domain([0, d3.max(networkData, d => d.before)])\n .range([0, (1 - heatmapWidth) * width - 30])","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"y = d3.scaleBand(networks, [margin.top, height - margin.bottom]).round(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"color = {\n let [min, max] = d3.extent(data, d => d[metric]);\n // return d3.scaleSequential([0, max], d3.interpolateReds);\n if (min < 0) {\n // max = Math.max(-min, max);\n // return d3.scaleDiverging([-max, 0, max], t => d3.interpolateRdBu(t));\n return d3\n .scaleLinear()\n .domain([min, -100, 0, 100, max])\n .range([\"#9b0d14\", \"#fff5f0\", \"#eee\", \"#f7fcf5\", \"#04672b\"]);\n }\n return d3.scaleSequential([min, max], d3.interpolateReds);\n\n // [\"#fff5f0\",\"#fee0d3\",\"#fdc3ac\",\"#fca082\",\"#fb7c5c\",\"#f5553d\",\"#e23028\",\"#c2181c\",\"#9b0d14\",\"#67000d\"]\n // [\"#f7fcf5\",\"#e6f5e1\",\"#cdebc7\",\"#addea7\",\"#88cd87\",\"#5db96b\",\"#38a055\",\"#1b843f\",\"#04672b\",\"#00441b\"]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"formatImps = d3.format(\".3s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"formatDate = d3.timeFormat(\"%B %-d, %-I %p\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"formatDay = {\n const formatMonth = d3.timeFormat(\"%b %-d\");\n const formatDate = d3.timeFormat(\"%-d\");\n return d => (d.getDate() === 1 ? formatMonth : formatDate)(d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"formatHour = {\n return d => d === 0 ? \"12 AM\" : d === 12 ? \"12 PM\" : (d % 12) + \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"heatmapWidth = 0.65","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = margin.top + margin.bottom + (networks.length + 1) * 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"margin = ({ top: 70, right: 10, bottom: 0, left: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"BootStrap4 = require(\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"BootstrapCss = importcss(\n \"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"import { importjs, importcss } from \"@chomtana/import-external-library\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"md`### Imported Charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"sportsChartInputs = ({\n width: 640,\n id: 'sports',\n areaColor: 'blue',\n title: 'Sports Networks',\n color: '#333',\n yAxisFormat: '.2s',\n heightWidthRatio: 0.5,\n mark: '2020-03-12',\n markText: 'Sports cancellations'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"import { chart as sportsChart } with {\n sportsViewership as data,\n sportsChartInputs as inputs\n} from \"@simulmedia/area-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"audienceChartInputs = ({\n width: 640,\n id: 'audience',\n areaColor: '#333',\n title: selAudience.name,\n color: '#333',\n yAxisFormat: '.2s',\n heightWidthRatio: 0.5,\n mark: '2020-03-12'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"import { chart as audienceTrendChart } with {\n audienceTrend as data,\n audienceChartInputs as inputs\n} from \"@simulmedia/area-chart\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}