2c:null 2d:["$","title",null,{"children":"BeeSwarm Bruno Azevedo & Francisco Cunha Without Images | Francisco Cunha | Observable"}] 32:T480f,/* 1) Links issue (nice to have) 4) Recommenders Pics 5) Zoom (nice to have) */ chart = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); //Recommenders Text svg.append("text") .join("tspan") .attr("x", margin.left) .attr("y", (height * 3 / 5) + 30) .text("Recommenders") .style('font-family', '"Open Sans", sans-serif'); //SimulationForce var 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(radius + padding + 3)) .on("tick", tick); var simulation1 = d3.forceSimulation(data.person) .force('forceX', d3.forceX(width / 2).strength(3)) .force('forceY', d3.forceY(height2 + 200).strength(10)) .force('collide', d3.forceCollide(30).strength(1)) .on('tick', ticked) //ForceSimulation Ticks function tick() { svg.selectAll('#circle1') .data(data.object) .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', 10) .attr('y2', height * 3 / 5 - margin.top) .attr('stroke-width', 1) .attr('stroke', 'lightgray'); const node = g.append("g") .selectAll("g") .data(data.person) .enter().append("g") function ticked() { node.attr("transform", d => `translate(${d.x},${d.y})`); d3.selectAll("#circletext") .attr("transform" , `translate(${-10}, ${5})`) } //BeeSwarm svg.selectAll("circle") .data(data.object) .join("circle") .attr('class', d => "circle2" + d.year + "+" + d.id) .attr("id", "circle1") .attr("r", 5) .attr("fill", d => d.Color) .on('click', function (d) {}) .on("mouseover", function (d, data) { tooltipcircle .html("

" + plus + "Relevance: 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'); }); 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", "#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 + "Relevance: 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 + "Relevance: 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("id", "circletext") .style('fill', '#fff') .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(radius + padding + 3)) .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(radius + padding + 3)) .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); 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'); }); /*ZOOM svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", zoomed)); function zoomed({transform}) { g.attr("transform", transform); } */ return svg.node(); }33:Td4e,html` `34:T705,plus = "

"35:Ta0a,twitter = "

"36:Te6b,chat = "

"37:Tc95,person = "

"38:[{"id":"855304f81bf4c2060202a9045bf3d998487bbdb022d131914391d054c629ca637656352e78b27293eb143eb9ebcf96618f2083a690f8d4f3fcd58dcb02bf8da6","href":"https://static.observableusercontent.com/files/855304f81bf4c2060202a9045bf3d998487bbdb022d131914391d054c629ca637656352e78b27293eb143eb9ebcf96618f2083a690f8d4f3fcd58dcb02bf8da6","name":"BeeSwarm-1.json","type":"application/json","lastModified":1624956886614.438,"size":34827}] 30:{"id":"3c9c1cd0b94027ca","slug":"beeswarm-bruno-azevedo-francisco-cunha-without-images","title":"BeeSwarm Bruno Azevedo & Francisco Cunha Without Images","thumbnail":"b804164daaaaa921b3ec595c09251409d51ab8701e99c42f3398f8935cdaa4dc","access_level":"public","create_time":"$D2021-06-29T08:14:52.257Z","update_time":"$D2022-10-19T17:35:32.030Z","view_time":null,"first_public_time":"$D2021-06-29T08:56:00.007Z","fork":{"id":"b982056a0c5776f3","slug":"beeswarm-ivissem/2","title":"TimeTravel","owner":{"id":"d6c19ebf8f8d892d","login":"franciscocunha","name":"Francisco Cunha"}},"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":2652,"publish_version":2652,"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":0,"collection":null,"type":"notebook","body":{"title":"BeeSwarm Bruno Azevedo & Francisco Cunha Without Images","cells":[{"id":0,"value":"md`# BeeSwarm Bruno Azevedo & Francisco Cunha Without Images`","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":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"md`# Configuração do estilo utilizado na tooltipo`","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)')\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)')\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\")\n .call(d3.axisTop(xScale))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"md`# TimeExtente`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`Data mais antiga e data mais recente dos dados`","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`# Importação dos dados utilizados`","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`Dados utilizados para representar os recommenders, Correspondem a um slice dos dados originais`","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`