2f:Ta3c,// Sankey chart (combined logo + screenshot, aggregated + clean hover via customdata) viewof sankeyChart3 = { // Safely handle selected platforms const selected = (selectedPlatformsSM?.value ?? selectedPlatformsSM ?? []); // Filter rows: include both logo and screenshot const filtered = data_p.filter(d => { const ls = (d["logo/screenshot"] ?? "").toLowerCase().trim(); return (ls === "logo" || ls === "screenshot") && selected.includes(d.platform); }); // Aggregate by (channel, platform) const aggregatedMap = filtered.reduce((acc, d) => { const channel = d.channel; const platform = d.platform; const key = `${channel}||${platform}`; const seconds = Number(d.number_of_seconds) || 0; if (!acc[key]) { acc[key] = { channel, platform, total_seconds: 0 }; } acc[key].total_seconds += seconds; return acc; }, {}); const subset = Object.values(aggregatedMap); // If no data, show message if (!subset.length) { const div = html`

⚠️ No data found for selected platforms (logo or screenshot).

`; return div; } // Build nodes const channels = [...new Set(subset.map(d => d.channel))]; const platformsUsed = [...new Set(subset.map(d => d.platform))]; const allNodes = [...channels, ...platformsUsed]; const nodeIndex = Object.fromEntries(allNodes.map((d, i) => [d, i])); // Build aggregated links const source = subset.map(d => nodeIndex[d.channel]); const target = subset.map(d => nodeIndex[d.platform]); const value = subset.map(d => d.total_seconds); // Build the clean hover strings and assign to customdata const customHover = subset.map( d => `${d.channel} → ${d.platform}
${d.total_seconds.toLocaleString()} seconds` ); // Define Sankey figure with working hover via customdata const fig = { data: [{ type: "sankey", orientation: "h", node: { pad: 15, thickness: 20, line: { color: "black", width: 0.5 }, label: allNodes }, link: { source, target, value, // Put hover strings into customdata and reference them in hovertemplate customdata: customHover, hovertemplate: "%{customdata}" } }], layout: { title: "Sankey Diagram – Logo or Screenshot Combined", font: { size: 12 }, margin: { l: 50, r: 50, t: 50, b: 50 } } }; const div = html`

`; plt.newPlot(div, fig.data, fig.layout); return div; } 30:Td4f,// Sankey chart (sorted descending + aligned + no overlap) viewof sankeyChart3m = { const selected = (selectedPlatformsSM?.value ?? selectedPlatformsSM ?? []); const filtered = data_p.filter(d => { const ls = (d["logo/screenshot"] ?? "").toLowerCase().trim(); return (ls === "logo" || ls === "screenshot") && selected.includes(d.platform); }); const aggregatedMap = filtered.reduce((acc, d) => { const channel = d.channel; const platform = d.platform; const key = `${channel}||${platform}`; const seconds = Number(d.number_of_seconds) || 0; if (!acc[key]) acc[key] = { channel, platform, total_seconds: 0 }; acc[key].total_seconds += seconds; return acc; }, {}); const subset = Object.values(aggregatedMap); if (!subset.length) { return html`

⚠️ No data found for selected platforms (logo or screenshot).

