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.Xposition); })) .force("collide", d3.forceCollide(function(d){ return radius(d.citations+1) })) .stop(); simulation.tick(120); //////////////////////////// // ADD NODES TO THE PAGE const circles = svg.append('g').selectAll(null) .data(nodes_JSON) .enter() .append("circle") .attr("id", function(d){ return "p_"+d.ID }) .attr("year", function(d){ return d.Year }) .attr("r", function(d){ return radius(d.citations) }) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) // style them .attr("fill", function(d) { if (d.citations > 0){ return "RebeccaPurple" } else {return "LightGrey"} }) .style("stroke", function(d) { if (d.citations > 0){ return "none" } else {return "RebeccaPurple"} }) .style("opacity","0.8") // add mouse over event listeners .on("mouseover", function(d) { onMouseOver(d) }) .on("mouseout", function(d) { onMouseOut(d) }); //--------------------------------------------------------- //////////////////////////// // ADD EDGES TO THE PAGE var link = svg.append("g") .selectAll("path") .data(edges_JSON) .enter().append("path") .attr("class", "link") .attr("stroke-width", "1") .attr("stroke", "MidnightBlue") .attr("stroke-dasharray", "none") .attr("opacity","0") // make invisible to begin .attr("fill","none") .attr("source", function(d) { return "p_" + d.Source }) .attr("target", function(d) { return "p_" + d.Target }) .attr("d", function(d) { var dx = parseFloat(findNodeById(d.Target).x) - parseFloat(findNodeById(d.Source).x), dy = parseFloat(findNodeById(d.Target).y) - parseFloat(findNodeById(d.Source).y), dr = Math.sqrt(dx * dx + dy * dy); return "M" + findNodeById(d.Source).x + "," + findNodeById(d.Source).y + "A" + dr + "," + dr + " 0 0,1 " + findNodeById(d.Target).x + "," + findNodeById(d.Target).y; }); // helper function to get data from the right node function findNodeById(id) { // get it from the data for (let i=0; i"+ d.title + "
" + d.creator + ", "+ d.Year +"

" + d.citations + " citations"); //showLinks(d); } function onMouseOut(d){ let circle = document.getElementById("p_"+d.ID) if (d.citations > 0) { circle.setAttribute("fill", "RebeccaPurple"); } else { circle.style.stroke = "RebeccaPurple"; circle.setAttribute("fill", "LightGrey"); } 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 + 70)+"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("Articles with no citations
Articles with one citation
Articles with many citations"); /////////////////////////// // 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 + 70)+"px") .style("left", (margins)+"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"); /////////////////////// // ADD X-AXIS const x_axis = d3.axisBottom() .scale(xScale) .tickFormat(d3.format("d")); svg.append("g") .attr("transform", "translate(0, "+(totalHeight-margins)+")") .call(x_axis); // ADD TITLE svg.append("text") .attr("x", margins) .attr("y", margins) .attr("text-anchor", "left") .style("font", "18px sans-serif") .text("How many articles about the future of work are published each year?"); // ADD SUB-TITLE svg.append("text") .attr("x", margins) .attr("y", margins + 30) .attr("text-anchor", "left") .style("font", "14px sans-serif") .text("And which ones are cited the most?"); // 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