What is the best way to create small multiples in d3.js v6?

1 thought on “What is the best way to create small multiples in d3.js v6?”

1. There’s a few small changes to get it working:

   • When you set the domain on the x scale, you just need the unique segments e.g. A, B, C and not the full list of segments from the data.

   • When you create the 5 SVGs you can class them so that you can refer to each separately when you loop through the values of the metrics. So the first small multiple has a class of one, the second small multiple has a class of two etc

   • Reset the y domain using the set of the_values from the metrics you’re charting – i.e. use d not metrics

   • When you loop metrics first select the small multiple for that metric and then selectAll('.bar')

   • Pass d.value to data as this makes the references to c.the_value etc work properly

   • To prevent adding the x axis multiple times, again select the SVG for the specific small multiple before call(xAxis) otherwise you add as many axes as there are parameters to each small multiple.

   I faked up your data to include random data.

   See the example below – maybe there’s a smarter way to do it:

   // fake data
   var data = ["A", "B", "C"].map(seg => {
     return ["one", "two", "three", "four", "five"].map((par, ix) => {
       return {
         "segment": seg, 
         "parameter": par, 
         "the_value": (Math.floor(Math.random() * 10) + 1) * (Math.floor(Math.random() * 10 * ix) + 1)
       }
     });
   }).flat();
   
   // Set the sizing metrics
   var width = 150;
   var height = 120;
   var margin = {top: 15, right: 10, bottom: 40, left: 35};
   
   // Create the axes
   var xScale = d3.scaleBand()
     .range([0, width])
     .padding(0.1);
   
   var yScale = d3.scaleLinear()
     .range([height, 0]);
   
   var xAxis = d3.axisBottom()
     .scale(xScale);
     
   // set the x domain
   // put unique segments into the domain e.g. A, B, C
   var uniqueSegments = Array.from(new Set(data.map(function(d) {return d.segment;} )));
   xScale.domain(uniqueSegments);
   
   // group the data
   var metrics = Array.from(
     d3.group(data, d => d.parameter), ([key, value]) => ({key, value})
   );
   
   // create a separate SVG object for each group
   // class each SVG with parameter from metrics
   var svg = d3.select('#vis').selectAll('svg')
     .data(metrics)
     .enter()
     .append('svg')
     .attr("class", function(d) { return d.value[0].parameter;});
   
   // loop over the data and create the bars
   metrics.forEach(function(d, i) {
     //console.log(d);
     //console.log(metrics);
     // reset yScale domain based on the set of the_value's for these metrics
     yScale.domain([0, d3.max(d.value, function(c) { return c.the_value; })]);
   
     // select the right svg for this set of metrics
     d3.select("svg." + d.value[0].parameter)
       .selectAll('.bar')
       .data(d.value) // use d.value to get to the the_value
       .enter()
       .append('rect')
       .attr('class', 'bar')
       .attr('x', function(c) { return xScale(c.segment); })
       .attr('width', xScale.bandwidth())
       .attr('y', function(c) { return yScale(c.the_value); })
       .attr('height', function(c) { return height - yScale(c.the_value); })
       .attr('fill', 'teal');
   
     // call axis just on this SVG
     // otherwise calling it 5 times for 5 metrics...
     d3.select("svg." + d.value[0].parameter)
       .append('g')
       .attr('transform', 'translate(0,' + height + ')')
       .call(xAxis)
       
   });

   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"></script>
   <div id='vis'></div>

   Reply