32:T759,md`# Tracking Sports Viewers vs. Sports Viewing: What Do Sports Fans Watch When Not Watching Sports?
With live sports events canceled or postponed, advertisers need to find alternatives for reaching sports fans. Here, we have prepared some interactive charts that show the critical distinction between sports viewers and sports viewing. We can see not only that sports viewers are still watching TV; we can see what they're watching and when. In the two line charts below, we show TV viewing trends (impressions over time) for M18-49 Avid Sports Viewers (left) and Sports networks (right, including BeIN, ESPN, Fox Soccer, MLB, NBA, NFL, Tennis, among others). The red line indicates March 12, the date when many major leagues canceled or postponed their live events. It is clear that while sports viewing declined, sports fans continued to watch TV. In fact, they've been watching more. Below the two line charts, we show the difference in average audience concentration at a network-daypart level before and after March 12. Considering that the sports fan audience is on TV to the same degree if not more than they were prior to March 12, it is striking to see how much more fragmented this audience has become across all networks and dayparts after sports cancellations. **Finding and maximizing the reach of fragmented audiences, no matter their composition or what they watch on television, is Simulmedia's specialty.** Our software enables advertisers to quickly and precisely find their target customers. It then powers a unique, broad-based planning and buying approach that secures as many spots on as many networks as it takes to maximize reach - a key indicator of campaign success - for any given budget level. This is what has enabled us to help advertisers to continue reaching their audience even after sport leagues canceled their games and events.
`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":"729210a309152a1cbde64cde3e54ddc1d02602714f0653158fd4838982fa0e9ec7f315f09152e1a7afd98a7b69eb9cb53a8b7db06c3138b5e6942f2f3e93c7db","href":"https://static.observableusercontent.com/files/729210a309152a1cbde64cde3e54ddc1d02602714f0653158fd4838982fa0e9ec7f315f09152e1a7afd98a7b69eb9cb53a8b7db06c3138b5e6942f2f3e93c7db","name":"sports_viewing@1.csv","type":"text/csv","lastModified":1588892946628.834,"size":3313}] 30:{"title":"Tracking Sports Viewers vs. Sports Viewing: What Do Sports Fans Watch When Not Watching Sports?","cells":[{"id":296,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"md`**Audience**: M18-49 Avid Sports Viewers`","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`## How Avid Sports Viewers Have Changed Their Viewing Habits\n
\nThis chart shows the average audience concentration at a network-daypart level across all days in the range before and after March 12. Considering that the audience's overall viewing has not changed, **it shows that sports fans are distributed much more evenly across a wider range of networks and dayparts since live event cancellations began.** Click Play to see a before-and-after view of how this viewership has shifted.
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"viewof metric = Scrubber([\"before\", \"after\"], {\n loop: true,\n delay: 1200,\n autoplay: false\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":265,"value":"dateExtent = d3.extent(sportsViewership, d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"selAudience = audiences[1]","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 => 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":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 <= 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: 460,\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: 460,\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"}