2b:null 2c:["$","title",null,{"children":"Zoomable + Wheel Treemap Bruno Azevedo & Francisco Cunha | Francisco Cunha | Observable"}] 31:T1b88,chart = { const x = d3.scaleLinear().rangeRound([0, width]); const y = d3.scaleLinear().rangeRound([0, height]); const svg = d3.create("svg") .attr("viewBox", [0.5, -30.5, width, height + 35]) .style("font", "12px sans-serif"); let group = svg.append("g") .call(render, treemap(data)); function render(group, root) { const node = group .selectAll("g") .data(root.children.concat(root)) .join("g"); node.filter(d => d === root ? d.parent : d.children) .attr("cursor", "pointer") .on("click", (event, d) => d === root ? zoomout(root) : zoomin(d)) const myScale = d3.scaleLinear() .domain([0, d3.max(root.leaves().map(leaves => leaves.data.value))]) .range([0.4, 1]); node.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return colors(d.data.name); }) .attr("fill-opacity", d => d.depth <= 1 ? 1 : myScale(d.value)) .attr("stroke", "#fff") .on("mouseover", function(d, data) { if(data.depth == 0){ tooltip2 .html("

"+ plus+"Relevance: " + data.value + "

Algorithm

" + data.data.name + "

") .style('visibility', 'visible'); } if(data.depth == 1){ tooltip2 .html("

"+ plus+"Relevance: " + data.value + "

Domain

" + data.data.name + "

") .style('visibility', 'visible'); } if(data.depth == 2){ tooltip .html("

"+ plus+"Relevance: " + data.data.value + "

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 == 3){ tooltip .html("

"+ plus+"Relevance: " + data.data.value + "

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'); } }).on('mousemove', function (d,data) { if(data.depth == 0){ tooltip2 .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } if(data.depth == 1){ tooltip2 .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"); } if(data.depth == 3){ 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){ tooltip2.style('visibility', 'hidden'); } if(data.depth == 1){ tooltip2.style('visibility', 'hidden'); } if(data.depth == 2){ tooltip.style('visibility', 'hidden'); } if(data.depth == 3){ tooltip.style('visibility', 'hidden'); } }); //----------------------------------------------------------- node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); node.append("text") .attr("clip-path", d => d.clipUid) .attr("font-weight", d => d === root ? "bold" : null) .selectAll("tspan") .data(d => (d === root ? name(d) : d.data.name).split()) .join("tspan") .attr("x", 10) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 1: null) .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "bold" : null) .text(d => d); group.call(position, root); } function position(group, root) { group.selectAll("g") .attr("transform", d => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`) .select("rect") .attr("width", d => d === root ? width : x(d.x1) - x(d.x0)) .attr("height", d => d === root ? 30 : y(d.y1) - y(d.y0)); } // When zooming in, draw the new nodes on top, and fade them in. function zoomin(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.append("g").call(render, d); x.domain([d.x0, d.x1]); y.domain([d.y0, d.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .call(position, d.parent)) .call(t => group1.transition(t) .attrTween("opacity", () => d3.interpolate(0, 1)) .call(position, d)); } // When zooming out, draw the old nodes on top, and fade them out. function zoomout(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.insert("g", "*").call(render, d.parent); x.domain([d.parent.x0, d.parent.x1]); y.domain([d.parent.y0, d.parent.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .attrTween("opacity", () => d3.interpolate(1, 0)) .call(position, d)) .call(t => group1.transition(t) .call(position, d.parent)); } return svg.node(); }32:T705,plus = "

"33:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1614181204416.949,"size":11634},{"id":"a573b37dcbe529fca77ae992253665db528013da295a2d5d3dc96cb012e280f519c7e8fdb12daad26554ce289b3cb89acbbeb08a32798c6ce5ddf0a24bde82e9","href":"https://static.observableusercontent.com/files/a573b37dcbe529fca77ae992253665db528013da295a2d5d3dc96cb012e280f519c7e8fdb12daad26554ce289b3cb89acbbeb08a32798c6ce5ddf0a24bde82e9","name":"flare-2@15.json","type":"application/json","lastModified":1624373458725.544,"size":17274}] 2f:{"id":"6cf4696eae256139","slug":"zoomable-treemap","title":"Zoomable + Wheel Treemap Bruno Azevedo & Francisco Cunha","thumbnail":"8e13cb9132d419defa324a87710177e8d1ec1437a57ec6a797ee884fbef2449e","access_level":"public","create_time":"$D2021-02-24T15:40:04.416Z","update_time":"$D2021-07-05T09:57:29.826Z","view_time":null,"first_public_time":"$D2021-02-24T15:40:11.874Z","fork":{"id":"dffe0d34a20a472b","slug":"zoomable-treemap","title":"Zoomable treemap","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"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":1485,"publish_version":1485,"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 + Wheel Treemap Bruno Azevedo & Francisco Cunha","cells":[{"id":0,"value":"md`# Zoomable + Wheel Treemap Bruno Azevedo & Francisco Cunha`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = FileAttachment(\"flare-2@15.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"treemap = data => d3.treemap()\n .tile(tile)\n (d3.hierarchy(data)\n .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":1433,"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', '400px')\n .style('height', '475px')\n .style('visibility', 'hidden')\n .style('padding', '0px')\n .style('padding', '10px')\n .style('background', 'rgba(255,255,255)')\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":1418,"value":"tooltip2 = 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', '0px')\n .style('padding', '10px')\n .style('background', 'rgba(255,255,255)')\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":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":60,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 924","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":402,"value":"colors = function(name) {\n \n var colors = {\n \n \"TreeMap\" : \"#fff\",\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":1485,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"color = d3.scaleOrdinal()\n.domain(treemap(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":1343,"value":"tagWithOptions = impl => (...args) => {\n if (!Array.isArray(args[0])) {\n return impl(args[0]);\n }\n return impl({})(...args);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"css = tagWithOptions(({ transform }) => (...args) => {\n const source = interpolate(...args);\n const style = html`