31:T1a3a,network = { const max_episodes = d3.max(actors.map(d=>d.total_episodes)); const strokeColor = "black"; const highlightStroke = "pink"; const imgLength = 24; const imgWidth = 24; const radiusMultiplier = 30 / max_episodes; const lineWidth = 1; const showNodeFill = showColor; const showNodeStroke = "black"; const lineHeight = 16; const fontColor = "white"; const fontFamily= "Oswald"; const minRadius = max_episodes * .3; const showRadius = 30; const textRadiusMultiplier = 0.7; const width = 600; const links = data.links; // Reuse the same nodes to have the animation work when changing the inputs const nodes = data.nodes; function getRadius(node) { const getEpisodes = actors.find((i) => i.name === node.id); const totalEpisodes = getEpisodes ? getEpisodes.total_episodes : 0; let effectiveEpisodes; if (actorRadius === "Episode Count" & totalEpisodes > minRadius) { effectiveEpisodes = totalEpisodes * radiusMultiplier; } else if(actorRadius == "Episode Count" & totalEpisodes <= minRadius){ effectiveEpisodes = minRadius * radiusMultiplier } else if (actorRadius === "Default") { effectiveEpisodes = showRadius/2; } else { // Handle other cases here if needed effectiveEpisodes = 0; // Default value when actorRadius is not recognized } return effectiveEpisodes; } const simulation = d3.forceSimulation(nodes) .alpha(1) .force("link", d3.forceLink(links).id(d => d.id).distance(30).strength(0.25)) .force("charge", d3.forceManyBody()) .force("collision", d3.forceCollide().radius(d=> d.group === 'Show' ? showRadius *1.15 : getRadius(d)*1.1)) .force("collide", collide ? d3.forceCollide(11).iterations(4): null) .force( "position", useRadial ? d3 .forceRadial( (d) => (d.id.includes("Drag Race") ? width*0.01 : width * 0.5), width / 2, height / 2 ) .strength(radialForce) : null ) .force("x", d3.forceX(width/2)) .force("y", d3.forceY(height/2).strength(0.1*width/height)) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .style("overflow", "hidden") .attr("viewBox", [0, 0, width, height]); const nodeMouseOver = (d, links) => { tooltip.style("visibility", "visible") .html(createTooltipText(links, d.id, actors, d.group)); node .transition(500) .style('opacity', o => { console.log("o", o, d); const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 1.0; } return 0.1; }); link .transition(500) .style('stroke-opacity', o => { console.log(o.source.id === d.id) return (o.source.id === d.id || o.target.id === d.id ? 1 : 0.1) }) .transition(500) .attr('marker-end', o => (o.source.id === d.id || o.target.id === d.id ? 'url(#arrowhead)' : 'url()')); } const nodeMouseOut = (e, d) => { tooltip.style("visibility", "hidden"); node .transition(500) .style('opacity', 1); link .transition(500) .style("stroke-opacity", o => { console.log(o.value) }); }; const tooltip = d3.select("body").append("div") .attr("class", "toolTip") .style("position", "absolute") .style("visibility", "hidden") .text("Placeholder"); // create link reference let linkedByIndex = {}; data.links.forEach(d => { linkedByIndex[`${d.source.id},${d.target.id}`] = true; }); // nodes map let nodesById = {}; data.nodes.forEach(d => { nodesById[d.id] = {...d}; }) const isConnectedAsSource = (a, b) => linkedByIndex[`${a},${b}`]; const isConnectedAsTarget = (a, b) => linkedByIndex[`${b},${a}`]; const isConnected = (a, b) => isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a === b; const link = svg.append("g") .attr("stroke", "#D0D0D0") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => lineWidth); const node = svg.append("g") .selectAll(".node") .data(nodes) .enter() .append("g") .attr('class', 'node') .call(drag(simulation)); // Iterate through each node node.each(function (d) { const currentNode = d3.select(this); const radius = d.group === 'Show' ? showRadius : getRadius(d); const textRadius = d.group === 'Show' ? showRadius *textRadiusMultiplier : getRadius(d) * textRadiusMultiplier; const labelText = d.id; // Use the 'id' property from the data // Create a circle for each node currentNode.append('circle') .attr("r", radius) .attr("fill", d.group === 'Show' ? showNodeFill : 'black') .attr("stroke", "black"); // Create text label for each node based on 'id' currentNode.append("text") .style("text-anchor", "middle") .attr("transform", `translate(0, 0) scale(${textRadius / getTextRadius(getLines(labelText, lineHeight), lineHeight)})`) .selectAll("tspan") .data(getLines(labelText, lineHeight)) .enter() .append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - getLines(labelText, lineHeight).length / 2 + 0.8) * lineHeight) .style("font-family", "Oswald") .style("fill", fontColor) .text(d => d.text); if (actorNodeStyle === "Image") { currentNode.append("image") .attr("class","headshot") .attr("x", (d) => -getRadius(d)) .attr("y", (d) => -getRadius(d)) .attr("width", (d) => getRadius(d)*2) .attr("href", (d) => { const matchingRefImg = actors.find((i) => i.name === d.id); return matchingRefImg ? matchingRefImg.image_url : ""; }) .style("clip-path", (d) => { const getEpisodes = actors.find((i) => i.name === d.id); return getEpisodes ? "circle(" + getRadius(d) + "px at " + getRadius(d) + "px " + getRadius(d) + "px)" : radius;// }) } currentNode.append('circle') .attr('fill', 'transparent') .attr("r", radius) .attr("stroke", "black") .on("mouseover", (e, d) => nodeMouseOver(d, data.links)) .on("mouseout", nodeMouseOut) .on('mousemove', (event) => tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px")); }); const tick = () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("transform", d => `translate(${d.x}, ${d.y})`); }; simulation.on("tick", tick); invalidation.then(() => simulation.stop()); tick(); return svg.node(); }32:[{"id":"8747b25c5ecbaa960439a74efd10706b15430e3ac4795c3e6c90377e3f5b0f1223dff2bd516779cea0074d1826ba5a29dcf62a53ed704d05231c0fc24f638539","href":"https://static.observableusercontent.com/files/8747b25c5ecbaa960439a74efd10706b15430e3ac4795c3e6c90377e3f5b0f1223dff2bd516779cea0074d1826ba5a29dcf62a53ed704d05231c0fc24f638539","name":"murphy_cast.csv","type":"text/csv","lastModified":1697986888840.628,"size":610738},{"id":"dc4906de38b0419e6b1cb3fde407ee8a7891297eeca042e78bde58874fa215a284ae5be6164ed8891af2797efb7c69466a6168079e7f7d59134f64ff5f3783c4","href":"https://static.observableusercontent.com/files/dc4906de38b0419e6b1cb3fde407ee8a7891297eeca042e78bde58874fa215a284ae5be6164ed8891af2797efb7c69466a6168079e7f7d59134f64ff5f3783c4","name":"murphy@1.json","type":"application/json","lastModified":1697986888840.628,"size":35882},{"id":"645abb2837cbb02fcfb714633d2d7fb271dea612b397e27addca45e63b2346e3d8ab7951cc7a53fbea4c3e638701dd4d6dbb0a113e470a61fb0ae6d1065b2ff3","href":"https://static.observableusercontent.com/files/645abb2837cbb02fcfb714633d2d7fb271dea612b397e27addca45e63b2346e3d8ab7951cc7a53fbea4c3e638701dd4d6dbb0a113e470a61fb0ae6d1065b2ff3","name":"flanagan.json","type":"application/json","lastModified":1697997332731.081,"size":8614},{"id":"b66e017c324c864cd04382bb32d96c90a058e850dd295dada45169466269831023745ee32f513e8085309a22a71a96ea7efc69a8a47ffa8f87206cc139301528","href":"https://static.observableusercontent.com/files/b66e017c324c864cd04382bb32d96c90a058e850dd295dada45169466269831023745ee32f513e8085309a22a71a96ea7efc69a8a47ffa8f87206cc139301528","name":"cast.csv","type":"text/csv","lastModified":1697997416714.684,"size":38696},{"id":"067dc0bc60aa6117df205ba0eebc04bd2620ad64e0bba77af7ea012d63e0d04c248fe85789472ff606b4c6b532d6b19eae763a4fcedb107f1032f754f15aaef8","href":"https://static.observableusercontent.com/files/067dc0bc60aa6117df205ba0eebc04bd2620ad64e0bba77af7ea012d63e0d04c248fe85789472ff606b4c6b532d6b19eae763a4fcedb107f1032f754f15aaef8","name":"whedon_cast.csv","type":"text/csv","lastModified":1698000171514.565,"size":356285},{"id":"da78f5630ef767cff7a9cd111c7987cde4f719ce41c2eae91474904c2296530b1de90bb17b870260c565c3aabc76d2c38ab441a9c6e3ae17b6636ab27e58279d","href":"https://static.observableusercontent.com/files/da78f5630ef767cff7a9cd111c7987cde4f719ce41c2eae91474904c2296530b1de90bb17b870260c565c3aabc76d2c38ab441a9c6e3ae17b6636ab27e58279d","name":"whedon.json","type":"application/json","lastModified":1698000182416.35,"size":24432}] 2f:{"title":"TV Shows - Cast Connections","cells":[{"id":0,"value":"# TV Shows - Cast Connections\nD3 Network Diagram exploring overlapping actors within specific universes. Universe is determined by TV Show Creator. Data from [The Movide Database tmdb](https://developer.themoviedb.org/reference/search-movie). A user explore a different universe using the TV Creator dropdown.\n\nCode shout out to Mike Bostock - this would not happen without his notebook explaining how to center [text within circles](https://observablehq.com/@mbostock/fit-text-to-circle)...I repurposed Mike's code and created a function to apply text in this graphic. Thanks Mike, not all heroes wear capes :) ","pinned":false,"hidden":false,"mode":"md"},{"id":773,"value":"viewof tvDirector = Inputs.select([\"Mike Flanagan\", \"Ryan Murphy\", \"Joss Whedon\"], {label: \"TV Creator\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"viewof height = Inputs.range([10, 1200], {label: \"Height\", value: 500, step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"viewof collide = Inputs.toggle({ label: \"Collide\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"viewof useRadial = Inputs.toggle({ label: \"Use Radial Force\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"viewof radialForce = Inputs.range([0.01, 0.9], {\n step: 0.01,\n value: this?.value || 0.25,\n label: \"Radial Force Strength\",\n disabled: !useRadial\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"viewof showColor = Inputs.color({label: \"Show Color\", value: \"#532aea\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"viewof actorRadius = Inputs.radio([\"Default\", \"Episode Count\"], {label: \"Actor Radius\", value: \"Episode Count\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"viewof actorNodeStyle = Inputs.radio([\"Name\", \"Image\"], {label: \"Actor Node Style\", value: \"Image\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"### Text in Circle Functions adapted from Mike Bostock","pinned":false,"hidden":false,"mode":"md"},{"id":236,"value":"function getLines(text, lineHeight) {\n const text_array = [text]\n const words = text_array[0].split(/\\s+/g);\n\n function measureWidth() {\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n return text => context.measureText(text).width;\n }\n\n const targetWidth = Math.sqrt(measureWidth()(text) * lineHeight);\n\n const lines = (function() {\n let line;\n let lineWidth0 = Infinity;\n const lines = [];\n for (let i = 0, n = words.length; i < n; ++i) {\n let lineText1 = (line ? line.text + \" \" : \"\") + words[i];\n let lineWidth1 = measureWidth()(lineText1);\n if ((lineWidth0 + lineWidth1) / 2 < targetWidth) {\n line.width = lineWidth0 = lineWidth1;\n line.text = lineText1;\n } else {\n lineWidth0 = measureWidth()(words[i]);\n line = { width: lineWidth0, text: words[i] };\n lines.push(line);\n }\n }\n return lines;\n })();\n\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"\nfunction getTextRadius (lines, lineHeight) {\n let radius = 0; \n for (let i = 0, n = lines.length; i < n; ++i) {\n const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight;\n const dx = lines[i].width / 2;\n radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2));\n }\n\n return radius;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"### Tooltip Function","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"function createTooltipText (links, id, reference, group) {\n const regex = /S\\d+/;\n const sourceLinks = links.filter(link => link.source.id === id);\n const targetLinks = links.filter(link => link.target.id === id); \n const ref = reference.filter(d => d.name === id); \n if (group === 'Show') {\n const count = sourceLinks.length;\n return `${id} has a total of ${count} actor${count === 1 ? '' : 's'}`;\n }\n else {\n const count = targetLinks.length;\n return `${id} appeared on ${count} show${count === 1 ? '' : 's'} and a total of ${ref[0].total_episodes} episodes`;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"### Drag D3 Function","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"## Import Data","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"### Network JSON Data\nData taken from tmdb's API. I wrangled data in R and exported to explore in this notebook. Data sets for different creators, including Ryan Murphy, Mike Flanagan, and Joss Whedon.","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":"murphy = FileAttachment(\"murphy@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"flanagan = FileAttachment(\"flanagan.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:flanagan_cast"},{"id":851,"value":"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:flanagan_cast"},{"id":820,"value":"whedon = FileAttachment(\"whedon.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"max_episodes = d3.max(actors.map(d=>d.total_episodes))","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"### CSV attachment with Cast Info and Image URLs\nThis will be handy to plot actor images.","pinned":false,"hidden":false,"mode":"md"},{"id":817,"value":"whedon_cast = await FileAttachment(\"whedon_cast.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"murphy_cast = await FileAttachment(\"murphy_cast.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"flanagan_cast = await FileAttachment(\"cast.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":785,"value":"### Dynamic Data\nSwap out data set depending on TV director/creator selected.","pinned":false,"hidden":false,"mode":"md"},{"id":792,"value":"db = DuckDBClient.of({\n show_cast: tvDirector === 'Mike Flanagan' ? flanagan_cast : tvDirector === 'Ryan Murphy' ? murphy_cast : whedon_cast\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"data = tvDirector === 'Mike Flanagan' ? flanagan : tvDirector === 'Ryan Murphy' ? murphy : whedon;","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"select name, image_url, sum(episode_count) as total_episodes \nfrom show_cast\ngroup by 1,2","pinned":true,"hidden":false,"mode":"sql","output":"actors","database":"var:db"},{"id":800,"value":"## CSS","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}