cards rendering

forked from calebkress's block: cards rendering

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

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>

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