`; } // --- Totals --- const channelTotals = {}; const platformTotals = {}; for (const d of subset) { channelTotals[d.channel] = (channelTotals[d.channel] || 0) + d.total_seconds; platformTotals[d.platform] = (platformTotals[d.platform] || 0) + d.total_seconds; } // --- Sort descending --- const channels = Object.entries(channelTotals) .sort((a, b) => b[1] - a[1]) .map(([ch]) => ch); const platformsUsed = Object.entries(platformTotals) .sort((a, b) => b[1] - a[1]) .map(([p]) => p); const allNodes = [...channels, ...platformsUsed]; const nodeIndex = Object.fromEntries(allNodes.map((d, i) => [d, i])); // --- Dynamic spacing to prevent overlap --- const channelCount = channels.length; const platformCount = platformsUsed.length; // scale spacing: leave extra gap for many nodes const spacingChannel = 1 / (channelCount + 1); const spacingPlatform = 1 / (platformCount + 1); const yChannel = channels.map((_, i) => (i + 1) * spacingChannel); const yPlatform = platformsUsed.map((_, i) => (i + 1) * spacingPlatform); const xChannel = Array(channelCount).fill(0.05); const xPlatform = Array(platformCount).fill(0.95); const x = [...xChannel, ...xPlatform]; const y = [...yChannel, ...yPlatform]; // --- Build links --- const source = subset.map(d => nodeIndex[d.channel]); const target = subset.map(d => nodeIndex[d.platform]); const value = subset.map(d => d.total_seconds); const customHover = subset.map( d => `${d.channel} → ${d.platform}
${d.total_seconds.toLocaleString()} seconds` ); // --- Sankey figure --- const fig = { data: [{ type: "sankey", orientation: "h", node: { pad: 10, // smaller inner padding thickness: 12, // thinner nodes to prevent overlap line: { color: "black", width: 0.5 }, label: allNodes, x: x, y: y, arrangement: "fixed" }, link: { source, target, value, customdata: customHover, hovertemplate: "%{customdata}" } }], layout: { title: "Sankey Diagram – Logo or Screenshot Combined (Descending, Aligned, Non-overlapping)", font: { size: 12 }, margin: { l: 80, r: 80, t: 50, b: 50 } } }; const div = html`

`; plt.newPlot(div, fig.data, fig.layout); return div; } 31:T774,// Matrix diagram (heatmap) – channel vs platform with total_seconds viewof matrixChart = { const selected = (selectedPlatformsSM?.value ?? selectedPlatformsSM ?? []); // Filter relevant data const filtered = data_p.filter(d => { const ls = (d["logo/screenshot"] ?? "").toLowerCase().trim(); return (ls === "logo" || ls === "screenshot") && selected.includes(d.platform); }); // Aggregate (channel, platform) const aggregated = d3.rollup( filtered, v => d3.sum(v, d => +d.number_of_seconds || 0), d => d.channel, d => d.platform ); const channels = Array.from(aggregated.keys()); const platforms = [...new Set(filtered.map(d => d.platform))]; // Create matrix of values const z = channels.map(ch => platforms.map(pl => aggregated.get(ch)?.get(pl) || 0) ); // Create hover text const text = channels.map(ch => platforms.map(pl => { const val = aggregated.get(ch)?.get(pl) || 0; return `${ch} → ${pl}
${val.toLocaleString()} seconds`; }) ); // If empty if (!filtered.length) { const div = html`

⚠️ No data found for selected platforms.

`; return div; } // Plotly heatmap const fig = { data: [{ type: "heatmap", z, x: platforms, y: channels, text, hoverinfo: "text", colorscale: "Plasma", colorbar: { title: "Seconds", titleside: "right" } }], layout: { title: "Channel–Platform Matrix (Logo + Screenshot Combined)", xaxis: { title: "Platform", tickangle: -45 }, yaxis: { title: "Channel", automargin: true }, font: { size: 12 }, margin: { l: 120, r: 50, t: 80, b: 80 } } }; const div = html`

`; plt.newPlot(div, fig.data, fig.layout); return div; } 32:Tdc4,// Matrix diagram (heatmap) – channel vs platform with total_seconds viewof matrixChart2 = { const selected = (selectedPlatformsSM?.value ?? selectedPlatformsSM ?? []); // Filter relevant data const filtered = data_p.filter(d => { const ls = (d["logo/screenshot"] ?? "").toLowerCase().trim(); return (ls === "logo" || ls === "screenshot") && selected.includes(d.platform); }); if (!filtered.length) { const div = html`

⚠️ No data found for selected platforms.

