heatmap

forked from tomshanley's block: Square matrix

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/d3-scale-cluster@1.1.7/dist/d3-scale-cluster.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0;font-family:sans-serif }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    const data = [
 {
   "familyType": "Couple over 50",
   "disadvantage": "Health",
   "percentage": 0.15
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Health",
   "percentage": 0.04
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Health",
   "percentage": 0
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Health",
   "percentage": 0.04
 },
 {
   "familyType": "Couple over 50",
   "disadvantage": "Education",
   "percentage": 0.17
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Education",
   "percentage": 0.13
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Education",
   "percentage": 0.09
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Education",
   "percentage": 0.18
 },
 {
   "familyType": "Couple over 50",
   "disadvantage": "Housing",
   "percentage": 0.19
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Housing",
   "percentage": 0.11
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Housing",
   "percentage": 0.13
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Housing",
   "percentage": 0.12
 },
 {
   "familyType": "Couple over 50",
   "disadvantage": "Employment",
   "percentage": 0.15
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Employment",
   "percentage": 0.11
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Employment",
   "percentage": 0.07
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Employment",
   "percentage": 0.17
 },
 {
   "familyType": "Couple over 50",
   "disadvantage": "Income",
   "percentage": 0.17
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Income",
   "percentage": 0.19
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Income",
   "percentage": 0.16
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Income",
   "percentage": 0.09
 },
 {
   "familyType": "Couple over 50",
   "disadvantage": "Connectedness",
   "percentage": 0.24
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Connectedness",
   "percentage": 0.18
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Connectedness",
   "percentage": 0.24
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Connectedness",
   "percentage": 0.21
 },
 {
   "familyType": "Couple over 50",
   "disadvantage": "Material disadvantage",
   "percentage": 0.13
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Material disadvantage",
   "percentage": 0.14
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Material disadvantage",
   "percentage": 0.11
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Material disadvantage",
   "percentage": 0.11
 },
 {
   "familyType": "Couple over 50",
   "disadvantage": "Crime",
   "percentage": 0.17
 },
 {
   "familyType": "Couple under 50",
   "disadvantage": "Crime",
   "percentage": 0.18
 },
 {
   "familyType": "Single parent, child under 18",
   "disadvantage": "Crime",
   "percentage": 0.01
 },
 {
   "familyType": "Couples, child under 18",
   "disadvantage": "Crime",
   "percentage": 0.08
 }
];
    
    const width = 400;
    const height = width;
    const margin = {"top": 150, "left": 200, "right": 150, "bottom": 50};
    
    var nestByDisadvantage = d3.nest()
      .key(function(d){ return d.disadvantage; })
      .sortKeys(d3.ascending)
      .entries(data);
    
    
   var percentages = [];
    
    data.forEach(function(d, i) {  
    	
      percentages[i] = d.percentage;
    
    })
    
    var columnWidth = width/nestByDisadvantage.length;
    
    var maxPercentage = d3.max(data, function(d){ return d.percentage; });
    
    var scale = d3.scaleLinear()
    .domain([0,maxPercentage])
    .range([0,columnWidth]);
    
    var colour = d3.scaleCluster()
    .domain(percentages)
   .range(['#f1eef6','#d4b9da','#c994c7','#df65b0','#e7298a','#ce1256','#91003f']);
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom);
    
    var chart = svg.append("g")
      .attr("transform", "translate(" + (margin.left) + "," + margin.top + ")");
    
    var columnHeader = chart.append("g")
      .attr("transform", "translate(0,0)");
    
    var columnLabels = columnHeader.selectAll("g")
      .data(nestByDisadvantage)
      .enter()
      .append("g")
      .attr("transform", function(d, i) {return "translate(" + (columnWidth * i) +",0)"; });
    
    columnLabels.append("text")
    .text(function(d) { return d.key })
    .attr("transform", "translate(20)rotate(-45)")
		     
    var nestByFamilyType = d3.nest()
      .key(function(d){ return d.familyType; })
      .sortKeys(d3.ascending)
    	.sortValues(function(a,b) { return a.disadvantage < b.disadvantage; })
      .entries(data);
    
    //console.log(nestByFamilyType.length);
    
    var rowHeight = height/nestByFamilyType.length
    
    nestByFamilyType.forEach(function(d, i) {
      
      var rowG = chart.append("g")
      .attr("transform", "translate(0," + (i * rowHeight) + ")");
      
      rowG.append("text")
      .text(d.key)
      .attr("x", 0)
      .attr("y", rowHeight/2 - 20)
      .style("text-anchor", "end")

/*boxes.append("rect")
      .attr("x", function(d) { return (columnWidth - scale(d.percentage))/2; })
      .attr("y", function(d) { return (columnWidth - scale(d.percentage))/2; })
      .attr("width", function(d) { return scale(d.percentage); })
      .attr("height", function(d) { return scale(d.percentage); })
      .style("fill", function(d) { return colour(d.percentage); });*/
      
    });

</script>
</body>

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

https://unpkg.com/d3-scale-cluster@1.1.7/dist/d3-scale-cluster.min.js