2b:null 2c:["$","title",null,{"children":"Zoomable Radial Tree Bruno Azevedo & Francisco Cuha | Francisco Cunha | Observable"}] 31:T2ed2,/* 1) Collapsible Issue (nice to have) 2) 3 Tooltips + HTML Buttons (see prototype) - Check 3) Readjust the Color Palette - Check 4) Bold Typography interaction 5) Remove node strokes - Check */ chart = { const root = tree(data); 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 g = svg.append("g") const gradient1 = g.append("g") .selectAll('linearGradient') .data(root.links()) .enter().append('linearGradient') .attr("id", d => "gradient1" + color(d.source.data.name)) .attr("spreadMethod", "reflect") .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', 600) gradient1 .append("stop") .attr("offset", "30%") .attr("stop-color", "#ee2681") gradient1 .append("stop") .attr("offset", "70%") .attr("stop-color", d => color(d.source.data.name)); gradient1.append("animate") .attr("attributeName", "x1") .attr("values", "0%;-200%") .attr("dur", "7s") .attr("repeatCount", "indefinite"); gradient1.append("animate") .attr("attributeName", "x2") .attr("values", "-100%;-300%") .attr("dur", "7s") .attr("repeatCount", "indefinite"); const gradient2 = g.append("g") .selectAll('linearGradient') .data(root.links()) .enter().append('linearGradient') .attr("id", d => "gradient2" + color(d.source.data.name)) .attr("spreadMethod", "reflect") .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', 600); gradient2 .append("stop") .attr("offset", "30%") .attr("stop-color", d => color(d.source.data.name)) gradient2 .append("stop") .attr("offset", "70%") .attr("stop-color", "#ee2681") gradient2.append("animate") .attr("attributeName", "x1") .attr("values", "0%;200%") .attr("dur", "7s") .attr("repeatCount", "indefinite"); gradient2.append("animate") .attr("attributeName", "x2") .attr("values", "100%;300%") .attr("dur", "7s") .attr("repeatCount", "indefinite"); const link = g.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.2) .attr("stroke-width", 2) .selectAll("path") .data(root.links()) .enter().append("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y - 3)) .attr("stroke", d => d.source.x >= Math.PI ? `url(#gradient1${color(d.source.data.name)})` : `url(#gradient2${color(d.source.data.name)})`) .attr("stroke-opacity", 1) .attr("id", d => { while (d.source.depth > 1) d.source = d.source.parent; return "path" + d.source.data.id }) const node = g.append("g") .attr("stroke-linejoin", "round") .selectAll("g") .data(root.descendants().reverse()) .enter().append("g") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `); const myScale = d3.scaleLinear() .domain([d3.min(root.leaves().map(leaf => leaf.data.value)), d3.max(root.leaves().map(leaf => leaf.data.value))]) .range([0.2, 1]); node.append("circle") .attr("fill", d => d.data.Color) .attr("id", d => "circle" + d.data.id) .attr("fill-opacity", 1) .attr("r", d => d.children ? 5 : 3) .on("mouseover", function (d, data) { if (data.depth == 2) { d3.select(this).attr("r", d => d.children ? 6 : 4) d3.selectAll("#text" + data.data.id).style("font-size", "15px").style("font-weight", "bold") var childrens = getDescendants(data); tooltip .html("

" + plus + "Relevance: 0.0

Year

" + data.data.year + "

Title

" + data.data.name + "

DOI

" + data.data.DOI + "

Knowlage Domain

" + data.data.domain + "

Keywords

" + data.data.keywords + "

Authors

" + data.data.authors + "

") .style('visibility', 'visible'); } else if (data.depth == 1) { d3.select(this).attr("r", d => d.children ? 6 : 4) d3.selectAll("#text" + data.data.id).style("font-size", "15px").style("font-weight", "bold") var image = "

" tooltipdomain .html("

" + plus + "Relevance: 0.0

Domain

" + data.data.name + "

") .style('visibility', 'visible'); } else { d3.select(this).attr("r", d => d.children ? 6 : 4) d3.selectAll("#text" + data.data.id).style("font-size", "15px").style("font-weight", "bold") var image = "

" tooltipname .html("

" + facebook + twitter + chat + person + "Relevance: 0.0

" + image + "

" + data.data.name + "

Ph.D.

ORCID

" + data.data.profile + "

") .style('visibility', 'visible'); } }) .on('mousemove', function (d, data) { if (data.depth == 0) { tooltipname .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } if (data.depth == 1) { tooltipdomain .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } if (data.depth == 2) { tooltip .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } }) .on('mouseout', function (d, data) { if (data.depth == 0) { tooltipname.style('visibility', 'hidden'); } if (data.depth == 1) { tooltipdomain.style('visibility', 'hidden'); } if (data.depth == 2) { tooltip.style('visibility', 'hidden'); } d3.selectAll("#text" + data.data.id).style("font-size", "12px").style("font-weight", data => data.children ? "bold" : "normal") d3.select(this).attr("r", d => d.children ? 5 : 3) }); node.append("text") .attr("dy", "0.31em") .attr("id", d => "text" + d.data.id) .attr("x", d => d.x < Math.PI === !d.children ? 10 : -10) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .attr("transform", function (d) { if (d.depth == 0) { return "rotate(270)"; } if (d.x >= Math.PI) { return "rotate(180)"; } if (d.parent) { return null; } else { return "rotate(-90)"; } }) .attr("y", d => d.parent ? 0 : -10) .style("cursor", "default") .style("font", d => d.children ? "12px sans-serif" : "12px sans-serif") .style("text-transform", d => d.children ? null : null) .style("font-weight", d => d.children ? "bold" : "normal") .attr("fill", d => d.children ? "#161616" : "#161616") .text(d => d.depth == 0 ? d.data.title : d.data.name) .on("mouseover", function (d, data) { if (data.depth == 2) { d3.select(this).style("font-size", "15px").style("font-weight", "bold") d3.selectAll("#circle" + data.data.id).attr("r", d => d.children ? 6 : 4) tooltip .html("

" + plus + "Relevance: 0.0

Year

" + data.data.year + "

Title

" + data.data.name + "

DOI

" + data.data.DOI + "

Knowlage Domain

" + data.data.domain + "

Keywords

" + data.data.keywords + "

Authors

" + data.data.authors + "

") .style('visibility', 'visible'); } if (data.depth == 1) { d3.select(this).style("font-size", "15px").style("font-weight", "bold") d3.selectAll("#circle" + data.data.id).attr("r", d => d.children ? 6 : 4) tooltipdomain .html("

" + plus + "Relevance: 0.0

Domain

" + data.data.name + "

") .style('visibility', 'visible'); } if (data.depth == 0) { d3.select(this).style("font-size", "15px").style("font-weight", "bold") d3.selectAll("#circle" + data.data.id).attr("r", d => d.children ? 6 : 4) var image = "

" tooltipname .html("

" + facebook + twitter + chat + person + "Relevance: 0.0

" + image + "

" + data.data.title + "

Ph.D.

ORCID

" + data.data.profile + "

") .style('visibility', 'visible'); } }) .on('mousemove', function (d, data) { if (data.depth == 0) { tooltipname .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } if (data.depth == 1) { tooltipdomain .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } if (data.depth == 2) { tooltip .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } }) .on('mouseout', function (d, data) { if (data.depth == 0) { tooltipname.style('visibility', 'hidden'); } if (data.depth == 1) { tooltipdomain.style('visibility', 'hidden'); } if (data.depth == 2) { tooltip.style('visibility', 'hidden'); } d3.selectAll("#circle" + data.data.id).attr("r", data => data.children ? 5 : 3) d3.select(this).style("font-size", "12px").style("font-weight", d => d.children ? "bold" : "normal") }) .filter(d => d.children) .clone(true).lower() .attr("stroke", "white") .attr("stroke-width", 4); 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} ${box.height}`); svg.call(d3.zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([0.75, 8]) .on("zoom", zoomed)); function zoomed({transform}){ g.attr("transform", transform); } return svg.node(); }32:T9f6,html` `33:T705,plus = "

"34:Ta0a,twitter = "

"35:Te6b,chat = "

"36:Tc95,person = "

"37:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1616421029671.879,"size":11634},{"id":"f2c8f17036c707eb77e7c68805ac13212ad5b39cfcb54eb099f3adfeb60b0b45547df95527b19771312d8778bc0a918eb6b2bd9293121a96d8b43a6b10fe16d8","href":"https://static.observableusercontent.com/files/f2c8f17036c707eb77e7c68805ac13212ad5b39cfcb54eb099f3adfeb60b0b45547df95527b19771312d8778bc0a918eb6b2bd9293121a96d8b43a6b10fe16d8","name":"dadosRadialTree.json","type":"application/json","lastModified":1624439001783.548,"size":17521}] 2f:{"id":"1fc1ce6be21085f2","slug":"zoomable-radial-tree","title":"Zoomable Radial Tree Bruno Azevedo & Francisco Cuha","thumbnail":"5bb41601e89d552b38c076568851f71ab1dbd26bd8c204bf172c3afd92aafb74","access_level":"public","create_time":"$D2021-03-22T13:50:29.671Z","update_time":"$D2021-07-01T17:49:58.020Z","view_time":null,"first_public_time":"$D2021-03-22T13:51:12.801Z","fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"d6c19ebf8f8d892d","login":"franciscocunha","name":"Francisco Cunha","avatar_url":"https://avatars-next.observableusercontent.com/5c10beb65607acf07c4a3a0ddb0936d882bac43070ef970ed5d80a26eb87b967","tier":"starter_2024"},"version":1897,"publish_version":1897,"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":6,"collection":null,"type":"notebook","body":{"title":"Zoomable Radial Tree Bruno Azevedo & Francisco Cuha","cells":[{"id":0,"value":"md`# Zoomable Radial Tree Bruno Azevedo & Francisco Cuha` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = FileAttachment(\"dadosRadialTree.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"tree = data => d3.tree()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)\n (d3.hierarchy(data).sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"function tile(node, x0, y0, x1, y1) {\n d3.treemapBinary(node, 0, 0, width, height);\n for (const child of node.children) {\n child.x0 = x0 + child.x0 / width * (x1 - x0);\n child.x1 = x0 + child.x1 / width * (x1 - x0);\n child.y0 = y0 + child.y0 / height * (y1 - y0);\n child.y1 = y0 + child.y1 / height * (y1 - y0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"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', '500px')\n .style('height', '475px')\n .style('visibility', 'hidden')\n .style('padding', '0px')\n .style('padding', '10px')\n .style('background', 'rgba(255,255,255,0.85)')\n .style('border-radius', '4px')\n .style('color', 'black')\n .style(\"box-shadow\", \"0px 5px 25px 0px #bdbdbd\")\n .text('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"tooltipname = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('width', '350px')\n .style('height', '225px')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(255,255,255,0.85)')\n .style('border-radius', '4px')\n .style('color', 'black')\n .style(\"box-shadow\", \"0px 5px 25px 0px #bdbdbd\")\n .text('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1886,"value":"tooltipdomain = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('width', '400px')\n .style('height', '125px')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(255,255,255,0.85)')\n .style('border-radius', '4px')\n .style('color', 'black')\n .style(\"box-shadow\", \"0px 5px 25px 0px #bdbdbd\")\n .text('a simple tooltip');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"function radialPoint(x, y) {\n return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"name = d => d.ancestors().reverse().map(d => d.data.name).join(\"/\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"function getDescendants(node) {\n if(!node.children) {\n return 0;\n }\n var total = 0;\n node.children.forEach(function(d) {\n total += 1+getDescendants(d);\n }) \n return total;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"width = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"radius = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1833,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1850,"value":"facebook = \"

\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1852,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"color = function(name) {\n \n var colors = {\n \n \"User\" : \"#ee2681\",\n \"Engineering and Technology\": \"#3c6fbc\",\n \"Computing\": \"#3b4ebc\",\n \"Health\": \"#3b33b5\",\n \"Humanities\": \"#310f7e\",\n \"Mathematics\": \"#490ea8\",\n \"physics\": \"#611eb2\",\n \"query\": \"#802bbe\",\n \"scale\": \"#596F7E\",\n \"util\": \"#919c4c\",\n \"vis\": \"#919c4c\",\n \"interpolate\" : \"#168B98\",\n \"methods\":\"#fd8f24\"\n };\n return colors[name];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"colors = d3.scaleOrdinal()\n.domain(tree(data).leaves().map(d => {return d.parent.data.name}))\n.range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"