31:T11b6,scatterplotWithVoronoiTooltips = { const width = 500 const height = 500 const svg = d3.create("svg") .style("font-family", "Work Sans, sans-serif") .attr("width", width+50) .attr("height", height-50) //.attr("viewBox", [0, 0, width+50, height+50]); var linearScale = d3.scaleLinear() .domain([-4, 4.5]) .range([10, 440]) var selectedData = combined1.map(function(d) { if (sb_view == 'Picture') { return { x: linearScale(d['PC1_P']), y: linearScale(d['PC2_P']), cat: d['Episode'], cat_val: d['Episode_val'], url: d['url_thumb'], frame: d['Frame'] }; } else if (sb_view == 'Audio') { return { x: linearScale(d['PC1_A']), y: linearScale(d['PC2_A']), cat: d['Episode'], cat_val: d['Episode_val'], url: d['url_thumb'], frame: d['Frame'] }; } else if (sb_view == 'Both') { return { x: linearScale(d['PC1_V']), y: linearScale(d['PC2_V']), cat: d['Episode'], cat_val: d['Episode_val'], url: d['url_thumb'], frame: d['Frame'] }; } }) .filter(function(d) { return cb_episodes.includes(d.cat); }); let episode_list = ["Bliss", "Family", "Conflict", "Coping", "Death", "Dreams", "Love", "Nightmares","Paradise"] let arr = [0,1,2,3,4,5,6,7,8] var colorScale = d3.scaleOrdinal(d3.schemeCategory10); //let selectedValues = viewof cb_episodes.value; // get the selected checkbox values //let selected_indexes = cb_episodes.map((episode) => episode_list.indexOf(episode)); let colorScale2 = arr.map(i => colorScale(i)); //console.log(colorScale) // let colorScale2 = colorScale // POINTS svg.append("g") .attr("class", "points") .selectAll("circle") .data(selectedData) .join("circle") .attr("stroke-width", "1") .attr("opacity", 0.5) .attr("stroke", d => colorScale(d.cat_val)) .attr("fill", d => colorScale(d.cat_val)) //.attr("transform", d => `translate(${d.x},${d.y})`) //.attr("transform", `translate(0,0)`) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 3) .on("mouseover", function(event, d) { console.log(d.cat_val) d3.select(this).attr("r", 10); }) .on("mouseout", function(event, d) { d3.select(this).attr("r", 3); }); const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); tooltip.append('rect') .attr('width', 80) .attr('height', 30) .attr('fill', 'white') .style('opacity', 0.8); tooltip.append('text') .attr('x', 40) .attr('y', 20) .style('text-anchor', 'middle') .style('font-size', '12px'); const voronoi = d3.Delaunay //.from(testing1, d => linearScale(d['PC1']), d => linearScale(d['PC2'])) .from(selectedData, d => d.x, d => d.y) .voronoi([0, 0, width, height]); // ensures voronoi is limited to the chart area svg.append("g") .attr("class", "voronoiWrapper") .selectAll("path") .data(selectedData) .join("path") .attr("opacity", 0.5) // .attr("stroke", "#ff1493") // Hide overlay //.attr("fill", "black") .attr("fill", "none") .style("pointer-events", "all") .attr("d", (d,i) => voronoi.renderCell(i)) .on("mouseover", (i,d ) => { //if (d.y > 1) { mutable img = d.url; // Get this bar's x/y values, then augment for the tooltip var xpos = d.x; var ypos = d.y; // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "30px") .attr("height", "15px") .attr("fill", "white") tgrp.append("text") .attr("x", 1) .attr("y", 10) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${d.cat}`) /*tgrp.append("text") .attr("x", 1) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "black") .text(`placeholder1`);*/ }) .on("mouseout", () => svg.selectAll('#tooltip').remove()); return svg.node(); }32:T4b2,### Usage Guide * Dots are placed on the graph based upon their similarity on the selected feature set. Closer dots mean that two frames are more similar. * Each frame is represented by a different dot and each episode a different color. ### Data Explanation * Scatterplots are made using Principal Components Analysis (PCA) which finds features and feature dimensions that are shared between the various frames and that can be used to predict the frame using a low-dimensional feature set. Placement relative to each other in the 2D PCA plot reflects similarity of different frames on this more large-scale features. T-SNE was considered but dropped due to it's non-deterministic eigenvectors which adversely affected the recommendations. * The image data is correlated based upon the similarity between the HSV values of the three primary colors. This is preferable to RGB values as it better maps to how humans differentiate between colors and resulted in more accurate splits. * The audio data uses the spectral and energy qualities described on the prior page as well as the BPM, the amount of frequency content in the bass region, the mid-low region, the mid-high region, and the treble regions.33:T894,recommend = { // Converting color to hsv let c1 = rgbToHsv(colorTorgb(sb_color1)) let c2 = rgbToHsv(colorTorgb(sb_color2)) let c3 = rgbToHsv(colorTorgb(sb_color3)) const select = [c1.h, c1.s, c1.v] .concat([c2.h, c2.s, c2.v]) .concat([c3.h, c3.s, c3.v]); //Scaling and computing position on scatterplot // let pc // if (sb_view == 'Picture') { // pc = pic_pc; // } else if (sb_view == 'Audio') { // pc = aud_pc; // } else if (sb_view == 'Both') { // pc = vid_pc; // } let pc = pic_pc; let scaled_choice = d3.zip(select,pc[2]).map((d, i) => d[0] - d[1]); let scaled_choice2 = d3.zip(scaled_choice,pc[3]).map((d, i) => d[0]/d[1]); let PC_res1 = d3.sum(d3.zip(scaled_choice2, pc[0]).map(function(d) { return d[0] * d[1]; })); let PC_res2 = d3.sum(d3.zip(scaled_choice2, pc[1]).map(function(d) { return d[0] * d[1]; })); let PC_res = [PC_res1, PC_res2]; //Knn to determine distance function euclideanDistance(point1, point2) { var dx = point1[0] - point2[0]; var dy = point1[1] - point2[1]; return Math.sqrt(dx * dx + dy * dy); } function knn(points, query, k) { var distances = []; for (var i = 0; i < points.length; i++) { distances.push([euclideanDistance(points[i], query), i]); } // Sort distances in ascending order distances.sort(function(a, b) { return a[0] - b[0]; }); // Return indices of the K nearest neighbors var neighbors = []; for (var i = 0; i < k; i++) { neighbors.push(distances[i][1]); } return neighbors; } let points = combined1.map(function(d) { if (sb_view == 'Picture') { return [d['PC1_P'], d['PC2_P']]; } else if (sb_view == 'Audio') { return [d['PC1_A'], d['PC2_A']]; } else if (sb_view == 'Both') { return [d['PC1_V'], d['PC2_V']]; } }); let nearestNeighbors = knn(points, PC_res, 10); let selectedData = nearestNeighbors.map(function(i) { return{ 'cat': combined1[i]['Episode'], 'frame': combined1[i]['Frame'] }; }); let countDict = d3.rollup(selectedData, v => v.length, d => d['cat']); let maxK = maxKey(countDict) return [url_rec(selectedData, maxK), selectedData] }34:[{"id":"e3a43bba21bda69c9e4dbaa9459c9b0b1269d5118306c7ea58e44d3ce010357928d4926931691ee11868310fe8ed5a5ace3a2097d415f9bf189908d1fb82adb4","href":"https://static.observableusercontent.com/files/e3a43bba21bda69c9e4dbaa9459c9b0b1269d5118306c7ea58e44d3ce010357928d4926931691ee11868310fe8ed5a5ace3a2097d415f9bf189908d1fb82adb4","name":"Aud_PC2@2.csv","type":"text/csv","lastModified":1683999513900.553,"size":494},{"id":"1efb64ca7a19ce09837bb7422cd4538ec9f96f44b5cc1b8762ef938f6bf2c54f69c6f48da9631ed6c8187b161acf809fd6646970fbb3eeae32f22a2a5ae201be","href":"https://static.observableusercontent.com/files/1efb64ca7a19ce09837bb7422cd4538ec9f96f44b5cc1b8762ef938f6bf2c54f69c6f48da9631ed6c8187b161acf809fd6646970fbb3eeae32f22a2a5ae201be","name":"Pic_PC2@2.csv","type":"text/csv","lastModified":1683999513900.553,"size":716},{"id":"075da0549c83c16fcb3b35653ff7d27b1bf58327be9e2dc860daf112f1cdd007ce1b08ec72e41ea1525dd9d84b146b02cfee75f58966f364e77f8b044febac06","href":"https://static.observableusercontent.com/files/075da0549c83c16fcb3b35653ff7d27b1bf58327be9e2dc860daf112f1cdd007ce1b08ec72e41ea1525dd9d84b146b02cfee75f58966f364e77f8b044febac06","name":"Vid_PC2@2.csv","type":"text/csv","lastModified":1683999513900.553,"size":1223},{"id":"0da90948aeeffae0ca5c262618cfb1556f016b8c3c62afbf08281a5f5e727e4ea08d3bfaa8139df28b744fda36eeac22fa0ee6ebce8a30b89d6330a64422ec5c","href":"https://static.observableusercontent.com/files/0da90948aeeffae0ca5c262618cfb1556f016b8c3c62afbf08281a5f5e727e4ea08d3bfaa8139df28b744fda36eeac22fa0ee6ebce8a30b89d6330a64422ec5c","name":"combined2@2.csv","type":"text/csv","lastModified":1683999513900.553,"size":755306},{"id":"b566697f82e75754a7d88c570825f68e330df511686156543be7bdaa7aefa60f16620d7cee09adae24e7cb952b419a5d53a84b3d064e110999b41b6ac724b3ef","href":"https://static.observableusercontent.com/files/b566697f82e75754a7d88c570825f68e330df511686156543be7bdaa7aefa60f16620d7cee09adae24e7cb952b419a5d53a84b3d064e110999b41b6ac724b3ef","name":"testing@1.csv","type":"text/csv","lastModified":1683999513900.553,"size":221520},{"id":"2738ec97bc1b822dfa8d7fa5b3c05cf2b4e66349b21bd076cd44546610532da23ca6c964be38f987b3bfbfaf2d35b91fe23a1f1ea3b7cac34a231ddc612d65f7","href":"https://static.observableusercontent.com/files/2738ec97bc1b822dfa8d7fa5b3c05cf2b4e66349b21bd076cd44546610532da23ca6c964be38f987b3bfbfaf2d35b91fe23a1f1ea3b7cac34a231ddc612d65f7","name":"testing2.csv","type":"text/csv","lastModified":1683999513900.553,"size":223924},{"id":"85b633d84bc29f68a2ed41c76fd7df322456417170c15c311c579bb10ce422f32f263d23ba6d33b5be7d9986f703e6fa3379f1e04bddb44579b6783483bd24f2","href":"https://static.observableusercontent.com/files/85b633d84bc29f68a2ed41c76fd7df322456417170c15c311c579bb10ce422f32f263d23ba6d33b5be7d9986f703e6fa3379f1e04bddb44579b6783483bd24f2","name":"Palette_PC@1.csv","type":"text/csv","lastModified":1683999513900.553,"size":706}] 2f:{"title":"Connect the Frames","cells":[{"id":1292,"value":"# Connect the Frames\n## On \"Off the Air\": Part 3","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"## Frame Similarity Scatterplot\n","pinned":false,"hidden":false,"mode":"md"},{"id":954,"value":"viewof cb_episodes = Inputs.checkbox(\n [\"Bliss\", \"Family\", \"Conflict\", \"Coping\", \"Death\", \"Dreams\", \"Love\", \"Nightmares\",\"Paradise\"],\n {\n label: html`Episodes`,\n value: [\"Bliss\", \"Family\", \"Love\",\"Paradise\"],\n width: 'max-content'\n }\n)\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"viewof sb_view = Inputs.select([\"Picture\", \"Audio\", \"Both\"], {\n label: html`Data choice`,\n value: \"Picture\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"thumbnail_curr = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", 1200)\n .attr(\"height\", 180)\n .attr(\"x\", \"600\")\n .attr(\"y\", \"100\");\n \n const imgcon = svg.append(\"svg:image\")\n .attr(\"xlink:href\", img)\n .attr(\"width\", \"550\")\n .attr(\"height\", \"200\")\n .attr(\"x\", \"000\")\n .attr(\"y\", \"00\");\n \n //return svg.node()\n \n return Object.assign(svg.node());\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"## Scene Recommendations","pinned":false,"hidden":false,"mode":"md"},{"id":1078,"value":"viewof sb_color1 = Inputs.select( ['black', 'brown', 'beige', 'pink', 'yellow', 'grey', 'green', 'purple', 'white', 'blue', 'lilac', 'orange' ,'maroon', 'red'], {\n label: html`Color 1`,\n value: \"red\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"viewof sb_color2 = Inputs.select( ['black', 'brown', 'beige', 'pink', 'yellow', 'grey', 'green', 'purple', 'white', 'blue', 'lilac', 'orange' ,'maroon', 'red'], {\n label: html`Color 2`,\n value: \"red\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"viewof sb_color3 = Inputs.select( ['black', 'brown', 'beige', 'pink', 'yellow', 'grey', 'green', 'purple', 'white', 'blue', 'lilac', 'orange' ,'maroon', 'red'], {\n label: html`Color 3`,\n value: \"orange\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"{\n const svg = d3.create(\"svg\")\n .style(\"font-family\", \"Work Sans, sans-serif\")\n .attr(\"width\", 600)\n .attr(\"height\", 50)\n\n const circles = svg.selectAll(\"circle\")\n .data(recommend)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => 30)\n .attr(\"cy\", d => 30)\n .attr(\"r\", d => 20)\n .on(\"click\", function(i,d) { \n window.open(recommend[0]);\n })\n .on(\"mouseover\", function() {\n d3.select(this).style(\"fill\", \"orange\");\n })\n .on(\"mouseout\", function() {\n d3.select(this).style(\"fill\", \"steelblue\");\n });\n \n svg.append('text')\n .attr('width', 300)\n .attr('x', 60)\n .attr('y', 35)\n .style('text-anchor', 'left')\n .style('font-size', '12px')\n .text('Recommended segment of show: ' + recommend[0])\n .on(\"click\", function(i,d) { \n window.open(recommend[0]);\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"**Usage**: Just select three colors (repeats are fine) and it will find you a list of episodes and their timepoints most associated with these three colors. A link to the best match is accessed by clicking on the button above reccomend. It works using the same PCA as above.","pinned":false,"hidden":false,"mode":"md"},{"id":1374,"value":"## NEXT: [Connect the Episodes](https://observablehq.com/d/ba47665a8db5e292)\n### Or [Return to Main Page](https://observablehq.com/d/d01266fb55c1aeeb)","pinned":false,"hidden":false,"mode":"md"},{"id":1290,"value":"### Recommender Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1098,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"function maxKey(countDict){\n let maxValue = -Infinity;\n var maxKey = 0;\n countDict.forEach(function(value, key) {\n if (value > maxValue) {\n maxValue = value;\n maxKey = key;\n }\n });\n\n return maxKey\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"function url_rec(selectedData, maxKey) {\n var frames = selectedData.filter(obj => obj.cat === maxKey).map(obj => obj.frame);\n const mean = d3.mean(frames);\n const diffs = frames.map(d => Math.abs(d - mean));\n const minIndex = diffs.indexOf(d3.min(diffs)); \n const url = show_urls.get(maxKey) + '&t=' + (frames[minIndex]*5).toString()\n return encodeURI(url);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"function colorTorgb(color) {\n if (color === 'black') {\n return 'rgb(0, 0, 0)';\n } else if (color === 'brown') {\n return 'rgb(165, 42, 42)';\n } else if (color === 'beige') {\n return 'rgb(245, 245, 220)';\n } else if (color === 'pink') {\n return 'rgb(255, 192, 203)';\n } else if (color === 'yellow') {\n return 'rgb(255, 255, 0)';\n } else if (color === 'grey') {\n return 'rgb(128, 128, 128)';\n } else if (color === 'green') {\n return 'rgb(0, 128, 0)';\n } else if (color === 'purple') {\n return 'rgb(128, 0, 128)';\n } else if (color === 'white') {\n return 'rgb(255, 255, 255)';\n } else if (color === 'blue') {\n return 'rgb(0, 0, 255)';\n } else if (color === 'lilac') {\n return 'rgb(200, 162, 200)';\n } else if (color === 'orange') {\n return 'rgb(255, 165, 0)';\n } else if (color === 'maroon') {\n return 'rgb(128, 0, 0)';\n } else if (color === 'red') {\n return 'rgb(255, 0, 0)';\n } else {\n return null; // return null if color is not recognized\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"function rgbToHsv(rgb) {\n // Parse RGB components from string\n const match = rgb.match(/^rgb\$(\\d+),\\s*(\\d+),\\s*(\\d+)\$$/);\n const R = Number(match[1]);\n const G = Number(match[2]);\n const B = Number(match[3]);\n\n // Convert RGB to HSV\n let h, s, v;\n const max = Math.max(R, G, B), min = Math.min(R, G, B);\n const d = max - min;\n v = max / 255.0;\n if (max === 0) {\n s = 0;\n } else {\n s = d / max;\n }\n if (max === min) {\n h = 0;\n } else {\n switch (max) {\n case R: h = (G - B) / d + (G < B ? 6 : 0); break;\n case G: h = (B - R) / d + 2; break;\n case B: h = (R - G) / d + 4; break;\n }\n h /= 6;\n }\n\n // Return HSV object\n return {h, s, v};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"mutable img = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"### Data Loading and Processor","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"testing1 = await FileAttachment(\"testing@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"testing1","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"testing2 = await FileAttachment(\"testing2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"testing2","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"palette_pc = await FileAttachment(\"Palette_PC@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"palette_pc[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"show_urls = new Map([\n ['Bliss', 'https://www.youtube.com/watch?v=5sJxOAO1wNA'],\n ['Family', 'https://www.youtube.com/watch?v=TzBqOShAVzI'],\n ['Conflict', 'https://www.youtube.com/watch?v=BJwp_uCpSUQ'],\n ['Coping', 'https://www.youtube.com/watch?v=KOtSYgHiLyc'],\n ['Death', 'https://www.youtube.com/watch?v=zBXDQEAEwck'],\n ['Dreams', 'https://www.youtube.com/watch?v=vWiCVO3X_Ec'],\n ['Love', 'https://www.youtube.com/watch?v=ZKCXGo4AuKg'],\n ['Nightmares', 'https://www.youtube.com/watch?v=jplkppP_Icg'],\n ['Paradise', 'https://www.youtube.com/watch?v=WVeq4-2Z0n8']\n]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"aud_pc = await FileAttachment(\"Aud_PC2@2.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"pic_pc = await FileAttachment(\"Pic_PC2@2.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"vid_pc = await FileAttachment(\"Vid_PC2@2.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"combined1 = await FileAttachment(\"combined2@2.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}