2b:null 2c:["$","title",null,{"children":"BiLevel Visualization | Francisco Cunha | Observable"}] 31:T2d24,chart = { const svg = d3.select(DOM.svg(1000, 1000)) .style("width", "100%") .style("height", "auto") .style("padding", "8px") .style("box-sizing", "border-box") .style("font", "10px sans-serif") .on('click',function(d, root){ tooltipcircle.style('visibility', 'hidden') tooltip.html(``).style('visibility', 'hidden');}) sessionStorage.setItem('allbutton', 'disable'); const g = svg.append("g"); const gradient1 = g.append("g") .selectAll('linearGradient') .data(data.list_person.concat(data.list_object)) .enter().append('linearGradient') .attr("id", d => "gradient1" + d.color) .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 => d.color); 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(data.list_person.concat(data.list_object)) .enter().append('linearGradient') .attr("id", d => "gradient2" + d.color) .attr("spreadMethod", "reflect") .attr('cx', width/2) .attr('cy', height/2) .attr('r', 600); gradient2 .append("stop") .attr("offset", "30%") .attr("stop-color",d => d.color ) 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").selectAll("path") .data(data.links) .enter() .append("path") .style("fill", "none") .attr("link_list", d => d.link_list) .attr("stroke-opacity", 0.0) .attr("stroke-width", 0) .attr("d", function(d){ var lineData = [ { x: Math.round(d.target_x), y: Math.round(d.target_y) }, { x: Math.round(d.target_x) - Math.round(d.target_x)/2, y: Math.round(d.target_y) - Math.round(d.target_y)/2 },{ x: Math.round(d.source_x) - Math.round(d.source_x)/2, y: Math.round(d.source_y) - Math.round(d.source_y)/2 },{ x: Math.round(d.source_x), y: Math.round(d.source_y) }]; return`M${lineData[0].x},${lineData[0].y}C${lineData[1].x},${lineData[1].y},${lineData[2].x},${lineData[2].y},${lineData[3].x},${lineData[3].y}`;}) .attr("id", d => "path" + d.uid) .attr("class", d => "path" + d.uid1) .attr("stroke", d => Math.cos(d.angle) < 0 ? `url(#gradient1${d.color})`:`url(#gradient2${d.color})`) const node = g.append("g") .selectAll("g") .data(data.list_object.concat(data.list_person)) .enter().append("g") var most_recent = '' node.append('circle') .attr('r', d => d.type == "object" ? 16 : 0) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('name', d=> d.name) .attr('link_list', d=> d.link_list) .attr('opacity', 1) .attr("id", d => "circle" + d.uid) .attr("class", d => "circle" + d.uid) .style('fill', d => d.color) .on('click', function(d,root){ if (most_recent == root.uid) { d3.selectAll("text") .attr("pointer-events", "all"); d3.selectAll('circle') .style("opacity", 0.4) d3.select('#circle' + root.uid) .style("opacity", 1) d3.selectAll('circle') .on('mouseout', function(d, root){ d3.select(this) .style("cursor", "default") filterOut(root.uid, root.color) }) d3.selectAll('circle') .on('mouseover', function(d, root){ var allbutton = sessionStorage.getItem('allbutton'); if (allbutton == "enable"){ return null }else{ filterOut(root.uid, root.color) d3.select(this) .style("cursor", "pointer") tooltipcircle .html("

"+ plus+"Score: 0.0

Year

" + root.year + "

Title

" + root.name + "

DOI

" + root.DOI + "

Knowlage Domain

" + root.domain + "

Keywords

" + root.keywords + "

Authors

" + root.authors + "

") .style('visibility', 'visible') filterOver(root.uid, root.color) }}) most_recent = '' }else{ d3.selectAll('circle') .style("opacity", 0) d3.select('#circle' + root.uid) .style("opacity", 1) d3.selectAll('#path' + root.uid) .style("opacity", 1) d3.selectAll('circle') .on('mouseout', null) d3.selectAll('circle') .on('mouseover', null) most_recent = root.uid tooltipcircle.html(``) .style('visibility', 'hidden') d3.select(this) .style("cursor", "pointer") d3.selectAll("text") .attr("pointer-events", "none"); } }) .on('mouseover', function(d, root){ var allbutton = sessionStorage.getItem('allbutton'); if (allbutton == "enable"){ return null } else { tooltipcircle .html("

