D3 Examples - [unlisted] Life and Times of H. R. McMaster

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <svg width="960" height="500"></svg>
  <script>
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        xScale = d3.scaleTime(),
        x1 = function (d){ return d.start; },
        x2 = function (d){ return d.end; },
        yMiddle = height / 2;
            rectHeight = 40,
        label = function (d){ return d.label; };
    
    function render(data){
      console.log(data)
      xScale
        .domain([
          d3.min(data, x1),
          d3.max(data, x2)
        ])
        .range([0, width]);
      
      var entry = svg.selectAll(".entry").data(data),
          entryEnter = entry.enter().append("g").attr("class", "entry"),
          rect = entry.select("rect"),
          rectEnter = entryEnter.append("rect");
      
      entryEnter.merge(entry)
            .attr("transform", function (d){
            return "translate(" + [xScale(x1(d)), 250] + ")";
          });
      
      rectEnter
            .attr("x", 0)
          .attr("y", function (d){
            return Math.random() * 100 - rectHeight / 2;
          })
            .attr("height", rectHeight)
            .attr("fill", "rgba(181,91,27, 0.3)")
            .attr("stroke", "gray")
        .merge(rect)
          .attr("width", function(d){ return xScale(x2(d)) - xScale(x1(d)) + 1; });
      
      rectEnter
        .append("title")
        .merge(rect.select("title"))
            .text(label);
      
      entryEnter
        .append("text")
          .attr("dx", "0.456em")
          .attr("dy", "0.35em") 
          .attr("transform", "rotate(-41)")
        .merge(entry.select("text"))
          .text(label);
    }
    
    d3.json("data.json", function(data){
      render(preprocess(data));
    });
    
    function preprocess(data){
      return data.timexes
        .filter(function (d){
            return d.times[0].starting_time !== "????"
        })
        .map(function (d){
          return {
            label: d.sent,
            start: new Date(d.times[0].starting_time),
            end: new Date(d.times[0].ending_time)
          };
        });
    }
  </script>
</body>
    