bubble-script.blade.php

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);
    });
}