D3 Examples - slide comp

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
​
    body {
      margin:0;
      position: relative;
      background-color: #def7dc;
      background-image: url("https://www.transparenttextures.com/patterns/black-linen.png");
      opacity: 1.0;
    }
    nav {
      background-color: black;
    }
    #topdash {
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      font-size: 1.3em;
      font-variant: small-caps;
      font-weight: 500;
      text-align:center;
      outline:inherit;
      letter-spacing: 1.5px;
      padding: 20px 0px 0px 20px;
      width:auto;
      margin: auto;
      display: flex;
      border-width: 2px;
      border-color: black;
      background-color: grey;
    }
    #stackedbar {
      border-width: 2px;
      border-color: green;
      background-color: yellow;
    }
    .compvalue {
​
    }
    #dataviz {
      border-width: 2px;
      border-color: blue;
      background-color: green;
    }
    #sliderinputs {
      font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
      font-size: 1.0em;
      font-variant: small-caps;
      font-weight: 200;
      display: inline-flex;
      text-align:center;
      outline: none;
      padding: 0px;
      width: auto;
      margin: 0px;
      margin-top: 0px;
s
    }
      #cashRate { background-color: lightgreen; }
      #equityRate { background-color: lightblue;}
      #cashBonus { background-color: green; }
      #equityBonus { background-color: blue;}
      #timeCommitted { background-color: pink; }
      #timeAllocation {background-color: red;}
      #pto {background-color: yellow;}
      #matchContribution401k {background-color:lightgray;}
      #receivedSubsidy {background-color: lightorange;}
      #receivedBenefit {background-color: lightbrown;}
​
      #cashRateOutput { }
      #equityRateOutput { }
      #cashBonusOutput { }
      #equityBonusOutput { }
      #timeCommittedOutput { }
      #timeAllocation {}
      #ptoOutput {}
      #matchContribution401kOutput {}
      #receivedSubsidyOutput {}
      #receivedBenefitOutput {}
    .card {
      border-width: 4px;
      border-color: red;
    }
lide.slider {
​
    }
    .dependentslider {
​
    }
    .independentslider {
​
    }
    .intervaldata {
​
    }
    .ratiodata {
​
    }
    .summaryslider {
​
    }
    .v-bar {
​
    }
    .h-bar {
​
    }
    #bottomdash {
      border-width: 4px;
      border-color: red;
    }
    .bottompanel {
      border-width: 2px;
      border-color: pink;
    }
    .radar {
      border-width: 2px;
      border-color: purple;
    }
  </style>
</head>
​
<body>
  <!-- load DOM elements -->
  <div id="topdash">top dash</div>
  <div id="stackedbar">stackedbar</div>
  <div id="dataviz">dataviz</div>
​
  <div id="sliderinputs">
    <form id="sliders" autocomplete="off">
      <fieldset class="inputgroup">
        <div class="slider" id="signingbonus">
          <p>
            <label  for="signbonus"
            style="display: inline-block; width: 100px; text-align: center">
            sign = <span id="signbonus-value">…</span>
            </label>
            <input type="range" min="5" max="20" id="signbonus">
          </p>
          <label>signing bonus</label>
          <p id="signingbonusoutput">$<br>single payment</p>
          <input type="range" name="sign$" id="sign$" val="5" min="0" max="15" step = "1">
        </div>
​
        <p>
          <label for="nHeight"
          style="display: inline-block; width: 240px; text-align: right">
          height = <span id="nHeight-value">…</span>
          </label>
          <input type="range" min="100" max="280" id="nHeight">
        </p>
    </fieldset>
    </form>
  </div>
​
  <p>
    <label for="nCashRate"
    style="display: inline-block; width: 240px; text-align: right">
    cashRate = <span id="nCashRate-value">…</span>
    </label>
    <input type="range" min="100" max="280" id="nCashRate">
  </p>
​
  <div id="bottomdash">bottom dash</div>
​
  <script>
  // load data
    var data = {};
​
  // declare variables
    var topDash = <p>top dash p</p>;
    // var topDash = `<div id=topdash><p>top</>`;
    var stackedbar = document.querySelector(#stackedbar).append(`<div id=stackedbar><p>top</>`).innerHTML;
    var dataviz = `<div id=dataviz><p>top</>`;
    var sliderinputs = `<div id=sliderinputs><p>top</>`;
    var bottomdash = `<div id=bottomdash><p>top</>`;
​
​
​
​
    var cashRate = 100;
​
    d3.select("#nCashRate").on("input", function() {
      updateComp(+this.value);
    });
​
    updateComp(120);
​
    function updateComp(nCashRate) {
      d3.select("#nCashRate-value").text(nCashRate);
      d3.select("#nCashRate").property("value", nCashRate);
    }
​
​
    updateComp()
​
​
  //|=>  #$>  ***   *|* DOM OBJECT : set frame dimensions *|*  **===============> *$#
    d3.select(self.frameElement).style("height", 800 + "px");
​
​
  </script>
</body>
​
    