D3 Examples - Unit chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
    
  </style>
</head>
​
<body>
  <script>
    
    let chartWidth = 500
    let unitWidth = 10
    let unitShape = "circle"
    
    let cats = 54 // %
    //let dogs = 29 // %
    //let mice = 12 // %
    
    generateUnitChart(cats, unitWidth, chartWidth, unitShape)
    //generateUnitChart(dogs, unitWidth, chartWidth))
    //generateUnitChart(mice, unitWidth, chartWidth))
    
    function generateUnitChart(pct, _unitWidth, _chartWidth, _unitShape) {
        let totalUnits = _unitWidth * _unitWidth
      let unitArray = createUnitArray(pct, totalUnits)
      drawUnitChart(unitArray, _unitWidth, _chartWidth, _unitShape)
    }
    
    function createUnitArray(n,t) {
      let cutoff = Math.round((t/100) * n)
      return d3.range(t).map(function(d, i) {
        return i < cutoff ? "y" : "n"
      })
    }
    
    
    function drawUnitChart(data, uw, cw, s) {
      
      let chartWH = cw
      let margin = 10
      
      let scaleDomain = d3.range(uw) 
      let scalePadding = 0.2
      
      let xScale = d3.scaleBand()
        .domain(scaleDomain)
        .range([0, chartWH])
        .padding(scalePadding)
           
      let yScale = d3.scaleBand()
        .domain(scaleDomain)
        .range([chartWH, 0])
        .padding(scalePadding)      
      
      let svg = d3.select("body").append("svg")
        .attr("width", chartWH + margin + margin)
        .attr("height", chartWH + margin + margin)
      
      let g = svg.append("g")
        .attr("transform", "translate(" + margin + "," + margin + ")")
      
      let units = g.selectAll(".unit")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "unit")
        .attr("transform", function(d, i){
          return "translate(" + xScale(xCoord(i, uw)) + "," + yScale(yCoord(i, uw)) + ")"
        })
      
      if (s == "circle") {
        let circleR = xScale.bandwidth() / 2
        units.append("circle")
          .attr("cx", circleR)
          .attr("cy", circleR)
          .attr("r", circleR)
      }
      
      else {
        
        let squareWidth = xScale.bandwidth()
        units.append("rect")
          .attr("rx", 5)
          .attr("width", squareWidth)
          .attr("height", squareWidth)
        
      }
      
      units.style("fill", function(d){ return d == "y" ? "FireBrick" : "LightSteelBlue" })
             
    }
    
    function yCoord(n, s) {
            return (Math.floor(n/s))
        }
    
        function xCoord(n, s) {
            return n - ((Math.floor(n/s)) * s);
        }
​
    
    
​
   
  </script>
</body>
​
    