44:["$","title",null,{"children":"Is Star Wars \"Species-ist?\" | Ben Oliver | Observable"}] 4c:T4f1,# Is **_Star Wars_** "Species-ist?" For being set in a science fiction world with a wealth of wacky and wild alien species, there are not many main characters in **_Star Wars_** that are truly "main characters." In **_The Empire Strikes Back_**, there is Yoda, and in **_Return of the Jedi_** you can argue there is Wicket, but there are not even many side characters that are aliens in the original trilogy. In the prequel trilogy (mostly due to advances in CGI) there is definitely an increase in alien characters. Does this increase in alien characters lead to an increase in prominence for aliens? I examined **_The Phantom Menace_** for this project, as Jar-Jar Binks is probably the most (in)famous alien main character in **_Star Wars_**. More specifically, since closeness and centrality in a force directed graph are correlated with imortance and closeness, are human characters are more central in the network compared to non-human species? --- Data from [Star Wars Social Network](https://www.kaggle.com/datasets/ruchi798/star-wars) on Kaggle, with extra information (species, faction, and gender) added by me. Original `ForceGraph()` code was created by [d3](https://observablehq.com/@d3/force-directed-graph-component), and modified by myself. ---4d:T14c7,// Copyright 2021-2024 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/force-directed-graph function ForceGraph({ nodes, // an iterable of node objects (typically [{id}, …]) links // an iterable of link objects (typically [{source, target}, …]) }, { nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeTitle, // given d in nodes, a title string nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke = "#fff", // node stroke color nodeStrokeWidth = 1.5, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius = 5, // node radius, in pixels nodeStrength, linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkStroke = "#777", // link stroke color linkStrokeOpacity = 0.6, // link stroke opacity linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap linkStrength, colors = d3.schemeTableau10, // an array of color strings, for the node groups width = 640, // outer width, in pixels height = 400, // outer height, in pixels invalidation // when this promise resolves, stop the simulation } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const R = typeof nodeRadius !== "function" ? null : d3.map(nodes, nodeRadius); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]; const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : typeof colors === 'function' ? colors : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody(); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .on("tick", ticked); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const link = svg.append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line"); const node = svg.append("g") .attr("fill", nodeFill) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .selectAll("circle") .data(nodes) .join("circle") .attr("r", nodeRadius) .call(drag(simulation)); if (W) link.attr("stroke-width", ({index: i}) => W[i]); if (L) link.attr("stroke", ({index: i}) => L[i]); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (R) node.attr("r", ({index: i}) => R[i]); if (T) node.append("title").text(({index: i}) => T[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } function ticked() { 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("cx", d => d.x) .attr("cy", d => d.y); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return Object.assign(svg.node(), {scales: {color}}); }4e:T1a41,function ForceGraphModified({ nodes, links }, { nodeId = d => d.id, nodeGroup, nodeGroups, nodeTitle, nodeFill = "currentColor", nodeStroke = "#fff", nodeStrokeWidth = 1.5, nodeStrokeOpacity = 1, nodeRadius = 5, nodeStrength, linkSource = ({source}) => source, linkTarget = ({target}) => target, linkStroke = "#777", linkStrokeOpacity = 0.6, linkStrokeWidth = 1.5, linkStrokeLinecap = "round", linkStrength, colors = d3.schemeTableau10, width = 640, height = 400, invalidation, title } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const R = typeof nodeRadius !== "function" ? null : d3.map(nodes, nodeRadius); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); // Create a new variable for nodeTitle const nodeTitleFunction = nodeTitle === undefined ? ((_, i) => N[i]) : nodeTitle; const T = nodeTitleFunction == null ? null : d3.map(nodes, nodeTitleFunction); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (d, i) => Object.assign({}, d, {id: N[i]})); links = d3.map(links, (d, i) => Object.assign({}, d, {source: LS[i], target: LT[i]})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : typeof colors === 'function' ? colors : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody(); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .on("tick", ticked); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Define tooltips for nodes and links const tip = d3tip() .attr('class', 'd3-tip') .html(d => { // Customize the content of the node tooltip return `Name: ${d.name}
Scenes: ${d.value}
Species: ${d.species}
Faction: ${d.faction}
Gender: ${d.gender}`; }); const linkTip = d3tip() .attr('class', 'd3-tip') .html(d => `${d.source.name}
${d.target.name}
Scenes Together: ${d.value}`); // Attach tooltips to the SVG svg.call(tip); svg.call(linkTip); // Build a dictionary of connected nodes const linkedByIndex = {}; links.forEach(d => { linkedByIndex[`${d.source.index},${d.target.index}`] = true; }); function areConnected(a, b) { return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`]; } const link = svg.append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line") .on('mouseover', function(event, d) { // Highlight the hovered link and connected nodes link.style('opacity', o => o === d ? 1 : 0.1); node.style('opacity', o => o === d.source || o === d.target ? 1 : 0.1); linkTip.show(d, this); // Show the tooltip }) .on('mouseout', function(event, d) { // Reset opacity link.style('opacity', 1); node.style('opacity', 1); linkTip.hide(d, this); // Hide the tooltip }); const node = svg.append("g") .attr("fill", nodeFill) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .selectAll("circle") .data(nodes) .join("circle") .attr("r", nodeRadius) .call(drag(simulation)) .on('mouseover', function(event, d) { // Highlight connected nodes and links node.style('opacity', o => areConnected(d, o) ? 1 : 0.1); link.style('opacity', o => o.source === d || o.target === d ? 1 : 0.1); tip.show(d, this); // Show the node tooltip }) .on('mouseout', function(event, d) { // Reset opacity node.style('opacity', 1); link.style('opacity', 1); tip.hide(d, this); // Hide the node tooltip }); // Apply styles based on data if (W) link.attr("stroke-width", ({index: i}) => W[i]); if (L) link.attr("stroke", ({index: i}) => L[i]); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (R) node.attr("r", ({index: i}) => R[i]); if (T) node.append("title").text(({index: i}) => T[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); if (title) { svg.append("text") .attr("x", -width / 2 + 180) .attr("y", -height / 2 + 20) // Position at the top left .attr("text-anchor", "middle") .attr("font-size", "24px") .attr("fill", "black") .text(title); } function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([0.5, 8]) .on("zoom", zoomed)); function zoomed(event) { svg.selectAll('g').attr("transform", event.transform); } function ticked() { 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("cx", d => d.x) .attr("cy", d => d.y); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return Object.assign(svg.node(), {scales: {color}}); } 4f:[{"id":"42a35a4509379c3f643f5d9f33c494738eaf0505e2e471073beaacca1b4dc9f7ff465d1e0d5032c385dab9107c26822264736b2b1f576e50ae13912e3017a82f","href":"https://static.observableusercontent.com/files/42a35a4509379c3f643f5d9f33c494738eaf0505e2e471073beaacca1b4dc9f7ff465d1e0d5032c385dab9107c26822264736b2b1f576e50ae13912e3017a82f","name":"starwars@13.json","type":"application/json","lastModified":1731046688728.218,"size":17379}] 48:{"id":"32e120f5127b9ced","slug":"project-4-the-network","title":"Is Star Wars \"Species-ist?\"","thumbnail":"ba4d0bb3347ebfa790bb479f837ef00881ee9589f58253e58308294cf6a6e13e","access_level":"unlisted","create_time":"$D2024-11-03T21:47:29.941Z","update_time":"$D2024-11-15T17:38:58.065Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"146bb800b87ac42c","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/a23317358e59ce3f36c17b9cc6fb372b110b82005792fb60e51c7fd985ec9460","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":556,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"42973841b2b730da","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/b9ff4cb31ca9911e61c547136194e1473087214dd7ee051897935025ef6ab2d1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"146bb800b87ac42c","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/a23317358e59ce3f36c17b9cc6fb372b110b82005792fb60e51c7fd985ec9460","tier":"starter_2024","role":"editor"},{"type":"individual","id":"42973841b2b730da","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/b9ff4cb31ca9911e61c547136194e1473087214dd7ee051897935025ef6ab2d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Is Star Wars \"Species-ist?\"","cells":[{"id":0,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"chart1 = ForceGraph(sw, {\n nodeId: d => d.id,\n nodeGroup: d => d.group,\n nodeTitle: d => `${d.id}\\n${d.value}`,\n linkStrokeWidth: 1,\n width,\n height: 600,\n invalidation // a promise to stop the simulation when the cell is re-run\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"# First Revision\n\nIt took a little bit of massaging on my JSON to be in a format more agreeable to `ForceGraph()`, but I was able to get it displayed. This thing is way too small and it can't read the colors that were built in to the original data, so all nodes are colored indistinguishably. There are tooltip labels, but they are ugly and give no useful data. Characters are linked if they both speak in the same scene.\n\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"chart2 = ForceGraph(sw, {\n nodeId: d => d.id, // Use name as the unique identifier for each node\n nodeGroup: d => d.colour, // Use colour property to define color directly\n nodeTitle: d => `${d.name}\\nValue: ${d.value}`, // Display name and value in the tooltip\n linkStrokeWidth: l => 1.5*Math.sqrt(l.value), // Keep link width based on value\n width,\n height: 1000,\n invalidation, // a promise to stop the simulation when the cell is re-run\n nodeStrength: -500, // Higher negative value to push nodes apart\n linkStrength: 0.15 // Lower value to reduce pull between nodes\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"# Revision 2\n\nI tweaked some of the forces on the graph to make it display a little better, so it fills out the working space a little nicer. Edge thickness is now read in from the JSON. Edge thickness is determined by `value` for each link in my JSON, which is the total number of scenes each character appeared in together. However, colors still aren't reading in form my JSON and neither is the radius of each node. The distance between a node A and a node B becomes shorter if the character at node A speaks in the same scene with the character at node B more frequently.\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"chart3 = ForceGraph(sw, {\n nodeId: d => d.id, \n nodeGroup: d => d.character, // Use dynamic colorScale\n nodeTitle: d => `${d.name}\\nValue: ${d.value}\\nSpecies: ${d.species}\\nFaction: ${d.faction}\\nGender: ${d.gender}`, \n nodeRadius: d => {\n const minRadius = .1; // Set a minimum radius\n const maxRadius = 25; // Set a max limit for larger nodes\n const baseValue = d.value;\n\n // Logarithmic scaling with a base that keeps smaller values closer in size\n const scaledValue = Math.log(baseValue); // log1p(x) is log(x + 1) to keep values reasonable\n\n // Normalize and scale\n return Math.min(maxRadius, Math.max(minRadius, scaledValue * 5));\n},\n linkStrokeWidth: l => 1.5 * Math.sqrt(l.value),\n width,\n height: 1000,\n invalidation,\n nodeStrength: -500,\n linkStrength: 0.15\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"# Revision 3\n\nI gave up on reading in colors from the JSON, and I personally edited it so each node had a new data point `character`. If the node is a main character, `character` is their name, otherwise it is the string \"Side Character.\" Each unique string of `character` gets a new color, but there is one slight issue. The built in d3 color scheme only has 10 colors, and there are 12 unique strings, so some colors can be repeated. C-3P0 and Yoda are both orange nodes on this graph, yet there are distinct nodes with unique values. There are now also tooltips with useful information about each node, such as their name, faction affiliation, species, and gender. The radii of the nodes are now unique too, with the size of each node being determined by the number of scenes each character is in.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"viewof groupBy2 = Inputs.radio(\n [\"character\", \"species\", \"faction\", \"gender\"],\n { label: \"Color nodes by:\", value: \"character\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"chart4 = ForceGraph(sw, {\n nodeId: d => d.id,\n nodeGroup: d => d[groupBy2],\n nodeTitle: d => `${d.name}\\nValue: ${d.value}\\nSpecies: ${d.species}\\nFaction: ${d.faction}\\nGender: ${d.gender}`,\n nodeRadius: d => {\n const minRadius = .1; // Set a minimum radius\n const maxRadius = 25; // Set a max limit for larger nodes\n const baseValue = d.value;\n\n // Logarithmic scaling with a base that keeps smaller values closer in size\n const scaledValue = Math.log(baseValue)\n\n // Normalize and scale\n return Math.min(maxRadius, Math.max(minRadius, scaledValue * 5));\n},\n linkStrokeWidth: l => l.value,\n width,\n height: 850,\n nodeStrength: -2500,\n linkStrength: .7,\n // Pass the color scale to the ForceGraph\n colors: colorScale1\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"legend2 = {\n const data = Array.isArray(sw) ? sw : sw.nodes || [];\n if (!Array.isArray(data) || data.length === 0) {\n throw new TypeError(\"Unable to find an array of nodes in sw.\");\n }\n\n // Use the domain of colorScale to ensure unique values are correctly represented\n const uniqueValues = colorScale1.domain();\n\n return html`

