29:null 2a:["$","title",null,{"children":"TimeTravel | Francisco Cunha | Observable"}] 2f:T482e,drawData = function(svg) { svg.append("text") .join("tspan") .attr("x", margin.left) .attr("y", (height * 3 / 5) + 30) .text("Researchers") .style('font-family', '"Open Sans", sans-serif'); //SimulationForce var simulation = d3.forceSimulation(data.object) .force('x', d3.forceX((d) => xScale(parseTime(d.date)))) .force('y', d3.forceY((d) => y(d.domain))) .force('collide', d3.forceCollide(d => d.radius)) .on("tick", tick); console.log(data) var simulation1 = d3.forceSimulation(data.person) .force('forceX', d3.forceX(width / 2).strength(3)) .force('forceY', d3.forceY(height2 + 250).strength(10)) .force('collide', d3.forceCollide(30).strength(1)) .on('tick', ticked) //ForceSimulation Ticks function tick() { svg.selectAll('#circle1') .attr('class', 'dataPoint') .data(data.object) .attr('cx', d => d.x) .attr('cy', d => d.y); } function ticked() { svg.selectAll('#circle2') .data(data.person) .attr('cx', d => d.x) .attr('cy', d => d.y); } const g = svg.append("g"); let links = []; let links_object_list = []; for (let i = 0; i < data.object.length; i++) { for (let p = 0; p < data.person.length; p++) { for (let j = 0; j < data.links.length; j++) { if (data.object[i].id == data.links[j].target && data.person[p].id == data.links[j].source) { const coor = d3.linkVertical()({ source: [data.person[p].x, data.person[p].y], target: [data.object[i].x, data.object[i].y] }), link_object = { color: data.object[i].Color, coord: coor, source_x: data.person[p].x, source_y: data.person[p].y, target_x: data.object[i].x, target_y: data.object[i].y, source: [data.person[p].x, data.person[p].y], target: [data.object[i].x, data.object[i].y], id_source: data.person[p].id, id_target: data.object[i].id }; links.push(coor) links_object_list.push(link_object) } } } } var link = d3.linkVertical() .source(function (d) { return [d.source[0], d.source[1]]; }) .target(function (d) { return [d.target[0], d.target[1]]; }); const gradient1 = g.append("g") .selectAll('linearGradient') .data(links_object_list) .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") g.selectAll("path") .data(links_object_list) .join('path') .attr("d", link) .attr('stroke-opacity', '0') .attr('stroke', d => `url(#gradient1${d.color})`) .attr('id', d => "path" + d.id_source) .attr('class', d => "path" + d.id_target) .attr('fill', 'none'); //Vertical Lines svg.selectAll('.line-decade') .data(xScale.ticks()) .join('line') .attr('class', 'line-decade') .attr('x1', d => xScale(d)) .attr('x2', d => xScale(d)) .attr('y1', 100) .attr('y2', height * 3 / 5 - margin.top) .attr('stroke-width', 1) .attr('stroke', 'lightgray').select(".domain").style('stroke-opacity', '0'); const node = g.append("g") .selectAll("g") .data(data.person) .enter().append("g") node.append('pattern') .attr("id", d => "image"+ d.id) .attr("width", 1) .attr("height", 1) .append("svg:image") .attr("xlink:href", d => d.url) .attr("width", 40) .attr("height", 40); //BeeSwarm svg.selectAll("circle") .data(data.object) .join("circle") .attr('class', d => "circle2" + d.year + "+" + d.id) .attr("id", "circle1") .attr("r", d => d.radius) .attr("fill", d => d.Color) .on('click', function (d) {}) .on("mouseover", function (d, data) { tooltipcircle .html("

" + plus + "Score: 0.0

Date

" + data.date + "

Title

" + data.name + "

DOI

" + data.DOI + "

Knowlage Domain

" + data.domain + "

Keywords

" + data.keywords + "

Authors

" + data.authors + "

") .style('visibility', 'visible'); }) .on('mousemove', function (d) { if (d.clientX > width / 2) { tooltipcircle .style('top', d.clientY + 10 + 'px') .style('left', d.clientX - 425 + 'px') .style("display", "inline-block"); } else { tooltipcircle .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } }) .on('mouseout', function () { tooltipcircle.style('visibility', 'hidden'); }); console.log(data) var most_recent = '' const datalinks = data node.append("circle") //.attr('r', d => Math.random() * 30) .attr('r', 20) .attr("id", "circle2") .attr('class', d => "circle" + d.profile) .attr("fill", d => `url(#image${d.id})`) //.attr("fill", "#d7467e") .on('click', function (d, data) { if (most_recent == data.profile) { d3.selectAll('circle').style("opacity", 1); d3.selectAll('#circle2').style("opacity", 0.6); d3.select(this).attr("stroke", "black").style("opacity", 1) d3.selectAll('#circle2').on('mouseout', function (d, data) { tooltip.style('visibility', 'hidden'); d3.selectAll("path").style('stroke-opacity', '0') d3.selectAll("circle") .attr("stroke", "white") .style("opacity", 1) }); d3.selectAll('#circle2').on('mouseover', function (d, data) { let links3 = []; const links_object_list3 = []; for (let i = 0; i < datalinks.object.length; i++) { for (let p = 0; p < datalinks.person.length; p++) { for (let j = 0; j < datalinks.links.length; j++) { if (datalinks.object[i].id == datalinks.links[j].target && datalinks.person[p].id == datalinks.links[j].source) { const coor3 = d3.linkVertical()({ source: [datalinks.person[p].x, datalinks.person[p].y], target: [datalinks.object[i].x, datalinks.object[i].y] }), link_object3 = { color: datalinks.object[i].Color, coord: coor3, source_x: datalinks.person[p].x, source_y: datalinks.person[p].y, target_x: datalinks.object[i].x, target_y: datalinks.object[i].y, source: [datalinks.person[p].x, datalinks.person[p].y], target: [datalinks.object[i].x, datalinks.object[i].y], id_source: datalinks.person[p].id, id_target: datalinks.object[i].id }; links3.push(coor3) links_object_list3.push(link_object3) } } } } var link3 = d3.linkVertical() .source(function (d) { return [d.source[0], d.source[1]]; }) .target(function (d) { return [d.target[0], d.target[1]]; }); g.selectAll("path") .data(links_object_list3) .join('path') .attr("d", link3) .attr('stroke-opacity', '0') .attr('stroke', d => `url(#gradient1${d.color})`) .attr('id', d => "path" + d.id_source) .attr('class', d => "path" + d.id_target) .attr('fill', 'none'); var image = "

" tooltip .html("

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

" + image + "

" + data.name + "

Ph.D.

ORCID

" + data.profile + "

") .style('visibility', 'visible') filterOver("circle" + data.profile, data.id) d3.select(this).attr("stroke", "black").style("opacity", 1) d3.select(this).style("cursor", "pointer"); }) most_recent = "" } else { most_recent = data.profile d3.selectAll('circle') .style("opacity", 0) d3.select(this) .style("opacity", 1) d3.selectAll('#circle1') .style("opacity", 1) d3.selectAll('#path' + data.profile) .style("opacity", 1) d3.selectAll('#circle2') .on('mouseout', null) d3.selectAll('#circle2') .on('mouseover', null) most_recent = data.profile tooltip.html(``) .style('visibility', 'hidden') d3.select(this) .style("cursor", "pointer") d3.select(this).attr("stroke", "black").style("opacity", 1) }; }) .on('mouseover', function (d, c) { let links3 = []; const links_object_list3 = []; for (let i = 0; i < datalinks.object.length; i++) { for (let p = 0; p < datalinks.person.length; p++) { for (let j = 0; j < datalinks.links.length; j++) { if (datalinks.object[i].id == datalinks.links[j].target && datalinks.person[p].id == datalinks.links[j].source) { const coor3 = d3.linkVertical()({ source: [datalinks.person[p].x, datalinks.person[p].y], target: [datalinks.object[i].x, datalinks.object[i].y] }), link_object3 = { color: datalinks.object[i].Color, coord: coor3, source_x: datalinks.person[p].x, source_y: datalinks.person[p].y, target_x: datalinks.object[i].x, target_y: datalinks.object[i].y, source: [datalinks.person[p].x, datalinks.person[p].y], target: [datalinks.object[i].x, datalinks.object[i].y], id_source: datalinks.person[p].id, id_target: datalinks.object[i].id }; links3.push(coor3) links_object_list3.push(link_object3) } } } } var link3 = d3.linkVertical() .source(function (d) { return [d.source[0], d.source[1]]; }) .target(function (d) { return [d.target[0], d.target[1]]; }); g.selectAll("path") .data(links_object_list3) .join('path') .attr("d", link3) .attr('stroke-opacity', '0') .attr('stroke', d => `url(#gradient1${d.color})`) .attr('id', d => "path" + d.id_source) .attr('class', d => "path" + d.id_target) .attr('fill', 'none'); var image = "

" tooltip .html("

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

" + image + "

" + c.name + "

Ph.D.

ORCID

" + c.profile + "

") .style('visibility', 'visible') filterOver("circle" + c.profile, c.id) d3.select(this).attr("stroke", "black").style("opacity", 1) d3.select(this).style("cursor", "pointer"); }) .on('mouseout', function (d, data) { d3.selectAll("#path" + data.id).style('stroke-opacity', '0') filterOut("circle" + data.profile) d3.select(this).attr("stroke", "white").style("opacity", 1) tooltip.style('visibility', 'hidden'); }) .on('mousemove', function (d, data) { if (d.clientX > width / 2) { tooltip .style('top', d.clientY + 10 + 'px') .style('left', d.clientX - 375 + 'px') .style("display", "inline-block"); } else { tooltip .style('top', d.clientY + 10 + 'px') .style('left', d.clientX + 20 + 'px') .style("display", "inline-block"); } }); /*node.append('text') .text(d => d.name.slice(0, 2)) .attr('x', d => d.x) .attr('y', d => d.y) .style('fill', '#fff') .attr("transform" , `translate(${-10}, ${6.5})`) .attr("font-weight", "bold")*/ //AxisTop /*svg.append('g').call(xAxis).selectAll("text") .attr("transform", "translate(25,10)rotate(270)") .attr("color", "black");*/ d3.select('#clusterButton').on('click', () => { d3.selectAll("path").style('stroke-opacity', '0') d3.selectAll("#circle2").attr("pointer-events", "all"); simulation = d3.forceSimulation(data.object) .force('forceX', d3.forceX((d) => xScale(parseTime(d.date))).strength(1)) .force('forceY', d3.forceY((d) => y(d.domain))) .force('collide', d3.forceCollide(d => d.radius)) .restart() .on("tick", tick); document.getElementById("AllButton").disabled = false; }); d3.select('#groupButton').on('click', () => { d3.selectAll("#cicle2").attr("pointer-events", "none"); d3.selectAll("path").style('stroke-opacity', '0') simulation = d3.forceSimulation(data.object) .force('forceX', d3.forceX((d) => xScale(parseTime(d.date))).strength(6)) .force('forceY', d3.forceY(height / 4).strength(1)) .force('collide', d3.forceCollide(d => d.radius)) .on("tick", tick); //document.getElementById("AllButton").disabled = true; }); d3.select('#NoOneButton').on('click', () => { d3.selectAll('path') .style("stroke-opacity", 0); }); d3.select('#AllButton').on('click', () => { d3.selectAll('path') .style("stroke-opacity", 1); d3.select(".domain").style('stroke-opacity', '0') let links2 = []; const links_object_list2 = []; for (let i = 0; i < data.object.length; i++) { for (let p = 0; p < data.person.length; p++) { for (let j = 0; j < data.links.length; j++) { if (data.object[i].id == data.links[j].target && data.person[p].id == data.links[j].source) { const coor2 = d3.linkVertical()({ source: [data.person[p].x, data.person[p].y], target: [data.object[i].x, data.object[i].y] }), link_object2 = { color: data.object[i].Color, coord: coor2, source_x: data.person[p].x, source_y: data.person[p].y, target_x: data.object[i].x, target_y: data.object[i].y, source: [data.person[p].x, data.person[p].y], target: [data.object[i].x, data.object[i].y], id_source: data.person[p].id, id_target: data.object[i].id }; links2.push(coor2) links_object_list2.push(link_object2) } } } } var link2 = d3.linkVertical() .source(function (d) { return [d.source[0], d.source[1]]; }) .target(function (d) { return [d.target[0], d.target[1]]; }); g.selectAll("path") .data(links_object_list2) .join('path') .attr("d", link2) .attr('stroke-opacity', '0') .attr('stroke', d => `url(#gradient1${d.color})`) .attr('id', d => "path" + d.id_source) .attr('class', d => "path" + d.id_target) .attr('fill', 'none'); }); }30:Td4e,html` `31:T705,plus = "

"32:Ta0a,twitter = "

"33:Te6b,chat = "

"34:Tc95,person = "

"35:[{"id":"b9f9127cbebcd0e520d8bf0b1572dff104c057c4a328be49541b24009007cdb45a95d5e66f23f03a9a2f037f5efbc03b2820b334dd0769cace3136c0e618b04b","href":"https://static.observableusercontent.com/files/b9f9127cbebcd0e520d8bf0b1572dff104c057c4a328be49541b24009007cdb45a95d5e66f23f03a9a2f037f5efbc03b2820b334dd0769cace3136c0e618b04b","name":"BeeSwarm-1@15.json","type":"application/json","lastModified":1689402970345.219,"size":42700},{"id":"18b524318389b7e87e809668c54ac74bdba7ea8483dd7eed2436d0297d4cc84ae4525b4592af684a4d1dc2f8b2bef6f20e386bd880477efa25b5f1967aa9b46f","href":"https://static.observableusercontent.com/files/18b524318389b7e87e809668c54ac74bdba7ea8483dd7eed2436d0297d4cc84ae4525b4592af684a4d1dc2f8b2bef6f20e386bd880477efa25b5f1967aa9b46f","name":"BeeSwarm-1.json","type":"application/json","lastModified":1691146170269.731,"size":45997}] 2d:{"id":"54e3120543b68a49","slug":null,"title":"TimeTravel","thumbnail":"5154b11ef2785bbbed2cf902c428100e3ae9cc5a75e1b389797d87779fbb4dcf","access_level":"public","create_time":"$D2023-07-15T06:36:10.345Z","update_time":"$D2023-08-08T07:50:06.959Z","view_time":null,"first_public_time":"$D2023-07-15T06:36:10.345Z","fork":{"id":"b982056a0c5776f3","slug":"beeswarm-ivissem/2","title":"TimeTravel","owner":{"id":"d6c19ebf8f8d892d","login":"franciscocunha","name":"Francisco Cunha"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d6c19ebf8f8d892d","login":"franciscocunha","name":"Francisco Cunha","avatar_url":"https://avatars-next.observableusercontent.com/5c10beb65607acf07c4a3a0ddb0936d882bac43070ef970ed5d80a26eb87b967","tier":"starter_2024"},"version":2925,"publish_version":null,"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":1,"collection":null,"type":"notebook","body":{"title":"TimeTravel","cells":[{"id":0,"value":"md`# TimeTravel\nThis Visualization was conceptulized, designed and implemented by Bruno Azevedo, Francisco Cunha and Pedro Branco. If you use this algorithm please reference the following article:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"html` \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"chart = d3\n .create('svg')\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"cursor\", \"pointer\")\n .call(domainZoom()\n .x(xScale)\n .axisX(timeline)\n .link(updateData))\n .call(drawData)\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2842,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2770,"value":"x = d3\n .scaleTime()\n .domain(d3.extent(data.object, d => d.date))\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2743,"value":"updateData = (svg, x) => {\n \n svg.selectAll('.dataPoint').attr('cx', d => x(d.date)).select(\".domain\").style('stroke-opacity', '0');\n\n const ticks = svg.selectAll(\".dataPoint\");\n\n ticks.select(\"line\").attr(\"y1\", 6);\n\n ticks.select(\"text\").attr(\"y\", 6);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2731,"value":"import { timelineTop, ms } from \"@notanaccent/timeline\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2704,"value":"import { domainZoom } from \"b6eb2af8e1e6b237\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2724,"value":"timeline = timelineTop()\n .anchor([0, xIntercept])\n .MF(multiFormat)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2741,"value":"multiFormat = [\"shortYear\", \"fullYear\", \"decade\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2726,"value":"xIntercept = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2728,"value":"vOffset = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2722,"value":"multiFormat = Array(3) [\n 0: \"shortYear\"\n 1: \"fullYear\"\n 2: \"decade\"\n]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":890,"value":"md`# Tooltip Style Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"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":1660,"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', '400px')\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":916,"value":"md`# Margin`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({\n left: 20,\n right: 20,\n top: 20,\n bottom: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"md`# xScale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"xScale = d3.scaleTime()\n .domain(timeExtent)\n .nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md`# yScale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"yScale = d3.scaleBand()\n .domain([data.domain])\n .range([height*3/5, margin.top + 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`# Axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"xAxis = g => g\n .attr('transform', `translate(0,${margin.top})`)\n .attr('color', \"white\").attr('stroke-opacity', '0')\n .call(d3.axisTop(xScale))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"md`# TimeExtent`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`Earliest and latest data date`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"timeExtent = {\n const dates = data.object.map((d) => parseTime(d.date)).sort(d3.ascending);\n return [dates[0], dates[dates.length - 1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":" parseTime = d3.timeParse('%Y-%m-%d');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"md`# Height`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"height = 1700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"md`# Iheight`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"iheight = (height / 2) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"height2 = height*3/5 + 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"md`# Padding`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"padding = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"md`# Raio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"radius = 3.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"md`# Importing the data used`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"data = await FileAttachment(\"BeeSwarm-1.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"md`# Cores utilizadas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"color = d3.scaleOrdinal()\n .domain([data.domain])\n .range(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"md`# SlicedData`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"md`Data used to represent Researchers who shared important articles, corresponding to a slice of the original data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"y = d3.scaleBand()\n .domain(families)\n .range([height*3/5, margin.top + 100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"family = data.object.flatMap(d => d.domain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"families = family.filter(function(elem, index, self) {\n return index === self.indexOf(elem);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"md`# Configuração da GRID`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"config = ({\n \tn: data.person.length - 1,\n rowN: 15,\n w: 20,\n h: 20,\n padding1: 30,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`# Função filterOver`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"md `Função aplicada quando se coloca o mouse de cima de um recommender`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"function filterOver(d,c){ \n \n d3.selectAll(\"#circle2\")\n .style('opacity', '0.4');\n \n d3.selectAll('#circle1.' + d) \n .style('opacity', '1'); \n \n d3.selectAll('#path' + c) \n .style('stroke-opacity', '1');\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"md`# Função filterout`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"md `Função aplicada quando se tira o mouse de cima de um recommender`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"function filterOut(d){ \n d3.selectAll('circle')\n .style('opacity', '1');\n \n d3.selectAll('#circle2')\n .style('opacity', '1');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"md `Função aplicada quando se clica num recommender`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"md`# Função filterclick`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"function filterClick(d){\n if (d == \"All\") { \n d3.selectAll('circle')\n .style('opacity', '1'); \n }\n else {\n d3.selectAll('circle')\n .style('opacity', '0');\n \n d3.selectAll('.' + d) \n .style('opacity', '1');\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"md`# CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"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":1602,"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":1604,"value":"css = tagWithOptions(({ transform }) => (...args) => {\n const source = interpolate(...args);\n const style = html`