chart = { const svg = d3.select(DOM.svg(width, height)) .attr("transform", "rotate(-90)"); var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0) .style("width", "250px") .style("height", "85px") .style("background-color", "white") .style("position", "absolute") .style("font", "12px sans-serif") .style("padding", "2px") .style("z-index", "1000") .style("pointer-events", "none"); svg.append("g") .classed("x-axis", true) .style("display", "none") .call(xAxisG); svg.append("g") .classed("y-axis", true) .style("display", "none") .call(yAxisG); // Pan and zoom var zoom = d3.zoom() .scaleExtent([.2, 20]) .extent([[0, 0], [width, height]]) .on("zoom", zoomed); var initTransform = d3.zoomIdentity.translate(20, 120).scale(0.38); var zoomContainer = svg.append("rect") .classed("zoom-container", true) .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all") .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') .call(zoom) .transition() .call(zoom.transform, initTransform); svg.append("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "none") .selectAll("circle") .data(data) .enter().append("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", 3) .on("mouseover", function(d) { tooltip.transition().duration(50).style("opacity", 1); tooltip.html(`${toTitleCase(d.name)}
Excelent Science: ${d3.format(".3p")(d.p1)}
Industrial Leadership: ${d3.format(".3p")(d.p2)}
Societal challenges: ${d3.format(".3p")(d.p3)}
EC total contribution: €${d3.format(".5s")(d.total)} `) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(200) .style("opacity", 0); }); function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .classed("text-container", true) .selectAll("text") .data(data) .enter().append("text") .filter(d => d.name == "Universitat Pompeu Fabra") .attr("transform", d => `rotate(90, ${x(d.x)}, ${y(d.y)})`) .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .text(d => toTitleCase(d.name)) .style("fill", "black") .style("font-weight", "bold") .on("mouseover", function(d) { tooltip.transition().duration(200).style("opacity", 1); tooltip.html(`${toTitleCase(d.name)}
Excelent Science: ${d3.format(".3p")(d.p1)}
Industrial Leadership: ${d3.format(".3p")(d.p2)}
Societal challenges: ${d3.format(".3p")(d.p3)}
EC total contribution: €${d3.format(".3s")(d.total)}`) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(200) .style("opacity", 0); }) .style("cursor", "default") .call(dodge); var triangleG = svg.append("g").classed("triangle-container", true); //[[0,0,sideLength,0],[0,0, sideLength/2, sideLength], [sideLength,0,sideLength/2, sideLength]] triangleVertex.forEach( p => { triangleG.append("line") .attr("x1", x(p[0])) .attr("y1", y(p[1])) .attr("x2", x(p[2])) .attr("y2", y(p[3])) .attr("stroke-width", 2) .attr("stroke", "black"); }); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("font-weight", "bold") .classed("label-container", true) .selectAll("text") .data(["Excellent Science", "Industrial Leadership", "Societal Challenges"]) .enter().append("text") .attr("x", (d, i) => x(triangleVertex[i][0])) .attr("y", (d, i) => y(triangleVertex[i][1])) .attr("dy", (d, i) => (i == 2? -8 : 18)) .style("text-anchor", "middle") .text(d => d) .attr("transform", (d, i) => `rotate(90, ${x(triangleVertex[i][0])}, ${y(triangleVertex[i][1])})`); return svg.node(); }