Have had to create small multiple charts for recent report. These are small charts that help show the same data form but split by a categrical variable. They are really useful when you have a lot of data, and it's hard to see any patterns when they are encoded all together. I tend to get a bit mixed up with the selection process here, so having this as a bit of a template will help a lot!
Group the data by the relevant variable
const grouped_data = Array.from(d3.group(data, d => d.sa4), ([key, value]) => ({ key, value }))
This groups by the Sa4 variable: the variable we are basing the split of the data
The width should be set to the desired width of each svg - in this case it's going to be 400px
When I select the svg and ink to the html page, I use SelectAll
and the data is the grouped data. In my stack overflow trawls I also came across this nifty class thingy, where you allocate a class name to each of the svg's by the variable you are splittingconst svg = d3.select(".toongabbie_SDA_build_status")
.selectAll("chart")
.data(grouped_data)
.join("svg")
.attr("width", width)
.attr("height", height)
.attr("class", d => d.value[0].sa4)
.attr('transform', `translate(0,${margin.top})`)
Then when drawing the rects, use d.value to access the data that sits under each of the key variables
The full code can be found on my github page here