A D3 precission and recall diagram example

I need to illustrate 28152 different simulations in a precission and recall diagram with D3.

CSV data

A have a CSV file with 28152 precission and recall values that looks something like that.

precission recall
0.841 0.658
0.841 0.658
0.812 0.672
0.812 0.672
0.840 0.648
0.840 0.648
0.840 0.648
0.840 0.648
0.840 0.648

Creating a responsive diagram

I will start by creating a responsive precission and recall diagram.

<style>
#wrapper {
    position: relative;
    height: 0;
    width: 100%;
    padding: 0;
    padding-bottom: 100%;
}
#wrapper > svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
</style>
<div id="wrapper"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>

The necessary JavaScript code looks like this.

var width = 512,
    height = 512,
    margin = {top: 30, right: 30, bottom: 30, left: 30},
    totalWidth = width + margin.right + margin.left;
    totalHeight = height + margin.top + margin.bottom;
    svg = d3.select("#wrapper")
        .attr("style", "padding-bottom: " + Math.ceil(totalWidth * 100 / totalHeight) + "%")
        .append("svg")
        .attr("viewBox", (-margin.left) + " " + (-margin.top) + " " + totalWidth + " " + totalHeight);

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

svg.append("g").attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .append("text")
    .attr("fill", "#000")
    .attr("class", "label")
    .attr("x", width)
    .attr("y", -6)
    .style("text-anchor", "end")
    .text("Precission");
svg.append("g").call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "1em")
    .attr("text-anchor", "end")
    .text("Recall");

Loading the CSV data

I am loading the CSV data and printing the 28152 different simulations with the following additional CSS and JavaScript code.

<style>
.dot {
    fill: #10c1ac;
}
</style>
var spaceDsvParser = d3.dsvFormat(' ');
d3.request(precissionAndRecallFilePath)
    .mimeType("text/csv")
    .response(function(xhr) { return spaceDsvParser.parse(xhr.responseText); })
    .get(function(error, data) {
        if (error) throw error;

        x.domain([0, 1]);
        y.domain([0, 1]);

        svg.selectAll(".dot")
            .data(data)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("r", 1)
            .attr("cx", function(d) { return x(d.precission); })
            .attr("cy", function(d) { return y(d.recall); });
    });
Next Previous