bar chart matrix

forked from tomshanley's block: Square matrix

forked from tomshanley's block: bar chart 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 nestByFamilyType = d3.nest()
      .key(function(d){ return d.familyType; })
      .sortKeys(d3.ascending)
      .entries(data);
      
    var columnWidth = width/nestByFamilyType.length;
    
    var maxPercentage = d3.max(data, function(d){ return d.percentage; });
    
    var scale = d3.scaleLinear()
    .domain([0,maxPercentage]);
    
    
    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(nestByFamilyType)
      .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 nestByDisadvantage = d3.nest()
      .key(function(d){ return d.disadvantage; })
      .sortKeys(d3.ascending)
    	.sortValues(function(a,b) { return a.familyType < b.familyType; })
      .entries(data);
    
    console.log(nestByDisadvantage.length);
    
    var rowHeight = height/nestByDisadvantage.length
    scale.range([0,rowHeight]);
    
    nestByDisadvantage.forEach(function(d, i) {
      
      var rowG = chart.append("g")
      .attr("transform", "translate(0," + (i * rowHeight) + ")");
      
      var percentages = []
      
      d.values.forEach(function(d,i){
        percentages[i] = d.percentage;
      })
      
      percentages.sort(); 
      
      var colour = d3.scaleOrdinal()
      .range(['#f1eef6','#d7b5d8','#df65b0','#ce1256'])
      .domain(percentages);
      
      rowG.append("text")
      .text(d.key)
      .attr("x", 0)
      .attr("y", rowHeight - 7)
      .style("text-anchor", "end");

</script>
</body>

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

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