2b:null 2c:["$","title",null,{"children":"Sankey plus Nodes Francisco Cunha & Bruno Azevedo | Francisco Cunha | Observable"}] 31:T2368,/* 1) Navigation plus Browse (Nice to Have) 2) 3 Tooltips + HTML Buttons (see prototype) - Check 3) Readjust the Color Palette - Check 4) Change recommenders name: Right position - Check */ chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("padding", "8px") .style("box-sizing", "border-box") .style("font", "10px sans-serif") const {nodes, links} = sankey(data); const g = svg.append("g"); const link = g.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") var node = g.append("g").selectAll(".node") .data(nodes) .join("g") .attr("class", d => d.type == "person" ? "node circle": "node rect") g.selectAll(".node.rect").append("rect") .attr("x", d => d.x0) .attr("y", d => (d.y1 + d.y0) / 2 - 15) .attr("height", d => 30) .attr("width", d => d.x0 > width/2 ? 0 : 30) .attr("fill", "#be005b") //.attr("fill", d => d.type == "person" ? color(d.name) : d.colour) var fo = node.append("foreignObject") .attr("x",function(d){ if(d.depth == 1){ return d.x0 - 150 }}) .attr("y", d => ((d.y1 + d.y0) / 2) -100) .attr("height", 250) .attr("width", function (d) { if (d.type == "article" && d.x0 < width/2){ return 359 } else{ return 0 }}) var div = fo.append("xhtml:div") .style('position', 'absolute') .style('width', '300px') .style('height', '225px') .style('padding', '10px') .style('background', 'rgba(255,255,255)') .style('border-radius', '4px') .style('color', 'black') .style("box-shadow", "5px 5px 10px grey") .html(function (d) { return "

Title

"+d.name+"

DOI

"+ d.DOI+"

Authors

" + d.authors + "

Year

" + d.year }) .on("mouseover", function(d) { var index = d.index d.sourceLinks.forEach(function(d) { var id = d.target.id filterOver3(id,index) }) d3.select(this).style("cursor", "pointer") }) .on('mouseout', function (d,nodes) { filterOut() });; g.selectAll(".node.circle").append("circle") .attr("cx", d => (d.x1 + d.x0)/2 + 72.5) .attr("cy", d => (d.y1 + d.y0)/2) .attr("r", d => 50) .attr("fill", d => d.colour) .style("fill", d =>`url(#pattern${d.id})`) .on("mouseover", function(d) { d3.select(this).attr("r",60) d3.selectAll("#text" + d.id).attr("font-weight", 600).attr("font-size", 35) var id = d.id var image = "

" d.targetLinks.forEach(function(d) { var index = d.source.index filterOver2(index,id) }) d3.select(this).style("cursor", "pointer") tooltip .html("

"+d.name+"

" + "

"+ image +"

Profile