"+ plus+"Score: 0.0

Year

" + root.year + "

Title

" + root.name + "

DOI

" + root.DOI + "

Knowlage Domain

" + root.domain + "

Keywords

" + root.keywords + "

Authors

" + root.authors + "

") .style('visibility', 'visible') filterOver(root.uid, root.color) d3.select(this).style("cursor", "pointer") } }) .on('mouseout', function(d, root){ var allbutton = sessionStorage.getItem('allbutton'); if (allbutton == "enable"){ return null } else { filterOut(root.uid, root.color) tooltipcircle }}).on('mousemove', function (d) { tooltipcircle .style('top', d.clientY + 40 + 'px') .style('left', d.clientX + 40+ 'px') .style("display", "inline-block") }); node.append("text") .attr("dy", "0.31em") .attr("transform", d => ` rotate(${(d.angle * 180 / Math.PI)}) translate(${d.gen_radius + d.transform_text}) ${Math.cos(d.angle) < 0 ? "rotate(180)" : ""} `) .attr("text-anchor", d => Math.cos(d.angle) < 0 ? "end" : null) .attr("font-size", "20") .attr('opacity', 1) .attr("class", d => d.id) .text(d => d.type == "object" ? null : d.name) .on("mouseover", function(d, root) { var allbutton = sessionStorage.getItem('allbutton'); if (allbutton == "enable"){ filteroverwithall(root.uid, root.colour) } else { filterOvername(root.uid, root.colour) } d3.select(this).attr("font-weight", 600) d3.select(this).attr("font-size", 30) d3.selectAll("#textA").attr("fill-opacity","0.6") d3.selectAll("#textZ").attr("fill-opacity","0.6") d3.selectAll("#rect").attr("opacity","1") var image = "

" tooltip .html("

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

" + image + "

" + root.name + "

Ph.D.

Value

"+root.profile+"

