title: How to visualize an event timeline in D3?
body: <p>I want to visualize the timestamps of events in my data using a visualization as shown below:</p>
  
  <p><img src="https://i.stack.imgur.com/drFMe.png" alt="enter image description here"></p>
  
  <p>I guess this can be done in several different ways and with my lack of experience with D3, I'd like to hear a recommendation for a good approach. Perhaps it can achieved by manipulating some common visualization in an intricate way?</p>
  
  <p><strong>EDIT:</strong> Based on feedback from ee2Dev, I will do 4 lines instead of 2, capturing incoming and outgoing calls/texts separately. Regarding granularity, it would be best if the visualization could capture one week of data in 5 minute intervals (one text message will equal to 5 min of talking and a 48 minute call will be rounded up to a 50 minute call). That will amount to 7*24*12 = 2016 possible intervals, which seems somewhat reasonable. Perhaps 10 min intervals would be more suitable than 5 min intervals, but I guess the code can be easily adjusted for that. Something that I haven't shown is how midnight should be marked to show which days are active, and which are not.</p>
  
  <p>Below is my code and my sample data:</p>
  
  <pre><code>// Data:
  timestamp (yyyy-MM-dd HH:mm),type
  1/1/2015 10:12,inc_call
  1/2/2015 10:12,inc_call
  1/2/2015 10:12,out_text
  1/3/2015 10:12,out_call
  1/4/2015 10:12,inc_text
  1/5/2015 10:12,inc_text
  
  
  // Code
  &lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="d3/d3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="papaparse.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="jquery.tipsy.js"&gt;&lt;/script&gt;
  &lt;link href="tipsy.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script&gt;
  
  var width = 1000;
  var height = 500;
  
  var events;
  
  var results = Papa.parse("events.csv", {
      header: true,
      download: true, // is needed even for local files as this interprets the input value as a path instead of simply the data
      dynamicTyping: true,
      delimiter: ",",
      skipEmptyLines: true,
      complete: function(results) {
          events = results.data;  
          CreateVisualizationFromData();
        }
  });
  
  
  var svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);
  
  var total_interactions;
  
  function CreateVisualizationFromData()
  {
  
      total_interactions = events.length;
      console.log(total_interactions);
  
      svg
        .append("marker")
        .attr("id", "arrowhead")
        .attr("refX", 6 + 7)
        .attr("refY", 2)
        .attr("markerWidth", 6)
        .attr("markerHeight", 4)
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M 0,0 V 4 L6,2 Z");
  
  
   }
  </code></pre>