A D3 precission and recall diagram example

Aug 11, 2017 D3 JavaScript

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

CSV data

I 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

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