") .style('visibility', 'visible')}) .on('mousemove', function (d) { tooltip .style('top', d.clientY + 40 + 'px') .style('left', d.clientX + 40 + 'px') .style("display", "inline-block"); }) .on('mouseout', function (d,root) { d3.select(this).attr("font-weight", 100) d3.select(this).attr("font-size", 20) var allbutton = sessionStorage.getItem('allbutton'); if (allbutton == "enable"){ filterOutwithall(root.uid, root.colour) } else { filterOutname(root.uid, root.colour) } d3.selectAll("#textA").attr("fill-opacity","0") d3.selectAll("#textZ").attr("fill-opacity","0") d3.selectAll("#rect").attr("opacity","0") }); node.append("text") .attr("y", -1320) .attr("x", 25) .attr("id", "textA") .attr("font-size", "40") .style('fill', "#e6e6e6") .attr("fill-opacity","0") .text("A") node.append("text") .attr("y", -1320) .attr("x", -50) .attr("font-size", "40") .attr("id", "textZ") .style('fill', "#e6e6e6") .attr("fill-opacity","0") .text("Z") node.append('rect') .attr('x', 0) .attr('y', -1300) .attr("id", "rect") .attr('width', 1) .attr('height', 300) .attr("fill", "#e6e6e6") .attr('opacity', 0); svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([0.75, 8]) .on("zoom", zoomed)); function zoomed({transform}) { g.attr("transform", transform); } d3.select('#NoOneButton').on('click', () => { sessionStorage.setItem('allbutton', 'disable'); d3.selectAll('circle').attr("pointer-events", "all"); d3.selectAll('path') .attr("stroke-width", 0) .attr("stroke-opacity", 0); d3.selectAll("text").attr("pointer-events", "all"); }); d3.select('#AllButton').on('click', () => { sessionStorage.setItem('allbutton', 'enable'); d3.selectAll('path') .attr("stroke-width", 3) .attr("stroke-opacity", 1); d3.selectAll('circle') .style("opacity", 1) //.attr("pointer-events", "none"); // d3.selectAll("text").attr("pointer-events", "none"); }); return svg.attr("viewBox", autoBox).node(); }32:Tb5d,function circle_gen(data, gen_radius, transform_text, scale_color, inc_angle, type) { var result = [] var coor = new Map; var num = new Map; var max_scale = d3.max(data, d => d.values.length) var min_scale = d3.min(data, d => d.values.length) var radius_scale = d3.scaleLinear() .domain([min_scale, max_scale]) .range([10, 10]) var object_id = -data.length/4 + 0.5; if(type == "person"){ data.forEach(d => { var new_object = Object(); new_object.name = d.name; new_object.profile = d.profile; new_object.url = d.url; new_object.angle = object_id * inc_angle; new_object.uid = d.id; new_object.id = object_id; new_object.x = gen_radius * Math.cos(object_id * inc_angle); new_object.y = gen_radius * Math.sin(object_id * inc_angle); new_object.radius = radius_scale(d.values.length); new_object.colour = scale_color(object_id); new_object.gen_radius = gen_radius; new_object.transform_text = transform_text; new_object.link_list = d.values; new_object.type = type; num.set(new_object.name, d.values.length); coor.set(new_object.name, {x:new_object.x, y:new_object.y, angle: new_object.angle, name: new_object.name, uid: new_object.uid, color: scale_color(object_id)}); result.push(new_object); object_id = object_id + 1; }) }else { data.forEach(d => { var new_object = Object(); new_object.name = d.name; new_object.DOI = d.DOI; new_object.color = d.Color; new_object.domain = d.domain; new_object.link = d.link; new_object.authors = d.authors; new_object.year = d.year; new_object.keywords = d.keywords; new_object.angle = object_id * inc_angle; new_object.uid = d.id; new_object.id = object_id; new_object.x = gen_radius * Math.cos(object_id * inc_angle); new_object.y = gen_radius * Math.sin(object_id * inc_angle); new_object.radius = radius_scale(d.values.length); new_object.Color = scale_color(object_id); new_object.gen_radius = gen_radius; new_object.transform_text = transform_text; new_object.link_list = d.values; new_object.type = type; num.set(new_object.name, d.values.length); coor.set(new_object.name, {x:new_object.x, y:new_object.y, name: new_object.name, uid: new_object.uid, color: d.Color}); result.push(new_object); object_id = object_id + 1; })}; return {result, coor, num}; }33:Ta9d,// Cargo los datos del JSON data = { const data_file = await FileAttachment("data-4@1.json").json() const height = 2000; const cx = width / 2; const cy = height / 2; const person_radius = external; const object_radius = internal; const n_person = data_file.person.length; const n_object = data_file.object.length; const color_person = d3.scaleSequential() .domain([0, n_person]) .interpolator(d3.interpolateHslLong("rgba(219, 58, 52, 1.0)", "rgba(219, 58, 52, 1.0)")) const color_object = d3.scaleSequential() .domain([0, n_object]) .interpolator(d3.interpolateRgb("rgba(23, 126, 137, 1.0)", "rgba(23, 126, 137, 1.0)")) const angle_person = 2 * Math.PI/n_person; const person = "person"; const object = "object"; var result_person = circle_gen(data_file.person.slice().sort((a, b) => d3.ascending(a.name, b.name)), person_radius, 15, color_person, angle_person, person) const angle_object = 2 * Math.PI/n_object; var result_object = circle_gen(data_file.object.slice().sort((a, b) => d3.ascending(a.domain, b.domain)), object_radius, 15, color_object, angle_object, object) var links = [] data_file.person.forEach(d => { var source = result_person.coor.get(d.name); d.values.forEach(v => { var target = result_object.coor.get(v); var root = linker({source_x: source.x, source_y: source.y, target_x: target.x, target_y: target.y}); var color = target.color; var target_x = target.x var target_y = target.y var source_x = source.x var source_y = source.y var angle = source.angle links.push({root: root, color: color, target_x:target_x, target_y:target_y, source_x:source_x, source_y:source_y, n_object: result_object.num.get(v), uid: target.uid, uid1: source.uid, angle:angle, link_list: [source.name, target.name]}); }); }); var list_person = result_person.result; var list_object = result_object.result; return { width, height, list_person, list_object, person_radius, object_radius, links }; }34:T705,plus = "

"35:Ta0a,twitter = "

"36:Te6b,chat = "

