30:Tc4f,chart = { const svg = d3.select(DOM.svg(width, height)) .attr('font-family', 'sans-serif'); svg.append('g').append('rect') .attr('x', 0).attr('y', 0) .attr('width', width).attr('height', height) .attr('fill', 'hsl(0,0%,98%)'); const header = svg.append('g').call(headerG) const legend = svg.append('g').call(legendG); const radius = d => Math.sqrt(2 * Math.pow(r(d.viewers), 2)) / 2 + 1; const sim = d3.forceSimulation(forceData) .stop() .force('link', d3.forceLink(links)) .force('radial', d3.forceRadial(height / 6).strength(radialStrength)) .force('collide', d3.forceCollide(radius).strength(collideStrength)); const networks = svg.append('g').attr('transform', `translate(${width / 30}, ${width / 30})`) .selectAll('g').data(sim.nodes()).enter() .append('g'); networks.each(function (d) { tippy(this, { content: getTooltip(d), theme: 'light', followCursor: true }); }); const circles = networks.append('circle') .attr('r', radius) .attr('fill', 'hsl(0,0%,85%)') .attr('title', d => networkLabels[d.network] || d.network); const mosaics = networks.append('g').attr('transform', d => { const numSquares = Math.ceil(d.viewers / viewersPerSquare); const numCols = numColsForSquareCount(numSquares); const offset = numCols < Math.ceil(Math.sqrt(numSquares)) ? squareSize / 2: 0; return `translate(${offset - r(d.viewers) / 2} ${-r(d.viewers) / 2})`; }) .selectAll('g') .data(d => { const numSquares = Math.ceil(d.viewers / viewersPerSquare); const owners = ownerByNetwork[d.network]; return d3.range(numSquares).map(i => { let owner; if (owners.length === 1) { owner = owners[0]; } else { const shareI = i / numSquares; owner = owners.filter(d => d.prevShare <= shareI && shareI < d.prevShare + d.share)[0]; } return [...squarePositionFromIndex(i, numSquares).map(z => z * squareSize), owner.name]; }); }) .enter() .append('rect') .attr('x', d => d[0]) .attr('y', d => d[1]) .attr('width', squareSize) .attr('height', squareSize) .attr('fill', d => color(d[2])) .attr('stroke', 'rgba(255,255,255,0.2)') .attr('stroke-width', 1); const textWrapper = networks.append('g'); textWrapper.append('text') .attr('text-anchor', 'middle') .attr('font-size', `${width / 100}px`) .attr('font-weight', 700) .attr('fill', 'white') .each(function (d) { if (d.viewers < 15e4) { d3.select(this).remove(); } else { d3.select(this.parentNode.parentNode).raise(); } }).selectAll('tspan') .data(d => (networkLabels[d.network] || d.network).split(' ')).enter() .append('tspan') .text(d => d) .attr('y', (d, i) => i * width / 100) .attr('x', 0); const updateNetworks = () => networks .attr('transform', d => `translate(${d.x + width / 2} ${d.y + height / 2})`) while(true) { d3.range(3).forEach(i => sim.tick()); updateNetworks(); yield svg.node(); } }31:T93e,legendG = { const ownerLineHeight = width / 80; const amountLineHeight = squareSize * 3; const fontSize = ownerLineHeight; const padding = 1.6; const header = g => g .attr('y', 0.8 * ownerLineHeight) .attr('font-weight', 700) .attr('fill', 'black'); const legendHeight = (padding * ownerLineHeight * (color.domain().length + 4)) + (padding * amountLineHeight * 3) return g => { g.attr('transform', `translate(${margin.left} ${height - margin.bottom - legendHeight})`) .attr('font-size', fontSize); g.append('text') .text('Owners').call(header) const legendRowWrapper = g.append('g').attr('transform', `translate(0 ${padding * ownerLineHeight})`) .selectAll('g').data([...color.domain(), 'Other']).enter() .append('g') .attr('transform', (d, i) => `translate(0 ${i * padding * ownerLineHeight})`); legendRowWrapper.append('circle') .attr('cx', ownerLineHeight / 2) .attr('cy', ownerLineHeight / 2) .attr('r', ownerLineHeight / 2) .attr('fill', color); legendRowWrapper.append('text') .attr('x', amountLineHeight + width / 200) .attr('y', 0.85 * fontSize) .text(d => d); const nextY = padding * ownerLineHeight * (color.domain().length + 3); const amountWrapper = g.append('g').attr('transform', `translate(0 ${nextY})`); amountWrapper.append('text').text('Viewers (Q2 2018 avg.)').call(header); const amountRow = amountWrapper .selectAll('g').data([1, 4, 9]).enter().append('g') .attr('transform', (d, i) => `translate(0 ${ownerLineHeight * padding + i * amountLineHeight * padding})`); amountRow.append('g').attr('transform', d => { const offset = (3 - Math.sqrt(d)) * squareSize / 2; return `translate(${offset} ${offset})`; }).selectAll('rect').data(d => d3.range(d).map(d2 => [d2, Math.sqrt(d)])).enter() .append('rect') .attr('x', d => squareSize * (d[0] % d[1])) .attr('y', d => squareSize * (Math.floor(d[0] / d[1]))) .attr('width', squareSize) .attr('height', squareSize) .attr('fill', color('Other')) .attr('stroke', 'rgba(255,255,255,0.2)') .attr('stroke-width', width / 2000); amountRow.append('text').text(d => siFormat(viewersPerSquare * d)) .attr('x', amountLineHeight + width / 200) .attr('y', fontSize) }; }32:Tb50,networkLabels = ({ 'A&E NETWORK': 'A&E', 'ADULT SWIM': 'Adult Swim', 'AMERICAN HEROES CHANNEL': 'American Heroes Channel', 'ANIMAL PLANET': 'Animal Planet', 'BABY FIRST TV': 'Baby First TV', 'BBC-AMERICA': 'BBC America', 'BEIN SPORT': 'beIN Sport', 'BEIN SPORT ESPANOL': 'beIN Sport Espanol', 'BET HER': 'BET Her', 'BLACK ENTERTAINMENT TV': 'BET', 'BOOMERANG': 'Boomerang', 'BRAVO': 'Bravo', 'CINE LATINO': 'Cinelatino', 'CNN EN ESPANOL': 'CNN en Espanol', 'COMEDY CENTRAL': 'Comedy Central', 'COMEDY.TV': 'Comedy.tv', 'COOKING CHANNEL': 'Cooking Channel', 'DESTINATION AMERICA': 'Destination America', 'DISCOVERY CHANNEL': 'Discovery Channel', 'DISCOVERY EN ESPANOL': 'Discovery en Espanol', 'DISCOVERY FAMILIA': 'Discovery Familia', 'DISCOVERY FAMILY CHANNEL': 'Discovery Family Channel', 'DISCOVERY LIFE CHANNEL': 'Discovery Life Channel', 'DISNEY XD': 'Disney XD', 'DIY NETWORK': 'DIY', 'EL REY': 'El Rey', 'ESN LIFESTYLES': 'ESN Lifestyles', 'ESPN DEPORTES': 'ESPN Deportes', 'FOOD NETWORK': 'Food Network', 'FOX BUSINESS NETWORK': 'Fox Business', 'FOX DEPORTES': 'Fox Deportes', 'FOX NEWS CHANNEL': 'Fox News', 'FOX SPORTS 1': 'FS1', 'FOX SPORTS 2': 'FS2', 'FREEFORM': 'Freeform', 'FUSE': 'Fuse', 'FX MOVIE CHANNEL': 'FX Movies', 'GALAVISION': 'Galavision', 'GOLF CHANNEL': 'Golf Channel', 'GREAT AMERICAN COUNTRY': 'Great American Country', 'HALLMARK CHANNEL': 'Hallmark Channel', 'HALLMARK MOVIES & MYSTERIES': 'Hallmark Movies', 'HISTORY': 'History', 'HOME AND GARDEN TV': 'HGTV', 'IFC TV': 'IFC', 'INVESTIGATION DISCOVERY': 'iD', 'JUSTICE CENTRAL': 'Justice Central', 'LIFETIME MOVIE NETWORK': 'Lifetime Movies', 'LIFETIME TELEVISION': 'Lifetime', 'LOGO': 'Logo', 'MLB NETWORK': 'MLB', 'MTV CLASSIC': 'MTV Classic', 'NAT GEO WILD': 'NatGeo Wild', 'NATIONAL GEOGRAPHIC': 'NatGeo', 'NBA-TV': 'NBATV', 'NBC SPORTS NETWORK': 'NBCSN', 'NFL NETWORK': 'NFL', 'NICK JR': 'Nick Jr.', 'NICK-AT-NITE': 'Nick At Nite', 'NICKELODEON': 'Nickolodeon', 'NICKTOONS': 'Nicktoons', 'OPRAH WINFREY NETWORK': 'OWN', 'OVATION': 'Ovation', 'OXYGEN MEDIA': 'Oxygen', 'PARAMOUNT': 'Paramount', 'POP': 'Pop', 'REELZCHANNEL': 'Reelz', 'RFD-TV': 'RFD', 'SCIENCE': 'Science', 'SMITHSONIAN': 'Smithsonian', 'SUNDANCE TV': 'Sundance', 'SYFY': 'SyFy', 'TBS NETWORK': 'TBS', 'TEENNICK': 'TeenNick', 'TENNIS CHANNEL': 'Tennis Channel', 'THE CARTOON NETWORK': 'Cartoon Network', 'THE WEATHER CHANNEL': 'Weather', 'TRAVEL CHANNEL': 'Travel Channel', 'TRUTV': 'TruTV', 'TURNER NETWORK TELEVISION': 'TNT', 'TV LAND': 'TV Land', 'TV ONE': 'TV One', 'UNIVERSAL KIDS': 'Universal Kids', 'UNIVERSO': 'Universo', 'UNIVISION DEPORTES': 'Univision Deportes', 'USA NETWORK': 'USA', 'VELOCITY': 'Velocity', 'VICELAND': 'Viceland', 'WGN AMERICA': 'WGN', })33:[] 2e:{"title":"Who Owns Basic Cable?","cells":[{"id":0,"value":"md`# Who Owns Basic Cable?\n\nThere are a lot of channels on cable TV, but the ownership is clustered in a small number of media conglomerates. This visualization explores those owners.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"viewof afterMerger = radio({\n options: [\n { label: 'Current (late 2018)', value: 'before' },\n { label: 'After Disney/Fox merger (expected early-mid 2019)', value: 'after' },\n ],\n value: 'before'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"md`One square in this visualization represents an average of ${siFormat(viewersPerSquare)} viewers at any one time (measured April through June 2018 by Nielsen ratings). The squares are colored proportionally according to the ownership of the channel. Each network is then clustered by common ownership.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`### Code / Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"viewof collideStrength = slider({min: 0, max: 1, step: 0.01, value: 0.24})","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"viewof linkStrength = slider({min: 0, max: 10, step: 0.1, value: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"getCommonOwnership = (n1, n2) => {\n const o1 = ownerByNetwork[n1], o2 = ownerByNetwork[n2];\n if (!o1) {\n return n1;\n }\n return o1.reduce((total, owner) => {\n const match = o2.find(o => o.name === owner.name);\n return total + match ? 1 : 0;\n }, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"forceData = alltimeData.map(d => ({...d}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"links = getLinks(forceData, linkStrength)","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"viewof radialStrength = slider({min: 0, max: 1, step: 0.01, value: 0.2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"viewof numSteps = slider({min: 0, max: 1000, step: 1, value: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"headerG = g => {\n const g50 = 'hsl(0,0%,50%)';\n const headerFontSize = width / 30;\n g.attr('transform', `translate(${margin.left} ${margin.top})`)\n const h1 = g\n .append('text')\n .attr('y', headerFontSize)\n .attr('font-size', headerFontSize);\n h1.append('tspan').text('Who Owns Basic Cable?')\n .attr('font-weight', 700)\n h1.append('tspan').text(' by @zzzev')\n .attr('fill', g50);\n const h2 = g.append('text')\n .attr('y', headerFontSize * 1.8)\n .attr('font-size', headerFontSize / 2)\n .text(afterMerger === 'after' ? 'After proposed Disney/Fox merger' : 'As of November 2018')\n .attr('font-style', 'italic')\n .attr('fill', g50);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"siFormat = d3.format('~s')","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"getTooltip = d => {\n let ownershipString;\n const ownership = ownerByNetwork[d.network];\n if (ownership.length === 1) {\n ownershipString = `Wholly owned by ${ownership[0].name}`;\n } else {\n if (ownership.every(o => o.percent)) {\n ownershipString = ownership.map(o => `${o.percent}% owned by ${o.name}`).join('\\n\\n');\n } else {\n ownershipString = `Jointly owned by ${pluralize(ownership.map(o => o.name))}`;\n }\n }\n return md`# ${networkLabels[d.network] || d.network}\n**${siFormat(d.viewers)}** viewers (average).\n\n${ownershipString}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"pluralize = items => {\n if (items.length === 2) {\n return `${items[0]} and ${items[1]}`;\n }\n return items.slice(0, items.length - 1).join(', ') + ', and ' + items.slice(-1)[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"tooltipStyle = html`