D3 Examples - Opening Hours

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400, 600" rel="stylesheet">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    text {
      font-family: 'Open Sans', sans-serif;
    }
    
    .bar-label {
      fill: white;
    }
    
    .old-hours {
      fill: #2c7fb8;
      stroke: white;  
    }
    
    .new-hours {
      fill: #253494;
      stroke: white; 
    }
    
    .x-axis text {
      font-size: 14px;
    }
    
    .grid-line {
      stroke: black;
      opacity: 0.2;
      stroke-dasharray: 5,5;
        }
    
    .title {
      font-size: 20px;
    }
  </style>
</head>
​
<body>
  <script>
        var margin = {top: 100, right: 100, bottom: 100, left: 100};
   
    var width = 960,
        height = 1000;
        
    var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);
    
    var parseTime = d3.timeParse("%H:%M");
    var formatTime = d3.timeFormat("%H:%M");
    
    d3.queue()
        .defer(d3.csv, "opening-hours.csv")
      .defer(d3.csv, "opening-term-hours.csv")
        .await(load);
    
    function load(error, hours, termHours) {
      if (error) throw error;
       
      var config1 = {
        width: width - margin.left - margin.right,
        height: (height / 2) - margin.top - margin.bottom
      };
      
      var config2 = {
        width: width - margin.left - margin.right,
        height: (height / 2.4) - margin.top - margin.bottom
      }
      
      var arr1 = ["Out of Term Hours Old Open","Out of Term Hours Old Close","Out of Term Hours New Open","Out of Term Hours New Close"];
      
      var elem1 = svg.append("g")
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      drawChart(elem1, config1, hours, arr1, "Out Of Term Hours");
      
      var arr2 = ["Opening Term Hours Old","Closing Term Hours Old","Opening Term Hours New","Closing Term Hours New"];
      
        var elem2 = svg.append("g")
        .attr("transform", "translate(" + [margin.left, margin.top + height / 2] + ")")
      drawChart(elem2, config2, termHours, arr2, "Term Hours");
    }
    
    function drawChart(elem, config, data, selectors, label) {
      
      var places = d3.scaleBand()
        .range([0, config.height])
        .padding(0.1);
      
      places.domain(data.map(d => d["Outlet Name"]));
      
      var time = d3.scaleTime()
        .domain([parseTime("06:00"), parseTime("24:00")])
        .range([0, config.width]);
      
      data.forEach(function(place) {
        for (var attribute in place) {
          if (attribute != "Outlet Name") {
            place[attribute] = parseTime(place[attribute]);
          }
        }
      });
      
      var title = elem.append("text")
        .attr("class", "title")
        .attr("y", -margin.top / 3)
        .text(label)
      
      var xAxis = d3.axisBottom(time)
        .tickFormat((d, i) => i % 2 == 0 ? formatTime(d) : "")
        .ticks(24);
​
      var xGroup = elem.append("g");
      var xAxisElem = xGroup.append("g")
        .attr("transform", "translate(" + [0, config.height + margin.bottom / 4] + ")")
        .attr("class", "x-axis")
        .call(xAxis);
      
      var grid = xGroup.append("g").selectAll("line")
        .data(time.ticks(24))
        .enter().append("line")
            .attr("class", "grid-line")
            .attr("x1", d => time(d) + 0.5)
            .attr("x2", d => time(d) + 0.5)
            .attr("y1", -margin.bottom / 8)
            .attr("y2", config.height + margin.bottom / 4);
      
      
      var hourBars = elem.append("g")
        .selectAll("g")
        .data(data)
        .enter().append("g")
            .attr("transform", d => "translate(" + [0, places(d["Outlet Name"])] + ")")
            .attr("class", "place-hours");
      
      var oldHours = hourBars.append("rect")    
        .attr("class", "old-hours")
        .attr("x", d => time(d[selectors[0]]))
        .attr("width", d => time(d[selectors[1]]) - time(d[selectors[0]]))
        .attr("height", places.bandwidth());
      
      var newHours = hourBars.append("rect")    
        .attr("class", "new-hours")
        .attr("x", d => time(d[selectors[2]]))
        .attr("width", d => time(d[selectors[3]]) - time(d[selectors[2]]))
        .attr("height", places.bandwidth());
      
      var labels = hourBars.append("text")
        .attr("class", "bar-label")
        .attr("text-anchor", "middle")
        .attr("x", d => time(d[selectors[2]]))
        .attr("dx", d => (time(d[selectors[3]]) - time(d[selectors[2]])) / 2)
        .attr("y", places.bandwidth() / 2)
        .attr("dy", places.bandwidth() / 8)
        .style("font-size", places.bandwidth() / 2)
        .text(d => d["Outlet Name"]);
      
      var legendOffsets = 100;
      var legend = elem.append("g")
        .attr("class", "legend")
        .attr("transform", "translate(" + [config.width - margin.right / 2, -margin.top / 2] +")");
      var legendElems = legend.selectAll("g")
        .data([{class: "old-hours", label: "Old"}, {class: "new-hours", label: "New"}])
        .enter().append("g")
            .attr("transform", (d, i) => "translate(" + [-i * legendOffsets, 0] + ")")
      
      legendElems.append("rect")
        .attr("class", d => d.class)
        .attr("width", places.bandwidth() / 2)
        .attr("height", places.bandwidth() / 2)
      
      legendElems.append("text")
        .attr("x", places.bandwidth() / 2)
        .attr("y", places.bandwidth() / 2)
        .attr("dx", 10)
        .attr("dy", -places.bandwidth() / 16)
        .text(d => d.label);
    }
    
​
  </script>
</body>
​
    