D3 Examples - setup_time_force

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  
  <link href="style.css"></link>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  
<div id="main-wrapper">
    <div id="sidebar">
        <div id="current_time">1:00am</div>
        <div id="speed">
          <div class="togglebutton slow current" data-val="slow">Langsam</div>
          <div class="togglebutton medium" data-val="medium">Mittel</div>
          <div class="togglebutton fast" data-val="fast">Schnell</div>
          <div class="clr"></div>
        </div>
        <div id="note"></div>
        <div id="cite">
            Describe here the interactive project with the data source linked to: <a href="https://www.hello2/">Data source</a>, and other links that helped in that regards: <a href="https://www.hello.org/">LINK</a>.
        </div>
    </div>
      <div id="chart"></div>
      <div class="clr"></div>
</div>
  
  <script>
var USER_SPEED = "slow";
​
var w = 595,
h = 800,
padding = 1,
maxRadius = 3;
    
var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
    
   var sched_objs = [];
   var curr_minute = 0;
    
    
​
    
    
    
   
​
// Data load
​
​
    var act_counts = { "0": 0, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0, "13": 0, "14": 0, "15": 0, "16": 0 };
​
​
console.log(act_counts[0])
​
​
​
​
​
​
 
    
    
    
    
    
    
    
    
    
    
    
    
function readablePercent(n) {
    var pct = 100 * n / 1000;
    if (pct < 1 && pct > 0) {
        pct = "<1%";
    } else {
        pct = Math.round(pct) + "%";
    }
  
  return pct;
}   
    
console.log(readablePercent(100))  // == 10%
​
​
    
function minTime (min) {
  var minute = (min + 4*60) % 1440;
  var hh = Math.floor(minute / 60)
  
  var ampm; 
  if (hh>12) {
    hh = hh - 12;
    ampm = "pm"
  } else if (hh == 12) {
    ampm = "pm"
  } else if (hh == 0) {
        hh = 12;
        ampm = "am";
    } else {
        ampm = "am";
    }
  
  var mm = minute % 60;
  if (mm < 10) {
    mm - "0" + mm;
  }
  
  return hh + ":" + mm + ampm;
}
    
    console.log(minTime(1000))
​
  </script>
</body>
​
    