"+ d.profile) .style('visibility', 'visible') }) .on('mousemove', function (d) { tooltip .style('top', d3.event.clientY + 10 + 'px') .style('left', d3.event.clientX + 30 + 'px') .style("display", "inline-block"); }) .on('mouseout', function (d,nodes) { filterOut() d3.selectAll("#text" + d.id).attr("font-weight", 600).attr("font-size", 30) d3.select(this).attr("r",50) tooltip.html(``).style('visibility', 'hidden'); }); const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => d.source.colour); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => d.target.colour); /* gradient.append("animate") .attr("attributeName","x1") .attr("values","0%; 50%") //let x1 run to 200% instead of 100% .attr("dur","3s") .attr("repeatCount","indefinite"); gradient.append("animate") .attr("attributeName","x2") .attr("values","50%; 100%") //let x2 run to 300% instead of 200% .attr("dur","3s") .attr("repeatCount","indefinite");*/ var linking = d3.linkHorizontal() .x(function(d) { return d.x1 }) .y(function(d) { return ((d.y1 + d.y0) / 2); }) link.append("path") .attr("d", d => linking(d)) .attr("id", d => d.target.depth == 2 ? "path" + d.target.id : "path" + d.target.index) .attr("class", d => d.target.depth == 1? "path" + d.target.index : "path" + d.source.index) .attr("opacity", 0) /* .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source.name) : color(d.target.name)) */ //.attr("stroke", d => d.target.colour) .attr("stroke", d => d.uid ) //.attr("stroke-width", d => Math.max(1, d.width)); .attr("stroke-width", 10); g.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") // .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 + 150) .attr("x",function(d){ if(d.x0 < width / 2){ if(d.depth == 0){ return d.x0 - 10 } else { return d.x0} } else{ return d.x0 + 160 } }) .attr("y", d => d.depth == 1 ? ((d.y1 + d.y0) / 2) - 50: (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("id", d => "text" + d.id) .attr("font-weight", d => d.depth == 1 ? 100: 600) .attr("font-size", d => d.depth == 1 ? 0: 30) .attr("text-anchor", d => d.x0 < width / 2 ? "End" : "Start") .attr("text-anchor",function(d){ if(d.x0 < width / 2){ if(d.depth == 1){ return "Middle" } else { return "End"} } else{ return "Start" } }) .text(d => d.sourceLinks.length == 0 && d.targetLinks.length == 0 ? null : d.name) /* .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer") tooltip .html("Name: " + d.name) .style('visibility', 'visible')}) .on('mousemove', function (d) { tooltip .style('top', d3.event.clientY + 10 + 'px') .style('left', d3.event.clientX + 20 + 'px') .style("display", "inline-block"); }) .on('mouseout', function (d, nodes) { tooltip.html(``).style('visibility', 'hidden'); });*/ var uniform = d3.range(0, 7).map((_,i) => ({ id: i, size: Math.ceil(d3.randomUniform(1, 5)(_)), url: image_urls[i] })); let pack = data => d3.pack() .size([width, width]) .padding(0) (d3.hierarchy({children: data}) .sum(d => d.size)) const root = pack(uniform); const defs = svg.append("defs") .selectAll("pattern") .data(root.leaves()) .enter(); defs.append("pattern") .attr("id", d => "pattern" + d.data.id) .attr("width", 1) .attr("height", 1) .append('image') .attr("xlink:href", d => d.data.url) document.body.appendChild(svg.node()); const box = g.node().getBBox(); svg.remove() .attr("width", box.width) .attr("height", box.height) .attr("viewBox", `${box.x} ${box.y} ${box.width + 100} ${box.height}`); svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([0.75, 8]) .on("zoom", zoomed)); function zoomed() { g.attr("transform", d3.event.transform); } d3.select('#NoOneButton').on('click', () => { d3.selectAll('path') .attr("opacity", 0) d3.selectAll("text").attr("pointer-events", "default"); d3.selectAll("rect").attr("pointer-events", "default"); d3.selectAll("circle").attr("pointer-events", "default")//.attr("cx", d => (d.x1 + d.x0)/2 + 72.5);; }); d3.select('#AllButton').on('click', () => { d3.selectAll('path') .attr("opacity", 0.8) d3.selectAll("text").attr("pointer-events", "none"); d3.selectAll("rect").attr("pointer-events", "none"); d3.selectAll("circle").attr("pointer-events", "none")//.attr("cx", d => (d.x1 + d.x0)/2 + 62.5); }); return svg.node(); }32:[{"id":"cfb8eb3eb46a4a22ebaab082939b94ec98a9f54899d113473cf287dcbb3de841ab53a9653169ca7d550f6f138e83ff90ae63f8757b8ea23be9d96b9f9bbc811b","href":"https://static.observableusercontent.com/files/cfb8eb3eb46a4a22ebaab082939b94ec98a9f54899d113473cf287dcbb3de841ab53a9653169ca7d550f6f138e83ff90ae63f8757b8ea23be9d96b9f9bbc811b","name":"Imagem1.png","type":"image/png","lastModified":1618216542445.685,"size":19565},{"id":"fea70b77cd483f3aeb1a56e3277f85a518542dc185a179ba843ccb3ba9467332a61754a20871ffd2e204b519a4aec7dcb8e1c2c1d582121e54111ef7d4bc4163","href":"https://static.observableusercontent.com/files/fea70b77cd483f3aeb1a56e3277f85a518542dc185a179ba843ccb3ba9467332a61754a20871ffd2e204b519a4aec7dcb8e1c2c1d582121e54111ef7d4bc4163","name":"data@6.json","type":"application/json","lastModified":1618217681553.236,"size":4713},{"id":"c0c241e839c61e7cc32ee9dc0fe9c43c8401521a8aef12326cd1db1fac0d531379cd93dc3ddf790c4cff57f37fa30a942ce82ffaaac655a40e4fa35d31f266da","href":"https://static.observableusercontent.com/files/c0c241e839c61e7cc32ee9dc0fe9c43c8401521a8aef12326cd1db1fac0d531379cd93dc3ddf790c4cff57f37fa30a942ce82ffaaac655a40e4fa35d31f266da","name":"Imagem2@1.jpg","type":"image/jpeg","lastModified":1618220761327.93,"size":5532},{"id":"1606174fc8d38155b30ec4c9e2f845b53a0300482ac0ce80929111cc74e126e8362c605a95f85c7faf1c626a81f38c4e668a8320e9b70b87a102e14d03c90c4d","href":"https://static.observableusercontent.com/files/1606174fc8d38155b30ec4c9e2f845b53a0300482ac0ce80929111cc74e126e8362c605a95f85c7faf1c626a81f38c4e668a8320e9b70b87a102e14d03c90c4d","name":"Imagem3@2.jpg","type":"image/jpeg","lastModified":1618220837525.154,"size":5075},{"id":"6d860bf834aff19138480ada01b64d314d52be3ea8172e6b70ed17a8baf432821febdd03626537efcf97ee6946c405884691c31d66287a61625c2279065e2daf","href":"https://static.observableusercontent.com/files/6d860bf834aff19138480ada01b64d314d52be3ea8172e6b70ed17a8baf432821febdd03626537efcf97ee6946c405884691c31d66287a61625c2279065e2daf","name":"Imagem4.png","type":"image/png","lastModified":1618220938915.794,"size":28138},{"id":"8c9815d5a8ca82db834c8316f1126c6919d2b2e57516b9fada6156094f79a03ab1ce5960a27405fd569f9109239591ef7d262b2162fb4167167c0a8ffc1e2e25","href":"https://static.observableusercontent.com/files/8c9815d5a8ca82db834c8316f1126c6919d2b2e57516b9fada6156094f79a03ab1ce5960a27405fd569f9109239591ef7d262b2162fb4167167c0a8ffc1e2e25","name":"Imagem5@1.png","type":"image/png","lastModified":1618221203715.35,"size":36735},{"id":"5546d2446f6cb2f1c0bedddb1c5f5412f1aa0f48cfbcab99dcc7db4b733c6d63ea15462328579a5224bad0952482823c07e5fa907f763eecd012329b686c9b5c","href":"https://static.observableusercontent.com/files/5546d2446f6cb2f1c0bedddb1c5f5412f1aa0f48cfbcab99dcc7db4b733c6d63ea15462328579a5224bad0952482823c07e5fa907f763eecd012329b686c9b5c","name":"Bruno.jpg","type":"image/jpeg","lastModified":1617819674253.497,"size":2576}] 2f:{"id":"9efbb456322be13d","slug":"sunkey-bruno-e-francisco","title":"Sankey plus Nodes Francisco Cunha & Bruno Azevedo","thumbnail":"11f3993051134f13cf10a94eedecd87c3aace74e879ca7af4ca8e24196ef54f8","access_level":"public","create_time":"$D2021-04-05T08:08:43.194Z","update_time":"$D2021-05-10T14:50:01.478Z","view_time":null,"first_public_time":"$D2021-04-05T08:10:11.684Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d6c19ebf8f8d892d","login":"franciscocunha","name":"Francisco Cunha","avatar_url":"https://avatars-next.observableusercontent.com/5c10beb65607acf07c4a3a0ddb0936d882bac43070ef970ed5d80a26eb87b967","tier":"starter_2024"},"version":1424,"publish_version":1424,"role":null,"authored":false,"authors":[{"type":"individual","id":"4ed549c79120991f","login":"franciscocunha","name":"Francisco Cunha","avatar_url":"https://avatars-next.observableusercontent.com/5c10beb65607acf07c4a3a0ddb0936d882bac43070ef970ed5d80a26eb87b967","tier":null}],"members":[{"type":"individual","id":"1518e62186bc0bd1","login":"brunomiguelam","name":"Bruno Azevedo","avatar_url":"https://avatars-next.observableusercontent.com/5b247521670b13c44fb3115ddbb86ab70576b5db226f5884ee33803fc7b3a71c","tier":null,"role":"editor"},{"type":"individual","id":"4ed549c79120991f","login":"franciscocunha","name":"Francisco Cunha","avatar_url":"https://avatars-next.observableusercontent.com/5c10beb65607acf07c4a3a0ddb0936d882bac43070ef970ed5d80a26eb87b967","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Sankey plus Nodes Francisco Cunha & Bruno Azevedo","cells":[{"id":0,"value":"md`# Sankey plus Nodes Francisco Cunha & Bruno Azevedo`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeWidth(30)\n .nodePadding(1000)\n .extent([[0,1], [width - 500, height - 100]]);\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"format = {\n const f = d3.format(\",.0f\");\n return d => `${f(d)} TWh`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"data = FileAttachment(\"data@6.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('width', '180px')\n .style('height', '120px')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(255,255,255)')\n .style('border-radius', '4px')\n .style('color', 'black')\n .style(\"box-shadow\", \"5px 5px 10px grey\")\n .text('a simple tooltip');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"image_urls = [\n await FileAttachment(\"Bruno.jpg\").url(),\n await FileAttachment(\"Imagem1.png\").url(),\n await FileAttachment(\"Imagem2@1.jpg\").url(),\n await FileAttachment(\"Imagem4.png\").url(),\n await FileAttachment(\"Imagem3@2.jpg\").url(),\n await FileAttachment(\"Imagem5@1.png\").url()\n]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"function filterOver(d){ \n console.log(d)\n d3.selectAll(\"#path\"+d) \n .attr(\"opacity\", 0.8);\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"function filterOver2(d,c){ \n d3.selectAll(\"#path\"+d) \n .attr(\"opacity\", 0.8);\n\n d3.selectAll(\"#path\"+c) \n .attr(\"opacity\", 0.8);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"function filterOver3(d,c){ \n d3.selectAll(\".path\"+d) \n .attr(\"opacity\", 0.8);\n\n d3.selectAll(\".path\"+c) \n .attr(\"opacity\", 0.8);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"function filterOut(){ \n d3.selectAll(\"path\") \n .attr(\"opacity\",0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"d3.selection.prototype.moveToBack = function() {\n return this.each(function() {\n var firstChild = this.parentNode.firstChild;\n if (firstChild) {\n this.parentNode.insertBefore(this, firstChild);\n }\n });\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = 1600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"width = 1800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"tagWithOptions = impl => (...args) => {\n if (!Array.isArray(args[0])) {\n return impl(args[0]);\n }\n return impl({})(...args);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"interpolate = (strings, ...interpolations) => {\n let s = '';\n for (let i = 0; i < strings.length; i++) {\n s += strings[i];\n if (i < interpolations.length && interpolations[i]) {\n s += String(interpolations[i]);\n }\n }\n return dedent(s);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"css = tagWithOptions(({ transform }) => (...args) => {\n const source = interpolate(...args);\n const style = html`