25:["$","title",null,{"children":"Sankey diagram | Fatemeh Sarshartehrani's Workspace | Observable"}] 49:T17bd,chart = { const width = 1200; const height = 1200; // Increased height to ensure nodes fit properly const format = d3.format(",.0f"); // Create an SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;"); // Custom positions for nodes const middle_layer_positions = { 'arousal': 0.01, 'valence': 0.08, 'stress': 0.15, 'neutral': 0.21, 'happiness': 0.25, 'cheerful': 0.27, 'pleasant': 0.28, 'flow': 0.29, 'joy/enjoy': 0.3, 'pleasure': 0.31, 'amusement': 0.33, 'boredom': 0.37, 'sadness': 0.39, 'tiredness': 0.40, 'anxiety': 0.44, 'fear': 0.45, 'nervous': 0.46, 'jittery': 0.47, 'worried': 0.48, 'anger': 0.56, 'surprised': 0.51, 'excited': 0.52, 'ease': 0.6, 'calmness': 0.62, 'meditation': 0.64, 'relaxing': 0.66 }; const first_layer_positions = { 'EDA': 0.05, 'PPG': 0.15, 'ECG': 0.25, 'EMG': 0.35, 'RR': 0.45, 'ST': 0.55, 'Other': 0.65 }; const last_layer_positions = { '2': 0.1, '3': 0.3, '4': 0.45, '4+': 0.6 }; const color_map_middle = { 'arousal': 'rgba(50,205,50,0.5)', 'valence': 'rgba(255,192,203,0.5)', 'stress': 'rgba(139,0,0,0.5)', 'neutral': 'rgba(211,211,211,0.5)', 'anger': 'rgba(255,0,0,0.5)', 'ease': 'rgba(175,238,238,0.5)', 'calmness': 'rgba(0,206,209,0.5)', 'meditation': 'rgba(70,130,180,0.5)', 'relaxing': 'rgba(182,166,202,0.5)', 'happiness': 'rgba(255,215,0,0.5)', 'cheerful': 'rgba(255,236,139,0.5)', 'pleasant': 'rgba(255,228,181,0.5)', 'flow': 'rgba(255,250,205,0.5)', 'joy/enjoy': 'rgba(255,248,220,0.5)', 'pleasure': 'rgba(250,250,210,0.5)', 'amusement': 'rgba(255,239,213,0.5)', 'boredom': 'rgba(30,144,255,0.5)', 'sadness': 'rgba(0,191,255,0.5)', 'tiredness': 'rgba(135,206,250,0.5)', 'anxiety': 'rgba(128,0,128,0.5)', 'fear': 'rgba(147,112,219,0.5)', 'nervous': 'rgba(186,85,211,0.5)', 'jittery': 'rgba(221,160,221,0.5)', 'worried': 'rgba(216,191,216,0.5)', 'surprised': 'rgba(255,165,0,0.5)', 'excited': 'rgba(255,140,0,0.5)' }; const color_map_first = { 'EDA': 'rgba(138,43,226,0.5)', 'PPG': 'rgba(95,158,160,0.5)', 'ECG': 'rgba(127,255,0,0.5)', 'EMG': 'rgba(255,99,71,0.5)', 'RR': 'rgba(70,130,180,0.5)', 'ST': 'rgba(210,105,30,0.5)', 'Other': 'rgba(154,205,50,0.5)' }; const color_map_last = { '2': 'rgba(255,20,147,0.5)', '3': 'rgba(0,250,154,0.5)', '4': 'rgba(255,215,0,0.5)', '4+': 'rgba(139,69,19,0.5)' }; // Assign custom x and y positions to nodes data.nodes.forEach(node => { const position = first_layer_positions[node.name] ?? middle_layer_positions[node.name] ?? last_layer_positions[node.name] ?? 0; // Adjust y0 with a realistic scale within height node.y0 = position * height; // Scale position by height node.y1 = node.y0 + 40; // Set height for nodes to 40px to ensure visibility // Debugging output to see calculated positions console.log(`Node: ${node.name}, y0: ${node.y0}, y1: ${node.y1}`); if (first_layer_positions[node.name]) { node.x0 = 0.1 * width; node.x1 = node.x0 + 30; // Set width of the node } else if (middle_layer_positions[node.name]) { node.x0 = 0.5 * width; node.x1 = node.x0 + 30; } else { node.x0 = 0.9 * width; node.x1 = node.x0 + 30; } }); // Construct the Sankey generator with fixed node positions. const sankey = d3.sankey() .nodeId(d => d.name) .nodeWidth(30) .nodePadding(20) // Increase node padding to avoid overlap .extent([[0, 0], [width, height]]) .iterations(0); // Prevent layout recalculation const {nodes, links} = sankey({ nodes: data.nodes, links: data.links }); // Function to get node color const getNodeColor = name => color_map_first[name] ?? color_map_middle[name] ?? color_map_last[name] ?? 'gray'; // Add a gradient for each link. const defs = svg.append("defs"); links.forEach((link, i) => { const gradient = defs.append("linearGradient") .attr("id", `gradient-${i}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", link.source.x1) .attr("x2", link.target.x0) .attr("y1", (link.source.y0 + link.source.y1) / 2) .attr("y2", (link.target.y0 + link.target.y1) / 2); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", getNodeColor(link.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", getNodeColor(link.target.name)); }); // Add nodes (rectangles). const rect = svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => getNodeColor(d.name)) // Assign node color .attr("stroke", "black"); // Add titles (tooltips) for nodes. rect.append("title") .text(d => `${d.name}\n${format(d.value)}`); // Add links (paths) with gradient strokes. const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("path") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", (d, i) => `url(#gradient-${i})`) // Use the gradient .attr("stroke-width", d => Math.max(1, d.width)) .style("mix-blend-mode", "multiply"); // Add titles (tooltips) for links. link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); // Add node labels. svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y0 + d.y1) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name); return svg.node(); } 4a:T1518,data = { const sheet5 = await FileAttachment("Book 2(Sheet5) (1)@1.csv").csv(); const sheet6 = await FileAttachment("Book 2(Sheet6) (1)@1.csv").csv(); const middle_layer_positions = { 'arousal': 0.01, 'valence': 0.08, 'stress': 0.15, 'neutral': 0.21, 'happiness': 0.25, 'cheerful': 0.27, 'pleasant': 0.28, 'flow': 0.29, 'joy/enjoy': 0.3, 'pleasure': 0.31, 'amusement': 0.33, 'boredom': 0.37, 'sadness': 0.39, 'tiredness': 0.40, 'anxiety': 0.44, 'fear': 0.45, 'nervous': 0.46, 'jittery': 0.47, 'worried': 0.48, 'anger': 0.56, 'surprised': 0.51, 'excited': 0.52, 'ease': 0.6, 'calmness': 0.62, 'meditation': 0.64, 'relaxing': 0.66 } //# Manually assign positions to first-column nodes to enforce grouping with more spacing const first_layer_positions = { 'EDA': 0.05, 'PPG': 0.15, 'ECG': 0.25, 'EMG': 0.35, 'RR': 0.45, 'ST': 0.55, 'Other': 0.65 } //# Manually assign positions to last column nodes to enforce grouping with more spacing const last_layer_positions = { '2': 0.1, '3': 0.3, '4': 0.45, '4+': 0.6 } // const sheet5 = await d3.csv("Book 2(Sheet5) (1).csv"); // const sheet6 = await d3.csv("Book 2(Sheet6) (1).csv"); // Extract sources, targets, and values from sheet5 const sources_1 = sheet5.map(row => row["signal"]); // Update to actual column name const targets_1 = sheet5.map(row => row["emotion"]); // Update to actual column name const values_1 = sheet5.map(row => +row["paper counts"]); // Update to actual column name const sources_2 = sheet6.map(row => row["emotion"]); // Update to actual column name const targets_2 = sheet6.map(row => row["class counts"]); // Update to actual column name const values_2 = sheet6.map(row => +row["paper count"]); // Update to actual column name // Combine all unique nodes const all_nodes = [...new Set([...sources_1, ...targets_1, ...sources_2, ...targets_2])]; // Define node structure const nodes = all_nodes.map(name => ({ name, category: middle_layer_positions[name] ? "middle" : first_layer_positions[name] ? "first" : "last" })); // Define links from sheet5 and sheet6 const links = [ ...sources_1.map((source, i) => ({ source, target: targets_1[i], value: values_1[i] })), ...sources_2.map((source, i) => ({ source, target: targets_2[i], value: values_2[i] })) ]; const color_map_middle = { 'arousal': 'rgba(50,205,50,0.5)', //# Lime Green with transparency 'valence': 'rgba(255,192,203,0.5)', //# Light Pink with transparency 'stress': 'rgba(139,0,0,0.5)', //# Dark Red/Burgundy with transparency 'neutral': 'rgba(211,211,211,0.5)', //# Light Gray with transparency 'anger': 'rgba(255,0,0,0.5)', //# Red with transparency 'ease': 'rgba(175,238,238,0.5)', //# Pale Turquoise with transparency 'calmness': 'rgba(0,206,209,0.5)', //# Dark Turquoise with transparency 'meditation': 'rgba(70,130,180,0.5)', //# Steel Blue with transparency 'relaxing': 'rgba(182,166,202,0.5)', //# Lavender Gray with transparency 'happiness': 'rgba(255,215,0,0.5)', //# Yellow with transparency 'cheerful': 'rgba(255,236,139,0.5)', //# Light Yellow with transparency 'pleasant': 'rgba(255,228,181,0.5)', //# Moccasin with transparency 'flow': 'rgba(255,250,205,0.5)', //# Lemon Chiffon with transparency 'joy/enjoy': 'rgba(255,248,220,0.5)', //# Cornsilk with transparency 'pleasure': 'rgba(250,250,210,0.5)', //# Light Goldenrod Yellow with transparency 'amusement': 'rgba(255,239,213,0.5)', //# Papaya Whip with transparency 'boredom': 'rgba(30,144,255,0.5)', //# Dodger Blue with transparency 'sadness': 'rgba(0,191,255,0.5)', //# Deep Sky Blue with transparency 'tiredness': 'rgba(135,206,250,0.5)', //# Light Sky Blue with transparency 'anxiety': 'rgba(128,0,128,0.5)', //# Purple with transparency 'fear': 'rgba(147,112,219,0.5)', //# Medium Purple with transparency 'nervous': 'rgba(186,85,211,0.5)', //# Medium Orchid with transparency 'jittery': 'rgba(221,160,221,0.5)', //# Plum with transparency 'worried': 'rgba(216,191,216,0.5)', // # Thistle with transparency 'surprised': 'rgba(255,165,0,0.5)', // # Orange with transparency 'excited': 'rgba(255,140,0,0.5)' // # Dark Orange with transparency } const color_map_first = { 'EDA': 'rgba(138,43,226,0.5)', //# Blue Violet with transparency 'PPG': 'rgba(95,158,160,0.5)', // # Cadet Blue with transparency 'ECG': 'rgba(127,255,0,0.5)', // # Chartreuse with transparency 'EMG': 'rgba(255,99,71,0.5)', //# Tomato with transparency 'RR': 'rgba(70,130,180,0.5)', //# Steel Blue with transparency 'ST': 'rgba(210,105,30,0.5)', //# Chocolate with transparency 'Other': 'rgba(154,205,50,0.5)' //# Yellow Green with transparency } const color_map_last = { '2': 'rgba(255,20,147,0.5)', //# Deep Pink with transparency '3': 'rgba(0,250,154,0.5)', //# Medium Spring Green with transparency '4': 'rgba(255,215,0,0.5)', //# Gold with transparency '4+': 'rgba(139,69,19,0.5)' //# Saddle Brown with transparency } const colors = nodes.map(node => color_map_middle[node.name] || color_map_first[node.name] || color_map_last[node.name] || "gray" ); return {nodes, links, colors}; }4b:[{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1732064727384.996,"size":2267},{"id":"2183194c4b07aced5db6814a0922160b27210cebe9deb354e1e2bd745659b8bcd5cb7303355e743ab492a6697ca6339066a246eb909f2a6ca2087dfbef45bff0","href":"https://static.observableusercontent.com/files/2183194c4b07aced5db6814a0922160b27210cebe9deb354e1e2bd745659b8bcd5cb7303355e743ab492a6697ca6339066a246eb909f2a6ca2087dfbef45bff0","name":"Book 2(Sheet5) (1)@1.csv","type":"text/csv","lastModified":1732064727728.474,"size":2807},{"id":"a7682181834cc418422be41fa44f8528c266028f753830a47d4ad1bf54ac8e6f9b5eefe7a0c236b80a673f0a96bf003b7d135fd3cb3a8c51632b0aa6d667ad7c","href":"https://static.observableusercontent.com/files/a7682181834cc418422be41fa44f8528c266028f753830a47d4ad1bf54ac8e6f9b5eefe7a0c236b80a673f0a96bf003b7d135fd3cb3a8c51632b0aa6d667ad7c","name":"all in one.csv","type":"text/csv","lastModified":1732064727863.492,"size":4371}] 29:{"id":"39e59b7e08b3ecdb","slug":null,"title":"Sankey diagram","thumbnail":"a85aa7371047ed303d8af1d15206ac72db0fea89a79dc4c1acf015113c07aadd","access_level":"public","create_time":"$D2024-11-20T01:05:27.384Z","update_time":"$D2024-11-20T01:05:27.384Z","view_time":null,"first_public_time":"$D2024-11-20T01:05:27.384Z","has_unpublished_edits":null,"fork":{"id":"3ecaa4aaa61dc833","slug":"sankey/2","title":"Sankey diagram","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"774d1ba4c8dc87dc","login":"fatemeh-sarshartehrani-ws","name":"Fatemeh Sarshartehrani's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/bd795dd85cf12fd0b3d96f32611b75011db3640373d9078210039b9ee60dfa21","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":470,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1a29d8166c23cd45","login":"fatemeh-sarshartehrani","name":"Fatemeh Sarshartehrani","avatar_url":"https://avatars-next.observableusercontent.com/4e91ee511e937a3d55d1d2fcdbb6d2f4995d484439dbeefc46d42b03ad629c53","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1a29d8166c23cd45","login":"fatemeh-sarshartehrani","name":"Fatemeh Sarshartehrani","avatar_url":"https://avatars-next.observableusercontent.com/4e91ee511e937a3d55d1d2fcdbb6d2f4995d484439dbeefc46d42b03ad629c53","tier":null,"role":"editor"},{"type":"team","id":"774d1ba4c8dc87dc","login":"fatemeh-sarshartehrani-ws","name":"Fatemeh Sarshartehrani's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/bd795dd85cf12fd0b3d96f32611b75011db3640373d9078210039b9ee60dfa21","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sankey diagram","cells":[{"id":0,"value":"

Sankey diagram

D3 › Gallery