34:["$","title",null,{"children":"VIS–DBLP Collaboration Visualization | Lucas Barcellos Oliveira | Observable"}] 3c:T3c8a,svg={ while (!data) yield "LOADING... PLEASE WAIT!" const fontSize=72, blur=1.5, vMin=2, vRandMax=5, wiggle=10, toStart=100, vStripe=1; let height=width*16/9, cx=width/2, cy=height/3; if (orientation=="Landscape"){ height=width*9/16; cy=height/2; } let svg=d3.select(DOM.svg(width, height)); if (orientation=="Rotated"){ svg.attr("transform","rotate(90)"); svg.attr("height",width); //*9/16? svg.attr("width",width); } let bg=svg.append("rect").attr("width",width).attr("height",height); svg.append('defs').append('style').attr('type','text/css').text("@font-face{font-family: firstFont; src: url('https://rawcdn.githack.com/lucasbarcellosoliveira/fonts/cfc1474e90dc635492d6b540d02bece76f7a7aa4/JennaSue.ttf');} @font-face{font-family: otherFont; src: url('https://rawcdn.githack.com/lucasbarcellosoliveira/fonts/f5d3cf988a69b193de9acbe96e81500cc4d8af00/hwygnrrw.ttf');}"); svg.append('defs').append("filter").attr("id","blur").append("feGaussianBlur").attr("in","sourceGraphic").attr("stdDeviation",blur); let fallingCollumns=3, rowDistance=16, randomness=200;//, speedFactor=150; //4 16 100 100 let collaborators=shuffleArray(Object.keys(data[nameInput])); for (let i=0;inameInput.split(" ").includes(d)).filter(Boolean).length>=2) //tries to remove duplicates collaborators.splice(i,1); } //if (collaborators.length<=100) //to increase duration for authors with less collaborators // collaborators=collaborators.concat(collaborators).concat(collaborators); //let oldestCollaboration=parseInt(collaborators.map(c=>data[nameInput][c].map(p=>p.year).reduce((a,b)=>Math.min(a,b))) // .reduce((a,b)=>Math.min(a,b))); let falling=svg.append("g"), stripes=svg.append("g"); let previousX=new Array(fallingCollumns).fill(0), previousY=new Array(fallingCollumns).fill(0), previousVRand=0; let onScreen=[], next=0; for (let i=0;ip.year).reduce((a,b)=>Math.min(a,b)) //); let newestPublication=parseInt( data[nameInput][collaborators[i]].map(p=>p.year).reduce((a,b)=>Math.max(a,b)) ); stripes.append("text") //stripes .attr("transform","rotate(90)") .attr("vRand",vRand) .attr("id","stripe"+i) .attr("x",0) //-height for -90 .attr("y",-ini.x-collaborators[i].length*8) //ini.x for -90 .attr("font-size",fontSize*0.35) .attr("font-family","otherFont") .text(data[nameInput][collaborators[i]].map( d=>d.title+" "+d.venue+". "+d.year+". ").join().toUpperCase().repeat(20)) .attr("pointer-events","none") .attr("opacity",0) .attr("fill",function(){ if (2019-newestPublication<=2) return "#FFDF8F"; //rgb(255,223,143) if (2019-newestPublication<=5) return "#BB9954"; //rgb(187,153,84) if (2019-newestPublication<=8) return "#AC8C48"; //rgb(172,140,72) else return "#735826"; //rgb(115,88,38) }); //.attr("fill","#DDFF"+("0"+(256-Math.round(255*(oldestPublication-oldestCollaboration)/(2019-oldestCollaboration))).toString(16)).substr(-2)); let articles=data[nameInput][collaborators[i]]; articles=articles.concat(articles).concat(articles); //triples number of replicas for (let j=1;j-10){ stripe.transition().duration(250).attr("opacity",0.5); stripe.attr("x",parseInt(stripe.attr("x"))-vStripe-stripe.attr("vRand")); } if(selected.attr("y")>height+10){ onScreen=onScreen.filter(function(d){return d!=i}); while (next in onScreen) next=(next+1)%collaborators.length; onScreen.push(next) next=(next+1)%collaborators.length; stripe.transition().duration(250).attr("opacity",0); stripe.attr("x",0); selected.attr("y",-parseInt(selected.attr("iniY"))); falling.selectAll(".satellite"+i).each(function(d,i){ d3.select(this).attr("y",-parseInt(d3.select(this).attr("iniY"))); }); } }); //falling.selectAll("text").each(function(d,i){ //d3.select(this).attr("y",parseInt(d3.select(this).attr("y"))+vMin+parseInt(d3.select(this).attr("vRand"))); //let collaboratorIdx=d3.select(this).attr("collaboratorIdx") //let stripe=stripes.select("#stripe"+collaboratorIdx); //if(d3.select(this).attr("y")>-10&&d3.select(this).attr("y")d.title+" "+d.venue+". "+d.year+". ").join().toUpperCase().repeat(20),c,svg); //// done=true; ////} //stripe.each(function(d,i){d3.select(this).transition().duration(250).attr("opacity",0.5);}); //stripe.each(function(d,i){d3.select(this).attr("x",parseInt(stripe.attr("x")) // -vStripe //+vStripe for 90 // -d3.select(this).attr("vRand"));}); //} //if(d3.select(this).attr("y")>height+10){ //stripe.each(function(d,i){d3.select(this).transition().duration(250).attr("opacity",0);}); //stripe.each(function(d,i){d3.select(this).attr("x",0)}); //d3.select(this).attr("y",-(toStart+rowDistance*Math.floor(collaborators.length/fallingCollumns)*fontSize/2)+height-parseInt(d3.select(this).attr("iniY"))); //name goes back to the top so it can fall again //stripe.each(function(d,i){d3.select(this).attr("x",0)}); //stripe is restarted //} //}); //falling.selectAll(".satellite").each(function(d,i){ // let satellite=d3.select(this), x1=parseInt(satellite.attr("x")), y1=parseInt(satellite.attr("y")); // let newWiggle=Math.round((Math.random()-0.5)*wiggle); // falling.select("#center"+d3.select(this).attr("i")).each(function(d,i){ // let x2=d3.select(this).attr("x"), y2=d3.select(this).attr("y"); // if(Math.abs(x1-x2+newWiggle)<50) // satellite.attr("x",x1+newWiggle); // newWiggle=Math.round((Math.random()-0.5)*wiggle); // if(Math.abs(y1-y2+newWiggle)<50) // satellite.attr("y",y1+newWiggle); // }); //}); //wiggle 2 //falling.selectAll(".satellite").each(function(d,i){ // let newWiggle=Math.round((Math.random()-0.5)*wiggle); // let wiggledX=parseInt(d3.select(this).attr("wiggledX")), wiggledY=parseInt(d3.select(this).attr("wiggledY")); // if(Math.abs(wiggledX+newWiggle)<50){ // d3.select(this) // .attr("x",parseInt(d3.select(this).attr("x"))+newWiggle) // .attr("wiggledX",wiggledX+newWiggle); // } // newWiggle=Math.round((Math.random()-0.5)*wiggle); // if(Math.abs(wiggledY+newWiggle)<50){ // d3.select(this) // .attr("y",parseInt(d3.select(this).attr("y"))+newWiggle) // .attr("wiggledY",wiggledY+newWiggle); // } //wiggle 3 //if(parseInt(d3.select(this).attr("wiggledX"))==0&&parseInt(d3.select(this).attr("wiggledY"))==0){ // let wiggledX=Math.round((Math.random()-0.5)*wiggle), // wiggledY=Math.round((Math.random()-0.5)*wiggle); // d3.select(this) // .attr("x",parseInt(d3.select(this).attr("x"))+wiggledX) // .attr("y",parseInt(d3.select(this).attr("y"))+wiggledY) // .attr("wiggledX",wiggledX) // .attr("wiggledY",wiggledY); //} //else{ // d3.select(this) // .attr("x",parseInt(d3.select(this).attr("x"))-parseInt(d3.select(this).attr("wiggledX"))) // .attr("y",parseInt(d3.select(this).attr("y"))-parseInt(d3.select(this).attr("wiggledY"))) // .attr("wiggledX",0) // .attr("wiggledY",0); //} //}); //d3.timeout(update,10); } //d3.timeout(update,10); while(true){ update(); yield svg.node(); } }3d:T43f,function textOnCurveSVG (text, curve, svg, spread) { let textSize=72; spread = spread || 2 var map = new ArclengthMap(curve); function measure(t){ let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); context.font = textSize*0.35 + 'px ' + "otherFont"; return context.measureText(t).width; } var delta = (map.len(1) - map.len(0) - measure(text)*spread)/2; var textlen = measure(text); var t = [map.t(delta)]; var lastw = 0; for (var i = 1; i <= text.length; i++) { var w = measure(text.substring(0,i)) * spread; t [i] = map.t(w+delta); var baset = (t[i]+t[i-1])/2; var tan = curve.tangent(baset); var pos = curve.point(baset).sub(tan.scale((w-lastw)/2)); svg.append("text") .attr("class","curve") .attr("fill","#FFDF8F") .attr("font-size",textSize*0.35) .attr("font-family","otherFont") .attr("opacity",0.5) .attr("transform","translate("+pos.x+","+pos.y+") rotate(90)") //Math.atan2(tan.y,tan.x) .text(text[i-1]); lastw = w; } }3e:[] 38:{"id":"edcc8e712dafa625","slug":"vis-dblp-collaboration-visualization","title":"VIS–DBLP Collaboration Visualization","thumbnail":"d88706c4e0b2f0eb12521c97ce43c8a74f261c802cc72140b67177d0885b774b","access_level":"public","create_time":"$D2019-05-31T00:27:24.427Z","update_time":"$D2020-10-22T05:58:51.919Z","view_time":null,"first_public_time":"$D2019-05-31T01:46:33.741Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"78ed5d16c7b764e3","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":"starter_2024","bio":"Engenharia de Computação e Informação – UFRJ.\nComputer and Information Engineering at Federal University of Rio de Janeiro – UFRJ.","followed_by_you":false,"follows_you":false},"version":1224,"publish_version":1224,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f921ee8155bda89","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":null,"bio":"Engenharia de Computação e Informação – UFRJ.\nComputer and Information Engineering at Federal University of Rio de Janeiro – UFRJ.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1f921ee8155bda89","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"9145685b152dbd76","slug":"dblp-visap-2019","title":"DBLP - VISAP 2019","owner":{"id":"78ed5d16c7b764e3","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira"}},"type":"notebook","body":{"titling":"auto","title":"VIS–DBLP Collaboration Visualization","cells":[{"id":0,"value":"md`# VIS–DBLP Collaboration Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"fullScreen = {\n let button = html``;\n button.style[\"font-size\"] = \"20px\";\n button.style[\"padding\"] = \"10px\";\n button.onclick=function(){button.parentElement.nextElementSibling.nextElementSibling.requestFullscreen();};\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"viewof orientation = radio({\n title: \"Display Orientation\",\n description: \"Select a mode based on your display preference. Aspect ratio is constant at 16:9.\",\n options: [\"Portrait\", \"Rotated\", \"Landscape\"],\n value: \"Portrait\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof nameInput = autoSelect({\n title: \"Insert your name\",\n description: \"Please, type or select your name from the list.\",\n options: Object.keys(data).sort(),\n value: \"Sheelagh Carpendale\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"function generateCollaborations(collaborators){\n let collaborations={};\n collaborators.forEach(function(d){\n data[nameInput][d].forEach(function(article){\n let key=article.title+\" \"+article.venue+\". \"+article.year+\".\";\n if (key in collaborations)\n collaborations[key].push(d);\n else\n collaborations[key]=[d];\n });\n });\n return collaborations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"mutable data=0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"loadJSONData={\n let fr = new FileReader();\n fr.onload = function() {\n mutable data=JSON.parse(this.result);\n };\n fr.readAsText(uncompress);\n return \"Creating JSON Data\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"uncompress=unzip.files[\"data.json\"].async(\"blob\").then(function(r){return r;});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"unzip={\n return JSZip.loadAsync(zip);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"zip=d3.blob(\"https://rawcdn.githack.com/lucasbarcellosoliveira/fonts/1de7baba38df7c9bc4e30b0e49279ff8225518dc/data.zip\")\n //d3.blob(\"https://rawcdn.githack.com/lucasbarcellosoliveira/fonts/48519dbb9364044c92cfacfb5fc9406549f30af8/data1.zip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"JSZip = require('https://unpkg.com/jszip@3.2.1/dist/jszip.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"import {autoSelect, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3=require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"import {Vec, Bezier} from \"@esperanc/2d-geometry-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"import {ArclengthMap} from \"@esperanc/text-along-a-bezier-curve\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"c=new Bezier(Vec(width/4,0),Vec(width/4,width*10/9),Vec(width*3/4,-width*5/9),Vec(width*3/4,width*15/9))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null