31:T9b2,md`# Program Ratings in March 2020 As the coronavirus epidemic has spread in the US, [TV viewing behavior has considerably changed](https://observablehq.com/@simulmedia/tv-viewing-at-the-time-of-covid-19). As of last week, over 3.18 billion additional impressions had become available. Here we take a look at how this increase in TV viewing has affected overall program commercial ratings during the month of March. We find that, in general, **the percentage of programs with a higher commercial rating has increased**. In other words, those 3.18 billion additional impressions are having a significant impact on show ratings. We have gathered data for the A18-49 audience's commercial ratings for all programs across all networks, from March 2 through March 29 (data for the week of 3/23-29 is only 80% finalized and will be updated next week). To visualize the shift in ratings, we calculate the percentage of programs above and below a given reference rating for every day. For instance, the line chart below shows the percentage of programs that have a rating above 0.5 on a daily basis. This percentage almost tripled by the end of the March. A 0.5 rating may not sound like much, but the vast majority of programs on linear TV get that rating or less.

*The percentage of programs that have a rating above 0.5 almost **tripled** by the end of the March*

We can conclude that the combination of big tentpole events (mainly sports) cancellations, resulting in those impressions being distributed to other programs, plus the increase of people watch TV have resulted in more people watching more of a wider variety of programs. In two words: **increased fragmentation**. This has profound impact on media planning. It means that in general, advertisers and their agencies must buy more programs and more networks in order to reach their audience. We can understand why via a simple, fictitious example. If the 2020 NCAA Division 1 men's basketball championship game would have attracted 10 million men who buy straight blade razors, and its cancellation then resulted in those 10 million shifting in equal amounts of 2 million each to five different programs instead, a media planner wanting to reach them would have to buy on five programs instead of just one. In reality, of course, the fragmentation is far more complicated than this example and is best mitigated by software.
`32:T692,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "white"); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .append(() => legend({ color, title: "Rating (% of A18-49)" }) ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("g") .selectAll("rect") .attr('class', 'program') .data(data) .join("rect") .attr("x", d => x(d.startTime)) .attr("y", d => y(d.network) - 3) .attr("width", d => { const endTime = d3.min([endOfDay, d.endTime]); return x(endTime) - x(d.startTime) - 1 > 0 ? x(endTime) - x(d.startTime) - 1 : 0; }) .attr("height", y.bandwidth() - 1) .attr("fill", d => color(d.rating)) .on('mouseover', d => { tooltip.style("display", "inline"); }) .on('mousemove', d => { tooltip .html( `Rating: ${d3.format('.2')( d.rating )}
${d.program}
[${ d.genre }]
${d.startTime .toString() .substring(16, 21)} - ${d.endTime .toString() .substring(16, 21)} [${d.duration} min]
${d3.format('.3s')( d.avgViewers )} avg viewers per minute` ) .style("left", d3.event.pageX + 5 + "px") .style("top", d3.event.pageY - 12 + "px"); }) .on('mouseout', d => { tooltip.style("display", "none"); }) .transition() .duration(300) .attr("y", d => y(d.network)); return svg.node(); }33:[{"id":"d6fe35d7bbd87c9ea3ac11d662288385b66a4fcb4b43e07f80e03e0b335f43099a78fb468718455fca7ea8866768d7ae48f92f4dbb87d9d089ea1dc44910bbb4","href":"https://static.observableusercontent.com/files/d6fe35d7bbd87c9ea3ac11d662288385b66a4fcb4b43e07f80e03e0b335f43099a78fb468718455fca7ea8866768d7ae48f92f4dbb87d9d089ea1dc44910bbb4","name":"program_ratings.csv","type":"text/csv","lastModified":1586402943886.942,"size":11712262}] 2f:{"title":"Program Ratings in March 2020","cells":[{"id":296,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"lineChartFixed","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"md`## Data Deep Dive\n
\nFor the data enthusiasts, we have put together the following interactive visualizations. The first is the same as the line chart above, and the second is a deep dive on a given day, showing all programs, their ratings and whether or not their rating is above the reference rating (in blue).\n\nChanging the reference rating value will update both visualizations, while changing the date will update the day-level program heatmap.\n___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof centralRating = slider({\n min: 0,\n max: 2,\n step: 0.01,\n value: 0.2,\n title: \"Reference Rating Level\",\n description: \"Pick the rating value you'd like to see programs against\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"lineChart","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"viewof selectedDate = date({\n title: \"Day\",\n min: \"2020-03-02\",\n max: \"2020-03-29\",\n value: \"2020-03-12\",\n description: \"Pick a date to visualize all programs and their rating\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"md`# What's Your Target Audience?\n\nWe've run this analysis based on an A18-49 audience, but we can repeat the exercise with any audience, including those based on first-party data, mobile app users, website visitors, and more. To get an analysis of your audience, simply contact marketing@simulmedia.com. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"overallData = d3.csvParse(\n await FileAttachment(\"program_ratings.csv\").text(),\n d => ({\n date: d.date,\n network: d.sm_network,\n program: d.program_name,\n startTime: new Date(d.est_program_start_time),\n endTime: new Date(d.est_program_end_time),\n duration: +d.reported_duration,\n genre: d.program_type_summary_description,\n episode: d.episode_name,\n repeat: +d.repeat_indicator,\n avgViewers: +d.avg_viewers_per_comm_min,\n rating: +100 * d.rating\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"data = overallData.filter(obj => obj.date === selectedDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"lineData = {\n const data = d3\n .nest()\n .key(function(d) {\n return d.date;\n })\n .rollup(function(v) {\n return {\n totalCount: [...new Set(v.map(obj => obj.program))].length,\n aboveCentralRating:\n (100 *\n [\n ...new Set(\n v\n .filter(obj => obj.rating >= centralRating)\n .map(obj => obj.program)\n )\n ].length) /\n [...new Set(v.map(obj => obj.program))].length\n };\n })\n .entries(overallData);\n\n const lineData = data.map(obj => {\n return {\n date: new Date(obj.key),\n percentage: obj.value.aboveCentralRating\n };\n });\n\n return lineData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"lineDataFixed = {\n const data = d3\n .nest()\n .key(function(d) {\n return d.date;\n })\n .rollup(function(v) {\n return {\n totalCount: [...new Set(v.map(obj => obj.program))].length,\n programsAbove: [\n ...new Set(v.filter(obj => obj.rating >= 0.5).map(obj => obj.program))\n ].length,\n totalPrograms: [...new Set(v.map(obj => obj.program))].length,\n aboveCentralRating:\n (100 *\n [\n ...new Set(\n v.filter(obj => obj.rating >= 0.5).map(obj => obj.program)\n )\n ].length) /\n [...new Set(v.map(obj => obj.program))].length\n };\n })\n .entries(overallData);\n\n console.log(data);\n\n const lineData = data.map(obj => {\n return {\n date: new Date(obj.key),\n percentage: obj.value.aboveCentralRating\n };\n });\n\n return lineData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"networks = [...new Set(overallData.map(obj => obj.network))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"md`## Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"display\", \"none\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"x = d3.scaleTime([startOfDay, endOfDay], [margin.left, width - margin.right])","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.rating);\n return d3\n .scaleLinear()\n .domain([0, centralRating - 0.0001, centralRating + 0.0001, max])\n .range([\"#f7f7f7\", \"#cccccc\", \"#c6dbef\", \"#084594\"]);\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(${width - margin.right},0)`)\n .call(d3.axisRight(y))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = margin.top + margin.bottom + (networks.length + 1) * 13","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"margin = ({ top: 70, right: 90, bottom: 0, left: 15 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"endOfDay = {\n const day = moment(selectedDate);\n const midnight = day\n .clone()\n .local()\n .endOf('day');\n return midnight;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"startOfDay = {\n const day = moment(selectedDate);\n const midnightAM = day\n .clone()\n .local()\n .startOf('day');\n return midnightAM;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"md`### Imported Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"lineChartInputs = ({\n width: 640,\n height: 250,\n dimension: 'date',\n metric: 'percentage',\n title: `Percentage above a ${centralRating} rating`,\n color: '#333',\n xAxisHidden: false,\n yAxisHidden: false,\n mark: selectedDate,\n markText: \"Selected Date\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"lineChartFixedInputs = ({\n width: 640,\n height: 250,\n dimension: 'date',\n metric: 'percentage',\n title: `Percentage of programs above a 0.5 rating`,\n color: '#333',\n xAxisHidden: false,\n yAxisHidden: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"import { chart as lineChart } with {\n lineData as data,\n lineChartInputs as inputs\n} from 'fac1b4719c2e3c59'","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"import { chart as lineChartFixed } with {\n lineDataFixed as data,\n lineChartFixedInputs as inputs\n} from 'fac1b4719c2e3c59'","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"md`## Imports and Styles`","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":574,"value":"import { date, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"{\n return html`\nStyle`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}