d3 | time shown as percentage

using a waffle chart to show time in percentage. Updating every second and squares/percentage is rounded down to nearest integer

<!DOCTYPE html>
<title>d3 | percentage time</title>
<link href='https://unpkg.com/basscss@8.0.2/css/basscss.min.css' rel='stylesheet'>
<link href='dist.css' rel='stylesheet' />
<body>
  <div class='clearfix mt4 charts'>
    <section class='col col-4 relative'>
      <div class='chart-hours'></div>
      <span class='colon absolute'>:</span>
    </section>
    <section class='col col-4 relative'>
      <div class='chart-minutes'></div>
      <span class='colon absolute'>:</span>
    </section>
    <section class='col col-4'>
      <div class='chart-seconds'></div>
    </section>
  </div>

  <div class='clearfix mt3 digits'>
    <section class='col col-4 relative'>
      <h2 class='center digit percent-hour'>%</h2>
      <span class='colon absolute'>:</span>
    </section>
    <section class='col col-4 relative'>
      <h2 class='center digit percent-minutes'>%</h2>
      <span class='colon absolute'>:</span>
    </section>
    <section class='col col-4'>
      <h2 class='center digit percent-seconds'>%</h2>
    </section>
  </div>

  <div class='clearfix digits mt4 time'>
    <section class='col col-4 relative'>
      <h2 class='center digit time-hour'>Hr</h2>
      <span class='colon absolute'>:</span>
    </section>
    <section class='col col-4 relative'>
      <h2 class='center digit time-minutes'>Min</h2>
      <span class='colon absolute'>:</span>
    </section>
    <section class='col col-4'>
      <h2 class='center digit time-seconds'>Secs</h2>
    </section>
  </div>
  <script src='https://d3js.org/d3.v4.min.js'></script>
  <script src='dist.js'></script>
  
  <script>
  (function () {
    var d3 = window.d3
    var hoursChart = d3.waffle
    var minutesChart = d3.waffle
    var secondsChart = d3.waffle
    function render () {
      var now = new Date()
      // render time labels
      var hours = now.getHours()
      var minutes = now.getMinutes()
      var seconds = now.getSeconds()
      d3.select('.time-hour').text(hours + ' hrs')
      d3.select('.time-minutes').text(minutes + ' mins')
      d3.select('.time-seconds').text(seconds + ' secs')
      // render percent labels
      var hoursPercent = Math.floor((100 / 24) * hours)
      var minutesPercent = Math.floor((100 / 60) * minutes)
      var secondsPercent = Math.floor((100 / 60) * seconds)
      d3.select('.percent-hour').text(hoursPercent + ' %')
      d3.select('.percent-minutes').text(minutesPercent + ' %')
      d3.select('.percent-seconds').text(secondsPercent + ' %')
      // render charts
      hoursChart('.chart-hours', hoursPercent)
      minutesChart('.chart-minutes', minutesPercent)
      secondsChart('.chart-seconds', secondsPercent)
    }
    // start with render
    render()
    d3.interval(function () {
      render()
    }, 1000)

// change frame height
    d3.select(self.frameElement).style('height', '600px')
  }())
  </script>
</body>

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