chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, totalWidth, totalHeight]) .style('background','white'); // Setup D3 beeswarm simulation (a force layout with year and position constraints) const simulation = d3.forceSimulation(nodes_JSON) .force("x", d3.forceX(function(d) { return xScale(d.Year); }).strength(1)) .force("y", d3.forceY(function(d) { return yScale(d.Yposition); })) .force("collide", d3.forceCollide(function(d){ return radius(d.citations+1) })) .stop(); simulation.tick(120); // helper function to get data from the right node function findNodeById(id) { // get it from the data for (let i=0; i 0 && d.type == "Scholarly"){ return "RebeccaPurple" } if (d.citations > 0 && d.type == "Grey") { return "Grey" } else { return "White" } }) .style("stroke", function(d) { if (d.citations > 0) { return "none" } else { if (d.type == "Scholarly") { return "RebeccaPurple" } else { return "Grey" } } }) .style("opacity",function(d) { if (d.mentionedInEdges){ return "1" } else {return "0.5"} }) // add mouse over event listeners .on("mouseover", function(d) { onMouseOver(d) }) .on("mouseout", function(d) { onMouseOut(d) }); //--------------------------------------------------------- // show links associated with selected node function showLinks(d) { let allLinks = document.getElementsByClassName("link"); for (let i=0; i < allLinks.length; i++){ let source = allLinks[i].getAttribute("source") let target = allLinks[i].getAttribute("target") // show sources -- papers that cite the selected paper if (source == "p_"+d.ID) { allLinks[i].setAttribute("opacity","1"); allLinks[i].setAttribute("stroke","MidnightBlue"); } // show targets -- papers listed in the selected paper's reference section if (target == "p_"+d.ID) { allLinks[i].setAttribute("stroke","MidnightBlue"); allLinks[i].setAttribute("opacity","1"); allLinks[i].setAttribute("stroke-dasharray", ("2, 2")) } } } // hide all links function hideLinks(d) { let allLinks = document.getElementsByClassName("link"); for (let i=0; i < allLinks.length; i++){ allLinks[i].setAttribute("stroke","LightGrey"); allLinks[i].setAttribute("opacity","0.5"); allLinks[i].setAttribute("stroke-dasharray", "none") } } //------------------------------------------------------- function onMouseOver(d){ let circle = document.getElementById("p_"+d.ID) //circle.style.stroke = "none"; circle.setAttribute("fill", "MidnightBlue"); tooltip.transition() .duration(200) .style("opacity", 1) tooltip.html(""+ d.title + "
" + d.creator + ", "+ d.Year +"

" + d.citations + " citations"); console.log(tooltip) tooltip._groups[0][0].style.left = ((d.x-500<0)? 0+'px':d.x - 500)+ 'px'; tooltip._groups[0][0].style.top = ((d.y-200<0)? 0+'px':d.y-200+'px'); showLinks(d); } function onMouseOut(d){ let circle = document.getElementById("p_"+d.ID) if (d.type == "Scholarly") { circle.setAttribute("fill", "RebeccaPurple"); } if (d.type == "Grey") { circle.setAttribute("fill", "Grey"); } if (d.citations < 1) { circle.setAttribute("fill", "White"); } tooltip.transition() .duration(500) .style("opacity", 0); hideLinks(d); } /////////////////////////// // LEGEND const legend = svg.append("foreignObject") .attr("width",width) .attr("height",height) .style("pointer-events","none") .append("xhtml:div") .attr("class", "legend") .style("opacity", 1) .style("position", "absolute") .style("width", "360px") .style("top", (margins + 100)+"px") .style("left", (margins)+"px") .style("padding", "10px") .style("font", "10px sans-serif") .style("color","grey") .style("line-height", "175%") .style("background", "none") .style("border", "none") .style("border-radius", "4px") .style("pointer-events", "none"); legend.html("

Size
	Articles with no citations
	Articles with one citation
	Articles with many citations

Color
	Scholarly articles (peer reviewed)
	Grey literature (not peer reviewed)

Saturation
	Referenced by articles in this dataset
	Not referenced in this dataset

Line
	References previous articles
	Cited by future articles

"); /////////////////////// // ADD X-AXIS const x_axis = d3.axisBottom() .scale(xScale) .tickFormat(d3.format("d")); svg.append("g") .attr("transform", "translate(0, "+(totalHeight-margins*2)+")") .call(x_axis); // ADD TITLE svg.append("text") .attr("x", margins + 15) .attr("y", margins) .attr("text-anchor", "left") .style("font", "32px sans-serif") .text("Future of work articles published between 2000 and 2020"); // ADD SUB-TITLE svg.append("text") .attr("x", margins + 15) .attr("y", margins + 50) .attr("text-anchor", "left") .style("font", "24px sans-serif") .text("Which articles are cited the most?"); /////////////////////////// // TOOLTIP const tooltip = svg.append("foreignObject") .attr("width",width) .attr("height",height) .style("pointer-events","none") .append("xhtml:div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("width", "360px") //.style("height", "28px") .style("top", (margins * 3.75)+"px") .style("left", (margins * 8)+"px") .style("padding", "10px") .style("font", "16px sans-serif") .style("line-height", "125%") .style("vertical-align","middle") .style("background", "white") .style("border", "solid 1px RebeccaPurple") .style("border-opacity","0.5") .style("border-radius", "2px") .style("pointer-events", "none"); // COUNT TOTAL PUBLICATIONS FOR EACH YEAR AND GET Y-POS FOR ANNOTATION // initialize an array of annotations for each year let annotations = []; for (let i=startYear; i<=endYear; i++) { annotations.push({"year":i, "pubs":0, "topY":totalHeight}) } // iterate through data.nodes to count pubs per year and find the highest Y position for (let i=0; i= startYear && nodes_JSON[i].Year <= endYear) { for (let j=0; j