How to create a 'facetplot' in d3.js?

Question

Let's say I have a dataset of different athletes that perform the same test on different days. On each day, they will have several trials/runs. I want to visualise each athlete's development across these days using d3.js but I'm struggling to understand how I can accomplish this task.

Using seaborn in Python or ggplot2 in R, I would have used a facetplot where each day is a facet. Within these facets, I would have the trials on the x-axis and the performance on the I axis. But how can I do this in d3.js?

The d3.group and group allow me to group the dataset by athletes and I understand how I can iterate over each athlete's values. But I don't understand how I can go from here to actually creating a facetplot in d3.js.

I have tried to search for related tutorials on observable but without much luck. One interesting and related visualisation is[Trumps Golfs bt Bostock]. Another one is this scatterplot.

Could someone please help me in the right direction? I have created a simple dataset and scatterplot that may serve as a starter

const data = d3.range(10).map(i => ({
        bib: Math.floor(i / 5) + 1,
        ratio: -1 + Math.random() * 5,
        run: [1, 2, 3, 4, 5][i % 5],
        run: [1, 2, 3, 4, 5][i % 5],
        name: ['GIRL1', 'GIRL2', 'GIRL3', 'GIRL4'][Math.floor(i / 5)]
        }));

        const width = 250;
        const height = 150;
       
        const svg = d3.select('svg')
            .attr('width', width)
            .attr('height', height)

        const margin = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        }

        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;

        const xScale = d3.scaleLinear()
            .domain(d3.extent(data, d => d.run))
            .range([0, innerWidth])
     
        const yScale = d3.scaleLinear()
            .domain(d3.extent(data, d => d.ratio))
            .range([0, innerHeight])

        const g = svg.append('g')
            .attr('transform', `translate(${margin.left},${margin.top})`)

        g.selectAll('circle')
            .data(data)
            .join('circle')
            .attr('r', 3)
            .attr('cx', d => xScale(d.run))
            .attr('cy', d => yScale(d.ratio))

            g.append("g")
                .call(d3.axisBottom(xScale))
                .attr('transform', `translate(0,${innerHeight})`);;
            
            g.append("g")
                .call(d3.axisLeft(yScale))

Plot example from R:

user_7106086 · Answer

Setting up the SVG

First let's set up a convention on how we'll space and structure the page. With only one row of charts, this is a bit easier.

We need to define the variables in the image above. Then we can derive each plot's width and height:

const height = 500;
const width = 500;
const margin = {
   top: 50,
   left: 50,
   right: 50,
   bottom: 50
}
const padding = 10; // labelled `pad` in image due to space constraints

const plotWidth = (width-padding)/numberOfPlots - padding;
const plotHeight = height-padding*2;

Of course you can arrange however you like, my inclusion of this is partially just to make the rest of the answer more understandable.

Below I use a g to hold the area bounded by the margins to make later positioning easier.

Now we also have two different scales, and you've already done this in your code, but we can now define the ranges with plotWidth and plotHeight using the above spacing convention.

Plotting the Data

Now we're ready to create the plots. To do so we'll create a nested data set: we want to group data by plot, and as you noted, we can use d3.group:

 const grouped = d3.group(data,d=>d.bib);

For each grouping we'll create a g and position using a translate based on the above structure:

 const plots = g.selectAll(".plot")
  .data(grouped)
  .enter()
  .append("g")
  .attr("transform", function(d,i) {
     return "translate("+[i*(padding+plotWidth)+padding,padding]+")";
   })

And we're ready to do our plotting using the nested data:

   plots.selectAll(null)
     .data(d=>d[1])
     .enter()
     .append("circle")
     ... // and so forth.

The snippet below uses d=>d[1] as this is where the array of items belonging to that group resides. d[0] is the identifier of the group. If my data array was an array of arrays, I'd simply use d=>d;.

Now we could append the x axis on each plot:

 plots.append("g")
   .attr("transform","translate("+[0,plotHeight]+")")
   .call(d3.axisBottom(x));

And a y axis:

 g.append("g")
   .attr("transform","translate("+[0,padding]+")");
   .call(d3.axisLeft(y));

I haven't added a parent x axis, depending on your use you may want to label it, or not. I also notice that I grouped your data by bib, not by run, but the principles remain the same: group the data, enter and position the parent plots, then add the data points to the parents.

Example

// Data and manipluation:
const data = d3.range(15).map(i => ({
        bib: Math.floor(i / 5) + 1,
        ratio: -1 + Math.random() * 5,
        run: [1, 2, 3, 4, 5][i % 5],
        run: [1, 2, 3, 4, 5][i % 5],
        name: ['GIRL1', 'GIRL2', 'GIRL3', 'GIRL4'][Math.floor(i / 5)]
        }));
        
const grouped = d3.group(data,d=>d.bib);


// Dimensions:
const height = 500;
const width = 500;
const margin = {
       top: 10,
       left: 50,
       right: 50,
       bottom: 50
    }
const padding = 30; // labelled `pad` in image due to space constraints

const plotWidth = (width-padding)/grouped.size - padding;
const plotHeight = height-padding*2;

const svg = d3.select("body")
  .append("svg")
  .attr("width", margin.left+width+margin.right)
  .attr("height", margin.top+height+margin.bottom);
  
const g = svg.append("g")
  .attr("transform","translate("+[margin.left,margin.top]+")");

//Scales:
 const xScale = d3.scaleLinear()
   .domain(d3.extent(data, d => d.run))
   .range([0, plotWidth]);
     
const yScale = d3.scaleLinear()
   .domain(d3.extent(data, d => d.ratio))
   .range([plotHeight, 0]);
   
// Place plots:
const plots = g.selectAll(null)
  .data(grouped)
  .enter()
  .append("g")
  .attr("transform", function(d,i) {
     return "translate("+[i*(padding+plotWidth)+padding,padding]+")";
   })
   
//Optional plot background:
plots.append("rect")
  .attr("width",plotWidth)
  .attr("height",plotHeight)
  .attr("fill","#ddd");
   

// Plot actual data
plots.selectAll(null)
     .data(d=>d[1])
     .enter()
     .append("circle")
     .attr("r", 4)
     .attr("cy", d=>yScale(d.ratio))
     .attr("cx", d=>xScale(d.run))

// Plot line if needed:
plots.append("path")
  .attr("d", function(d) {
    return d3.line()
               .x(d=>xScale(d.run))
               .y(d=>yScale(d.ratio))
               (d[1])
   })
   .attr("stroke", "#333")
   .attr("stroke-width", 1)
   .attr("fill","none")
   
// Plot names if needed:
plots.append("text")
  .attr("x", plotWidth/2)
  .attr("y", -10)
  .text(function(d) {
    return d[1][0].name;
  })
  .attr("text-anchor","middle");
   
// Plot axes     
 plots.append("g")
   .attr("transform","translate("+[0,plotHeight]+")")
   .call(d3.axisBottom(xScale).ticks(4));


 g.append("g")
   .attr("transform","translate("+[0,padding]+")")
   .call(d3.axisLeft(yScale))

Which should produce:

user_16363 · Answer

Well for the second time today @AndrewReid beat me to it and of course his answer is very much perfect (I love the diagram).

Regardless here's my entry. The big difference is that I used a d3.scaleBand (and data binding) to place each child line chart while he did it more manually).

How to create a 'facetplot' in d3.js?

2 Answers