title: D3js Making Rectangles Represent Intervals in Time
body: <p>I'm working with some patient data in JSON format with dates corresponding to their particular drug usage intervals and the days they experienced adverse events. I want something similar to what's at the bottom of this swimlane chart (<a href="http://bl.ocks.org/bunkat/1962173" rel="nofollow">http://bl.ocks.org/bunkat/1962173</a>), as there is no need for me to zoom in or brush the timeline. </p>
  
  <p>Here's a picture of the applet that currently runs what I'm trying to achieve, but we are trying to move away from applets for obvious reasons. The green triangles are the beginning and end of the trials, purple triangles are the adverse event dates, and the intervals you see are the drug intake intervals:
  <a href="http://i.stack.imgur.com/wIH2X.png" rel="nofollow">Patient Visualization</a></p>
  
  <p>Here's a sample of some mock data I'm working with </p>
  
  <pre><code>[{
  "PATIENT_ID": 28079,
  "CLINICAL_START_DATE": "2002-02-19",
  "CLINICAL_END_DATE": "2003-08-14",
  "DRUG_START_DATES": "[2002-05-28]",
  "DRUG_END_DATES": "[2002-09-01]",
  "CONDITION_DATES": "[2002-08-19]"
  },
  {
  "PATIENT_ID": 33565,
  "CLINICAL_START_DATE": "2002-07-28",
  "CLINICAL_END_DATE": "2004-06-20",
  "DRUG_START_DATES": "[2002-09-12, 2002-10-16, 2003-12-24, 2003-01-10, 2003-11-13, 2003-03-18, 2003-06-08]",
  "DRUG_END_DATES": "[2002-09-12, 2002-11-15, 2004-05-27, 2003-01-31, 2003-11-13, 2003-05-02, 2003-10-03]",
  "CONDITION_DATES": "[2002-09-24, 2002-12-29, 2003-04-25, 2003-06-25, 2003-08-25, 2003-10-25]"
  },
  {
  "PATIENT_ID": 59782,
  "CLINICAL_START_DATE": "2002-11-28",
  "CLINICAL_END_DATE": "2007-05-14",
  "DRUG_START_DATES": "[2003-07-16, 2003-10-21, 2003-12-20]",
  "DRUG_END_DATES": "[2003-08-20, 2003-11-04, 2004-02-02]",
  "CONDITION_DATES": "[2003-09-13]"
  }]
  </code></pre>
  
  <p>The indexes of the drug start date and end date arrays correspond to each other, meaning the DRUG_START_DATE[0] corresponds to the DRUG_END_DATE[0]. The condition dates will just be points on the timeline. I'm pretty new to D3.js and have not been able to find any horizontal chart that handles time intervals. </p>
  
  <p>I've tried to make rectangles correspond to time intervals but I'm not really sure how to access each individual date within the arrays of the DRUG_START_DATES and DRUG_END_DATES to get them to bind to each rectangle.</p>
  
  <p>Here's some code I have so far. If you console.log d.CLINICAL_START_DATE, CLINICAL_END_DATE, etc, you'll get number of days in relation to Jan 01 2000. I thought working with integers might be easier for the lengths of rectangles, but if you know a way to work with date objects, to do the same thing, you can alter the methods to just return what the parser.parse method outputs instead of subtracting. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;title&gt;&lt;/title&gt;
  
  &lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://d3js.org/d3-time.v1.min.js"&gt;&lt;/script&gt;
  &lt;script src="d3-timeline.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .axis path, .axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
  }
  
  .axis text {
  font-family: sans-serif;
  font-size: 11px;
  }
  .container {
  height: 225px;
  width: 175px;
  border:2px solid #000;
  overflow-y: scroll;
  overflow-x: hidden;
  }
  
  svg {
  display: block;
  width: 200%;
  height: 200%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;
      var parser = d3.time.format("%Y-%m-%d");
      var w = 600;
      var h = 600;
      var data = 
      d3.json("Data/patientDataSepDates.json", function(data) {
          data.forEach(function(d) {
  
              var fixedStartDates = d.DRUG_START_DATES.substring(1, d.DRUG_START_DATES.length-1).split(", ");
              var fixedEndDates = d.DRUG_END_DATES.substring(1, d.DRUG_END_DATES.length-1).split(", ");
              var fixedConditionDates = d.CONDITION_DATES.substring(1, d.CONDITION_DATES.length-1).split(", ");
              d.PATIENT_ID = d.PATIENT_ID;
              d.CLINICAL_START_DATE = convertClinicalDates(d.CLINICAL_START_DATE);
              d.CLINICAL_END_DATE = convertClinicalDates(d.CLINICAL_END_DATE);
              d.DRUG_START_DATES = convertDateArrays(fixedStartDates);
              d.DRUG_END_DATES = convertDateArrays(fixedEndDates);
              d.DRUG_DATE_INTERVAL = dayInterval(d.DRUG_START_DATES, d.DRUG_END_DATES);
              d.CONDITION_DATES = convertDateArrays(fixedConditionDates);
              console.log(d.DRUG_DATE_INTERVAL);
          })
  
          //Create the SVG Viewport selection
      var svgContainer = d3.select("body").append("svg")
                                    .attr("width", w)
                                    .attr("height", h);
      var xScale = d3.scale.linear()
                        .domain([-2350, 2350])
                        .range([0, w]);
      var yScale = d3.scale.linear()
                         .domain([28000, 10000000])
                         .range([0, h]);
      var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");
      var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left");
  
      var xAxisGroup = svgContainer.append("g")
                          .attr("class", "axis")
                          .attr("transform", "translate (0, 450)")
                          .call(xAxis);
      var yAxisGroup = svgContainer.append("g")
                          .attr("class", "axis")
                          .attr("transform", "translate(300, 0)")
                          .call(yAxis);
  
      d3.select("svg").selectAll("rect")
          .data(data)
          .enter()
          .append("rect")
          .attr("x", function(d) {return d.DRUG_START_DATES})
          .attr("y", function(d) {return d.PATIENT_ID})
          .attr("height", 15)
          .attr("width", function (d) {return d.DRUG_DATE_INTERVAL})
          .style("stroke", "black")
          .style("stroke-width", 1)   
      })
  
      function convertClinicalDates(date) {
          var baseDate = parser.parse("2000-01-01");
          var parsedDate = parser.parse(date);
          return Math.round((parsedDate - baseDate)/86400000);
      }
  
      function convertDateArrays(dates) {
          var newArr = [];
          var baseDate = parser.parse("2000-01-01");
          for(var i = 0; i &lt; dates.length; i++) {
              var newDate = parser.parse(dates[i]);
              newArr.push(Math.round((newDate - baseDate)/86400000));
          }
          return newArr;
      }
  
      function dayInterval(startDateArr, endDateArr) {
          var newArr = [];
  
          for (var i = 0; i &lt; startDateArr.length; i++) {
              var diff = endDateArr[i] - startDateArr[i] + 1;
              newArr.push(diff);
          }
          return newArr;
      }
  
  &lt;/script&gt;
  &lt;div&gt;
  &lt;h3&gt;A simple timeline&lt;/h3&gt;
  &lt;div id="timeline1"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you in advance!</p>