D3 Examples - cards rendering

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      display: flex;
    }
    .h-bar {
      min-height: 15px;
      min-width: 10px;
      background-color: steelblue;
      margin-bottom: 2px;
      font-size: 11px;
      color: #f0f8ff;
      text-align: right;
      padding-right: 2px;
        }
    svg {
      border: 11px double cornflowerblue;
      margin: 5px;
    }
    .card {
      font-size: 16px;
      fill: "#042543";
      color: #00203d;
      text-align: center;
    }
  </style>
</head>
​
<body>
  
  <script>
​
    var colorScale = d3.scaleOrdinal(d3.schemeCategory20);
​
    var compData = [
      {value: 10, name: "cashSign", color: 1},
      {value: 15, name: "cashRate", color: 11},
      {value: 30, name: "cashBonus", color: 21},
      {value: 50, name: "eqSign", color: 31},
      {value: 80, name: "eqRate", color: 41},
      {value: 65, name: "eqBonus", color: 51},
      {value: 55, name: "timeRate", color: 61},
      {value: 30, name: "timeAllocation", color: 71},
      {value: 20, name: "timeUtilization", color: 81},
      {value: 10, name: "perkEmployerPaid", color: 91},
      {value: 8, name: "perkEmployeeReimbursed", color: 100}
    ];
​
    function renderCards(data) {
​
      var cards = d3.select("#cardContainer")
        .data(data);
​
        cards.enter()
          .append("svg")
          .attr("class", "card")
​
          .merge(cards)
          .style("height", "200px")
          .style("width", "200px")
          .style("border", "5px solid")
        ;
​
        d3.selectAll(".card")
          .each(function (d, i) {
            d3.select(this).append("text")
              .text(d.name)
              .attr("x", 20)
              .attr("y", 50)
            d3.select(this).append("text")
              .text(d.value)
              .attr("x", 20)
              .attr("y", 80)
            d3.select(this).append("rect")
              .attr("x", 160)
              .attr("y", 0)
              .attr("width", 40)
              .attr("height", 15)
              .attr("fill", colorScale(i))
          })
​
        cards.exit().remove();
​
      }
​
    renderCards(compData);
​
  </script>
</body>
​
    