Rotated heatmap with barchart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
  <style>
    body { margin:25;top:25;right:25;bottom:25;left:25; }
  </style>
</head>

<body>
  <script>
    const data = [
 {
   "thrower": "Tom",
   "catcher": "Sarah",
   "value": 10,
   "gender": "mf"
 },
 {
   "thrower": "Sarah",
   "catcher": "Tom",
   "value": 5,
   "gender": "fm"
 },
 {
   "thrower": "Tom",
   "catcher": "Claire",
   "value": 10,
   "gender": "mf"
 },
 {
   "thrower": "Claire",
   "catcher": "Tom",
   "value": 5,
   "gender": "fm"
 },
 {
   "thrower": "Claire",
   "catcher": "Sarah",
   "value": 15,
   "gender": "ff"
 },
 {
   "thrower": "Sarah",
   "catcher": "Claire",
   "value": 10,
   "gender": "ff"
 },
 {
   "thrower": "James",
   "catcher": "Sarah",
   "value": 15,
   "gender": "mf"
 },
 {
   "thrower": "Sarah",
   "catcher": "James",
   "value": 3,
   "gender": "fm"
 },
 {
   "thrower": "James",
   "catcher": "Claire",
   "value": 20,
   "gender": "mf"
 },
 {
   "thrower": "Claire",
   "catcher": "James",
   "value": 8,
   "gender": "fm"
 },
 {
   "thrower": "Tom",
   "catcher": "James",
   "value": 8,
   "gender": "mm"
 },
 {
   "thrower": "James",
   "catcher": "Tom",
   "value": 10,
   "gender": "mm"
 }
]
    
   
    let chartWidth = 300
    let chartHeight = 300
    let margin = 50
    let padding = 0.1
    let mColour = "#DAA520"
    let fColour = "#48D1CC"
     
    let nestByThrower = d3.nest()
    	.key(function(d){ return d.thrower })
    	.rollup(function(values){ return d3.sum(values, function(d) { return d.value })})
    	.entries(data)
    	.sort(function(a, b){ return d3.descending(a.value, b.value); })
    
    let nestByCatcher = d3.nest()
    	.key(function(d){ return d.catcher })
    	.rollup(function(values){ return d3.sum(values, function(d) { return d.value })})
    	.entries(data)
    	.sort(function(a, b){ return d3.descending(a.value, b.value); })
    
    let scaleThrower = d3.scaleBand()
    	.domain(nestByThrower.map(function(d){ return d.key }))
    	.range([0,chartHeight])
    	.padding(padding)
    
    let scaleCatcher = d3.scaleBand()
    	.domain(nestByCatcher.map(function(d){ return d.key }))
    	.range([0,chartWidth])
    	.padding(padding)
    
    let scaleThrowerTotals = d3.scaleLinear()
    	.domain([0,d3.max(nestByThrower, function(d){ return d.value })])
    	.range([0,chartWidth])
    
    let scaleCatcherTotals = d3.scaleLinear()
    	.domain([0, d3.max(nestByCatcher, function(d){ return d.value })])
    	.range([0, chartHeight])
    
    let cellColour = d3.scaleOrdinal()
    	.domain(["mm", "mf", "fm", "ff"])
    	.range([mColour, mColour, fColour, fColour])
    
    let radius = d3.scaleSqrt()
    	.domain([0, d3.max(data, function(d){ return d.value })])
    	.range([0, scaleCatcher.bandwidth()/2])
    
    let barColour = d3.scaleOrdinal()
    	.domain(["Tom", "James", "Sarah", "Claire"])
    	.range([mColour, mColour, fColour, fColour])
    
    let svg = d3.select("body").append("svg")
      .attr("width", chartWidth + chartWidth + margin)
      .attr("height", chartHeight + chartHeight + margin)
    
    let charts = svg.append("g")
    	.attr("transform", "rotate(45, " + (chartWidth + (margin/2)) + "," + (chartHeight + (margin/2)) + ")")

let heatmap = charts.append("g")
    	.attr("transform", "translate(" + chartWidth + "," + chartHeight + ")")
    	.attr("id", "heatmap")
    
    let cells = heatmap.selectAll(".cell")
    	.data(data)
    	.enter()
    	.append("g")
    	.attr("transform", function(d){
        return "translate(" + scaleCatcher(d.catcher) + "," + scaleThrower(d.thrower) + ")"
      })
    
    /*cells.append("rect")
    	.attr("x", 0)
    	.attr("y", 0)
    	.attr("width", scaleCatcher.bandwidth())
    	.attr("height", scaleThrower.bandwidth())
    	.style("fill", function(d){ return cellColour(d.value) })*/
    
    cells.append("circle")
    	.attr("cx", scaleThrower.bandwidth()/2)
    	.attr("cy", scaleThrower.bandwidth()/2)
    	.attr("r", function(d){ return radius(d.value) } )
    	.style("fill", function(d){ return cellColour(d.gender) })
    
    let catcherBarChart = charts.append("g")
    	.attr("transform", "translate(" + chartWidth + "," + 0 + ")")
    .attr("id", "to-barchart")
    
    let catcherBars = catcherBarChart.selectAll(".bars")
    	.data(nestByCatcher)
    	.enter()
    	.append("g")

catcherBars.append("rect")
    	.attr("x", function(d){ return scaleCatcher(d.key) })
    	.attr("y", function(d){ return chartHeight - scaleCatcherTotals(d.value) })
    	.attr("width", scaleCatcher.bandwidth())
    	.attr("height", function(d){ return scaleCatcherTotals(d.value) })
    .style("fill", function(d){ return barColour(d.key) })
    
    
    let throwerBarChart = charts.append("g")
    	.attr("transform", "translate(" + 0 + "," + chartHeight + ")")
    .attr("id", "from-barchart")
    
    let throwerBars = throwerBarChart.selectAll(".bars")
    	.data(nestByThrower)
    	.enter()
    	.append("g")
    
    throwerBars.append("rect")
    	.attr("x", function(d){ return chartWidth - scaleThrowerTotals(d.value) })
    	.attr("y", function(d){ return scaleThrower(d.key) })
    	.attr("width", function(d){ return scaleThrowerTotals(d.value) })
    	.attr("height", scaleThrower.bandwidth())
    	.style("fill", function(d){ return barColour(d.key) })

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v0.3.min.js