2b:null 2c:["$","title",null,{"children":"Day 17: #30DayChartChallenge. Family Guy. Collaboration among directors and writers by number of episodes | Roman Sverdan | Observable"}] 31:T1dd8,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/sankey-diagram function SankeyChart( { nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing links // an iterable of link objects (typically [{source, target}, …]) }, { format = ",", // a function or format specifier for values in titles align = "justify", // convenience shorthand for nodeAlign 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 nodeLabel, // given d in (computed) nodes, text to label the associated rect nodeTitle = (d) => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, hover text nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center nodeWidth = 15, // width of node rects nodePadding = 10, // vertical separation between adjacent nodes nodeLabelPadding = 6, // horizontal separation between node and label nodeStroke = "currentColor", // stroke around node rects nodeStrokeWidth, // width of stroke around node rects, in pixels nodeStrokeOpacity, // opacity of stroke around node rects nodeStrokeLinejoin, // line join for stroke around node rects linkSource = ({ source }) => source, // given d in links, returns a node identifier string linkTarget = ({ target }) => target, // given d in links, returns a node identifier string linkValue = ({ value }) => value, // given d in links, returns the quantitative value linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path linkTitle = (d) => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = "source-target", // source, target, source-target, or static color linkStrokeOpacity = 0.5, // link stroke opacity linkMixBlendMode = "multiply", // link blending mode colors = d3.schemeTableau10, // array of colors width = 640, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 5, // top margin, in pixels marginRight = 1, // right margin, in pixels marginBottom = 5, // bottom margin, in pixels marginLeft = 1 // left margin, in pixels } = {} ) { // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3). if (typeof nodeAlign !== "function") nodeAlign = { left: d3Sankey.sankeyLeft, right: d3Sankey.sankeyRight, center: d3Sankey.sankeyCenter }[nodeAlign] ?? d3Sankey.sankeyJustify; // Compute values. const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); const LV = d3.map(links, linkValue); if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), (id) => ({ id })); const N = d3.map(nodes, nodeId).map(intern); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); // 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], value: LV[i] })); // Ignore a group-based linkColor option if no groups are specified. if (!G && ["source", "target", "source-target"].includes(linkColor)) linkColor = "currentColor"; // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = G; // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Compute the Sankey layout. d3Sankey .sankey() .nodeId(({ index: i }) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .extent([ [marginLeft, marginTop], [width - marginRight, height - marginBottom] ])({ nodes, links }); // Compute titles and labels using layout nodes, so as to access aggregate values. if (typeof format !== "function") format = d3.format(format); const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel); const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const Lt = linkTitle == null ? null : d3.map(links, linkTitle); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const node = svg .append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-linejoin", nodeStrokeLinejoin) .selectAll("rect") .data(nodes) .join("rect") .attr("class", (d) => d.id.replace(" ", "-")) // added a class name to pick elements on hover .attr("x", (d) => d.x0) .attr("y", (d) => d.y0) .attr("height", (d) => d.y1 - d.y0) .attr("width", (d) => d.x1 - d.x0) .on("mousemove", (i, d) => { showColaborations(d); }) .on("mouseout", reset); if (G) node.attr("fill", ({ index: i }) => color(G[i])); if (Tt) node.append("title").text(({ index: i }) => Tt[i]); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", linkMixBlendMode); if (linkColor === "source-target") link .append("linearGradient") .attr("id", (d) => `${uid}-link-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) .attr("x2", (d) => d.target.x0) .call((gradient) => gradient .append("stop") .attr("offset", "0%") .attr("stop-color", ({ source: { index: i } }) => color(G[i])) ) .call((gradient) => gradient .append("stop") .attr("offset", "100%") .attr("stop-color", ({ target: { index: i } }) => color(G[i])) ); link .append("path") .attr( "class", (d) => `${d.source.id.replace(" ", "-")} ${d.target.id.replace(" ", "-")}` ) // added a class name to pick elements on hover .attr("d", linkPath) .attr( "stroke", linkColor === "source-target" ? ({ index: i }) => `url(#${uid}-link-${i})` : linkColor === "source" ? ({ source: { index: i } }) => color(G[i]) : linkColor === "target" ? ({ target: { index: i } }) => color(G[i]) : linkColor ) .attr("stroke-width", ({ width }) => Math.max(1, width)) .call( Lt ? (path) => path.append("title").text(({ index: i }) => Lt[i]) : () => {} ); if (Tl) svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => d.x0 < width / 2 ? d.x1 + nodeLabelPadding : d.x0 - nodeLabelPadding ) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text(({ index: i }) => Tl[i]); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } return Object.assign(svg.node(), { scales: { color } }); }32:[{"id":"c831ad4b46c1d946d1b32cb6c83a8723767fd75a2adb01bcc381166e47d2160c7c6f5de70cdc11fb8b5e8708aa57641c55329bd109884a17007818f009bad269","href":"https://static.observableusercontent.com/files/c831ad4b46c1d946d1b32cb6c83a8723767fd75a2adb01bcc381166e47d2160c7c6f5de70cdc11fb8b5e8708aa57641c55329bd109884a17007818f009bad269","name":"Family Guy Dataset.csv","type":"text/csv","lastModified":1681746305341.244,"size":475006}] 2f:{"id":"fc9e74f288e5821e","slug":"30daychartchallenge-day-17","title":"Day 17: #30DayChartChallenge. Family Guy. Collaboration among directors and writers by number of episodes","thumbnail":"3fafd8106bf1ed6e6e3a533cfc40646468b1fd6067cdb0d8a8e90d51e0071cfe","access_level":"public","create_time":"$D2023-04-17T15:44:31.790Z","update_time":"$D2023-04-17T16:12:39.394Z","view_time":null,"first_public_time":"$D2023-04-17T15:44:31.790Z","fork":{"id":"99b2e903e7df3b0a","slug":"sankey-component","title":"Sankey diagram component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":718,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null}],"members":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6909a3a6854e8e08","slug":"30daychartchallenge-2023","title":"#30DayChartChallenge 2023","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"Day 17: #30DayChartChallenge. Family Guy. Collaboration among directors and writers by number of episodes","cells":[{"id":0,"value":"# Day 17: #30DayChartChallenge. Family Guy. Collaboration among directors and writers by number of episodes\n\n\n\nData source: Kaggle
\nOriginal chart code available here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"

\n Directors\n

\n Writters\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"chart = SankeyChart(\n {\n links: colaborations\n },\n {\n nodeGroup: (d) => d.id.split(/\\W/)[0],\n nodeAlign: \"justify\",\n linkColor: \"source\", // e.g., \"source\" or \"target\"; set by input above\n format: (\n (f) => (d) =>\n `${f(d)} Episodes`\n )(d3.format(\",.1~f\")),\n width,\n height: 700\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"function showColaborations(d) {\n const currentNode = d.id.replace(\" \", \"-\");\n const linkedNodes = [];\n\n var sourceTarget = [\n {\n linkType: \"sourceLinks\",\n nodeType: \"target\"\n },\n {\n linkType: \"targetLinks\",\n nodeType: \"source\"\n }\n ];\n\n sourceTarget.forEach((el) => {\n d[el.linkType].forEach((l) => {\n linkedNodes.push(l[el.nodeType]);\n });\n });\n\n d3.selectAll(\"rect\").style(\"opacity\", (r) =>\n linkedNodes.find((rest) => rest.id === r.id) ? \"1\" : \"0.2\"\n );\n d3.selectAll(\"path\").style(\"opacity\", \"0.2\");\n d3.selectAll(\".\" + currentNode).style(\"opacity\", \"1\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"function reset() {\n d3.selectAll(\"rect\").style(\"opacity\", \"1\");\n d3.selectAll(\"path\").style(\"opacity\", \"1\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"csv = FileAttachment(\"Family Guy Dataset.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"colaborations = {\n let res = {};\n csv.forEach((el) => {\n !res[el[\"Director\"] + \"_\" + el[\"Written by\"]]\n ? (res[el[\"Director\"] + \"_\" + el[\"Written by\"]] = 1)\n : (res[el[\"Director\"] + \"_\" + el[\"Written by\"]] += 1);\n });\n return Object.entries(res)\n .map((el) => {\n const st = el[0].split(\"_\");\n return {\n source: st[0],\n target: st[1],\n value: el[1]\n };\n })\n .sort((a, b) => b.value - a.value)\n .filter((el) => el.value > 1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3Sankey = require.alias({\"d3-array\": d3, \"d3-shape\": d3, \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"})(\"d3-sankey\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"