D3 Examples - Rotated heatmap with barchart

xxxxxxxxxx
 
<!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>
​
    