Prayer Times SG

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
  <style>
    body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
    svg { width: 100%; height: 562px }
  </style>
</head>

<body>
  <svg>
  </svg>
  
  <script>
    const height = 600;
    const rectWidth = 2;
//     const data = [
//       305,
//       250,
//       358,
//       200,
//       170
//     ];
    let i = 0;
    
   	const requestURL = 'https://ruqqq.sg/prayertimes-database/data/SG/1/2018.json';
    
		const url = d3.json(requestURL);
    url.then( data => {
      const container = d3.select('svg');
    
    	data.forEach( ( month, monthIndex ) => {
        
        let g = d3.select('svg').append('g');
        month.forEach( ( day, dayIndex ) => {
          let d5 = new Date( day.times[5]);
          let minutes5 = d5.getMinutes();
          let hours5 = d5.getHours();
          let m5 = hours5 * 60 + minutes5;
          g.append( 'rect' )
          .attr( 'x', rectWidth * i )
          .attr( 'y', height - m5 / 1440 * height )
          .attr( 'width', rectWidth )
          .attr( 'height', m5 /1440 * height )
          .attr( 'fill', '#39007f' )
//           .attr( 'stroke', '#fff' )
          .attr( 'opacity', 0.4 );
          
          let d4 = new Date( day.times[4]);
          let minutes4 = d4.getMinutes();
          let hours4 = d4.getHours();
          let m4 = hours4 * 60 + minutes4;
          g.append( 'rect' )
          .attr( 'x', rectWidth * i )
          .attr( 'y', height - m4 / 1440 * height )
          .attr( 'width', rectWidth )
          .attr( 'height', m4 /1440 * height )
          .attr( 'fill', '#1d00c6' )
//           .attr( 'stroke', '#fff' )
          .attr( 'opacity', 0.4 );
          
          let d3_ = new Date( day.times[3]);
          let minutes3 = d3_.getMinutes();
          let hours3 = d3_.getHours();
          let m3 = hours3 * 60 + minutes3;
          g.append( 'rect' )
          .attr( 'x', rectWidth * i )
          .attr( 'y', height - m3 / 1440 * height )
          .attr( 'width', rectWidth )
          .attr( 'height', m3 /1440 * height )
          .attr( 'fill', '#00c674' )
//           .attr( 'stroke', '#fff' )
          .attr( 'opacity', 0.4 );
          
          let d2 = new Date( day.times[2]);
          let minutes2 = d2.getMinutes();
          let hours2 = d2.getHours();
          let m2 = hours2 * 60 + minutes2;
          g.append( 'rect' )
          .attr( 'x', rectWidth * i )
          .attr( 'y', height - m2 / 1440 * height )
          .attr( 'width', rectWidth )
          .attr( 'height', m2 /1440 * height )
          .attr( 'fill', '#c6ac00' )
//           .attr( 'stroke', '#fff' )
          .attr( 'opacity', 0.4 );
          
          let d1 = new Date( day.times[1]);
          let minutes1 = d1.getMinutes();
          let hours1 = d1.getHours();
          let m1 = hours1 * 60 + minutes1;
          g.append( 'rect' )
          .attr( 'x', rectWidth * i )
          .attr( 'y', height - m1 / 1440 * height )
          .attr( 'width', rectWidth )
          .attr( 'height', m1 /1440 * height )
          .attr( 'fill', '#c61a00' )
//           .attr( 'stroke', '#fff' )
          .attr( 'opacity', 0.4 );
          
          let d0 = new Date( day.times[0]);
          let minutes0 = d0.getMinutes();
          let hours0 = d0.getHours();
          let m0 = hours0 * 60 + minutes0;
          g.append( 'rect' )
          .attr( 'x', rectWidth * i )
          .attr( 'y', height - m0 / 1440 * height )
          .attr( 'width', rectWidth )
          .attr( 'height', m0 /1440 * height )
          .attr( 'fill', '#db00be' )
//           .attr( 'stroke', '#fff' )
          .attr( 'opacity', 0.4 );
          
          i += 1.5;

} ); //day
    } ); //month
   
   } );
    
  </script>
</body>

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

https://d3js.org/d3-dsv.v1.min.js

https://d3js.org/d3-fetch.v1.min.js