"37:Tc95,person = "

"38:T9f6,html` `39:[{"id":"8b719cccaaf7a3c16183e3c69fac6541d2169b23dc9c7e24840c7c7cf6b9abf2e25a29d4782a258eba9ad29558cf638039263022ff3fe9b335793ce5e9875e9e","href":"https://static.observableusercontent.com/files/8b719cccaaf7a3c16183e3c69fac6541d2169b23dc9c7e24840c7c7cf6b9abf2e25a29d4782a258eba9ad29558cf638039263022ff3fe9b335793ce5e9875e9e","name":"data-4@1.json","type":"application/json","lastModified":1627384309157.548,"size":87969}] 2f:{"id":"8cfb0663f5c41c94","slug":"bilevel-visualization","title":"BiLevel Visualization","thumbnail":"a91fdba5ca51913ee3c1a109244702277ffb6104327f8a9cb8262eab5f03b81e","access_level":"public","create_time":"$D2021-06-15T18:48:01.455Z","update_time":"$D2022-10-10T15:34:08.503Z","view_time":null,"first_public_time":"$D2021-06-16T09:06:07.687Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"d6c19ebf8f8d892d","login":"franciscocunha","name":"Francisco Cunha","avatar_url":"https://avatars-next.observableusercontent.com/5c10beb65607acf07c4a3a0ddb0936d882bac43070ef970ed5d80a26eb87b967","tier":"starter_2024"},"version":1933,"publish_version":1933,"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":"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":10,"collection":null,"type":"notebook","body":{"title":"BiLevel Visualization","cells":[{"id":0,"value":"md`# BiLevel Visualization\n\nThis Visualization was maded by Bruno Azevedo and Francisco Cunha`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1654,"value":"md`The \"No One\" button takes off all the links that associate Researchers to Article, and the \"All\" button shows all of this links`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"html` \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"function autoBox() {\n document.body.appendChild(this);\n const {x, y, width, height} = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"md`This slider input with the name \"Outter Circle Size\" \nallows the user change the radius of the external circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"viewof external = slider({\n min: 600, \n max: 1000, \n step: 1, \n value: 1000, \n title: \"Outter Circle Size\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"md`This slider input with the name \"Inner Circle Size\" \nallows the user change the radius of the internal circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"viewof internal = slider({\n min: 200, \n max: 900, \n step: 1, \n value: 500, \n title: \"Inner Circle Size\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"width = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"linker = function(d) {\n var x0 = d.source_x;\n var y0 = d.source_y;\n var y1 = d.target_y;\n var x1 = d.target_x;\n \n var path = d3.path();\n path.moveTo(x0, y0)\n path.quadraticCurveTo(x0 - x1 + ((x1-x0)*1),\n y0 / 2 + ((y1-y0)*0),\n x1, y1);\n \n\n \n return path.toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"function filterOver(d, c){ \n\n d3.selectAll('#path' + d) \n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 1);\n \n d3.selectAll('circle').style(\"opacity\", 0.4)\n d3.select('#circle' + d).style(\"opacity\", 1)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"function filterOvername(d, c){ \n \n d3.selectAll('.path' + d) \n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 1);\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"function filterOutname(d, c){ \n d3.selectAll('.path' + d) \n .attr(\"stroke-width\", 0)\n .attr(\"stroke-opacity\", 0);\n \n d3.selectAll('circle').style(\"opacity\", 1)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1735,"value":"function filteroverwithall(d, c){ \n\n d3.selectAll('path') \n .attr(\"stroke-opacity\", 0.07)\n \n d3.selectAll('.path' + d) \n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 1)\n \n \n d3.selectAll('circle').style(\"opacity\", 1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"function filterOut(d, c){ \n d3.selectAll('#path' + d) \n .attr(\"stroke-width\", 0)\n .attr(\"stroke-opacity\", 0);\n \n d3.selectAll('circle').style(\"opacity\", 1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1733,"value":"function filterOutwithall(d, c){ \n \n d3.selectAll('path') \n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 1)\n \n d3.selectAll('circle').style(\"opacity\", 1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"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', '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":786,"value":"tooltipcircle = 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":719,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"facebook = \"

\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"d3 = require(\"d3@^6.2.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"