`; return div; } // Aggregate (channel, platform) const aggregated = d3.rollup( filtered, v => d3.sum(v, d => +d.number_of_seconds || 0), d => d.channel, d => d.platform ); // Get channels and platforms let channels = Array.from(aggregated.keys()); let platforms = Array.from(new Set(filtered.map(d => d.platform))); // Build initial matrix let matrix = channels.map(ch => platforms.map(pl => aggregated.get(ch)?.get(pl) || 0)); // Flatten matrix and sort by value descending for top-left dominance const flat = []; matrix.forEach((row, i) => { row.forEach((val, j) => { flat.push({ ch: channels[i], pl: platforms[j], val }); }); }); flat.sort((a, b) => b.val - a.val); // Determine sorted channels and platforms const orderedChannels = []; const orderedPlatforms = []; flat.forEach(d => { if (!orderedChannels.includes(d.ch)) orderedChannels.push(d.ch); if (!orderedPlatforms.includes(d.pl)) orderedPlatforms.push(d.pl); }); // Rebuild sorted matrix const z = orderedChannels.map(ch => orderedPlatforms.map(pl => aggregated.get(ch)?.get(pl) || 0) ); // Hover text const text = orderedChannels.map(ch => orderedPlatforms.map(pl => { const val = aggregated.get(ch)?.get(pl) || 0; return `${ch} → ${pl}
${val.toLocaleString()} seconds`; }) ); // Define bins for 2-minute intervals const binSize = 120; // 2 minutes = 120 seconds const maxVal = d3.max(z.flat()); const numBins = Math.ceil(maxVal / binSize); // Discrete gradient colors const colors = [ "#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476", "#41ab5d","#238b45","#006d2c","#00441b","#081d58" ]; const scaleColors = []; for (let i = 0; i < numBins; i++) { const c = colors[Math.floor((i / numBins) * colors.length)]; scaleColors.push([i / numBins, c]); scaleColors.push([(i + 1) / numBins, c]); } // Colorbar tick values and labels in minute ranges const tickvals = Array.from({ length: numBins + 1 }, (_, i) => i * binSize); const ticktext = Array.from({ length: numBins }, (_, i) => `${i * 2}-${(i + 1) * 2} min`); // Plotly heatmap const fig = { data: [{ type: "heatmap", z, x: orderedPlatforms, y: orderedChannels, text, hoverinfo: "text", colorscale: scaleColors, zmin: 0, zmax: numBins * binSize, colorbar: { title: "Duration", titleside: "right", tickvals: tickvals.slice(0, -1), ticktext: ticktext } }], layout: { title: "Channel–Platform Matrix (Logo + Screenshot Combined)", xaxis: { title: "Platform", tickangle: -45 }, yaxis: { title: "Channel", automargin: true }, font: { size: 12 }, margin: { l: 120, r: 50, t: 80, b: 80 } } }; const div = html`

`; plt.newPlot(div, fig.data, fig.layout); return div; } 33:[{"id":"d3eaa41a75e9aaa88f351cc909d185338988937a6eae503cb2e58e667ff582ac69274315d5694da7d39aa801f3e2e959831a9895987d33ad643d42cf25bfe028","href":"https://static.observableusercontent.com/files/d3eaa41a75e9aaa88f351cc909d185338988937a6eae503cb2e58e667ff582ac69274315d5694da7d39aa801f3e2e959831a9895987d33ad643d42cf25bfe028","name":"chart_gold_standard_images_allchannel.csv","type":"text/csv","lastModified":1760107309703.99,"size":1174}] 2d:{"title":"Social Media Mentions on TV News - Charts","cells":[{"id":83,"value":"# Social Media Mentions on TV News - Charts\n","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"toc()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"## Sankey Diagram","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"// Sample: load your CSV (upload to Observable or link to a file)\ndata = await FileAttachment(\"chart_gold_standard_images_allchannel.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"// Rename X to Twitter to make sure they are treated as one for the charts\ndata_p = data.map(d => ({\n ...d,\n platform: d.platform === \"Twitter (X)\" ? \"Twitter\" : d.platform\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"// Unique platforms\nplatforms = [...new Set(data_p.map(d => d.platform))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"plt = require(\"https://cdn.plot.ly/plotly-latest.min.js\"); \n","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof selectedPlatformsSM = Inputs.checkbox(platforms, {label: \"Platforms\", value: platforms})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"# Sankey - sorted","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"By default, Plotly automatically optimizes the node placement to reduce link crossings, so it may rearrange nodes — meaning “highest channel” might not appear at the top even if it’s first in allNodes. Need to overwrite.","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"

No need to use this sorted chart as it's messing up with the alignments

\n","pinned":false,"hidden":false,"mode":"html"},{"id":96,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"## Matrix diagram","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"## Matrix diagram - Sorted","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"* Sorted by total duration for each platform first\n* Then sorted by total duration for channel for the highest platform (shows highest channel-platform combo on bottom left most)\n* Bins of 2 mins, distinct colors but with a gradient","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"import {toc} from \"@mbostock/toc\"\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}