D3 Examples - sliderPanel

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;
    }
    #valueSlider {
      margin: 30px;
      color: #17b424; 
      font-size:20px;
    }
    .sliderValue {
      display: inline-block; 
      width: 200px; 
      text-align: right; 
      padding-top: 10px;
    }
    
  </style>
</head>
​
<body>
  
  <script>
    var height = 60;
    var width = 500;
    var sliderExtent = [0, 100];
    
    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")
            .style("height", "200px")
            .style("width", "200px")
            .style("border", "5px solid")
            .attr("x", 120)
            .attr("y", 150)
          .append("svg")
          .text(function (d) {
          return d.color;
        });
        ;
      
​
        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();
    }
        
   function rendercardSliders(data) {      
      var cardSliders = d3.select("body").selectAll("svg")
        .data(data);
      
//       var sValue;
​
//       var range = d3.select("#sliderValue")
//         .attr("range", sliderExtent)
//         .property("value", sValue);
​
//       var number = d3.select("#inputVal")
//         .attr("number", sliderExtent)
//         .property("value", sValue);
                     
     cardSliders.append("span")    
                    .style("text-anchor", "middle")
                    .style("border", "11px double cornflowerblue")
                    .attr("width", "20px")
            .attr("x", 9)
                    .attr("y", 7)
            .text(function (d) {
                return d.name;
            }) 
     
//      d3.select(this).append("div")
//        .attr("id", "#valueSlider")
//        .attr("x", 10)
//        .attr("y", 570)
//        .attr("width", width)
//        .attr("height", height)
//        .append("span").text(d.name)
​
     
//      d3.select(".sliderValue").on("input", function() {
//               updateSlider(+this.value);
//      });
     
//      d3.select("#inputVal").on("input", function() {
//               updateSlider(+this.value);     
//      });                
​
      
//      function updateSlider(sValue) {
//        d3.select("#slider-value").text(sValue);
//        d3.select("#sliderValue").property("value", sValue)
//        d3.select("#inputVal").property("value", sValue);
//      }
​
//      updateSlider(40);
      
      
      }
 d3.select("span").html(function(){
 return d3.select(this).text() +
   " <span style='color: blue;'>D3.js</span>";
   });
​
 renderCards(compData);
rendercardSliders(compData);
  </script>
  
  <svg></svg>
</body>
    