\n ${uniqueValues.map(value => {\n const color = colorScale1(value);\n return html`

\n \n ${value}\n

`;\n })}\n

\n ${uniqueValues.map(value => {\n const color = colorScale2(value);\n return html`

\n \n ${value}\n

`;\n })}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"# Revision 5\n\nPretty proud of this finished deliverable. I added some cool d3 customization in. Now each node and each edge has a custom d3 tooltip showing either information about the character or the number of shared scenes between the two characters, respectively. Additionally, you can pan and zoom the graph. The coolest feature, in my opinion, is when you hover a node or edge. Not only is there the tooltip, but unattached nodes or edges fade out, allowing the connections to be seen very clearly. I also realized I forgot a title, so I added one in d3.\n\n---\n\n# Conclusion\n\nWhen the color scheme is changed to be species-based, it becomes abundantly obvious that humans are still the driving force in **_Star Wars_**. Jar Jar is large and central, but it doesnt come close to the sheer volume and size of human nodes. R2D2 is pretty large as a droid too, but he too is an outlier in a sea of humans.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"### Setup Below\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"d3tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"colorScale1 = {\n const uniqueValues = Array.from(new Set((Array.isArray(sw) ? sw : sw.nodes || []).map(d => d[groupBy2])));\n const extendedScheme = ['#8de4d3', '#f1a970', '#d34fd9', '#788c3b', '#628df2', '#8a1b07', '#7c747f', '#422fae', '#f90da0', '#50e316', '#732a66', '#d3cb04'];\n return d3.scaleOrdinal(extendedScheme).domain(uniqueValues);\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"colorScale2 = {\n const uniqueValues = Array.from(new Set((Array.isArray(sw) ? sw : sw.nodes || []).map(d => d[groupBy3])));\n const extendedScheme = ['#8de4d3', '#f1a970', '#d34fd9', '#788c3b', '#628df2', '#8a1b07', '#7c747f', '#422fae', '#f90da0', '#50e316', '#732a66', '#d3cb04'];\n return d3.scaleOrdinal(extendedScheme).domain(uniqueValues);\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"sw = FileAttachment(\"starwars@13.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null