function drawBubbleGraph(label, container, filter_field) { var url = "/app/ranking/" + label + "/json"; clearContent(container.id); var svg = d3.select(container).append("svg"); d3.json(url).then(data => { data = data.slice(0, 100); var data = data.filter( o => Object.keys(o).some( k => (k == "subject") ? Object.keys(o[k]).some( s => o[k][s].toLowerCase().includes(filter_field.toLowerCase())) : null )); var colors = d3.scaleLinear().domain([0, 1]).range(["#ffffb3", "red"]); var width = container.clientWidth; var height = container.clientHeight; svg.attr("width", "100%"); svg.attr("height", "100%"); svg.attr("font-size", 11) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); pack = data => d3.pack() .size([width - 2, height - 2]) .padding(3) (d3.hierarchy({children: data}) .sum(d => d.score)) const root = pack(data); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); leaf.append("circle") .attr("id", d => (d.leafUid = d.data.id)) .attr("r", d => d.r) .attr("fill-opacity", 0.7) .attr("fill", d => colors(d.data.score)) .on("click", function(d) { window.location = "/app/evidence/" + d.srcElement.id; }); leaf.append("clipPath") .attr("id", d => (d.clipUid = "clip-" + d.data.id)) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") //.data(d => d.data.subject.name.split(/(?=[A-Z][a-z])|\s+/g)) .data(d => Object.values(d.data.subject).join(' | ').split(/(?=[A-Z][a-z])|\s+/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => d); leaf.append("title") .text(d => d.score); }); }