title: Is there a way to parse times and be able to plot them directly using javascript and d3?
body: <p>How can I make a scatterplot plotting time of day against date, which looks like this in using javascript and d3? The problem I am having is formatting the time of day data and axis. Input of the date is in the y column format below.</p>
  
  <p>Sample data:</p>
  
  <pre><code>Day         Time
  5-Feb-16    21:35:00
  5-Feb-16    19:15:00
  11-Dec-15   21:42:00
  21-Jul-15   11:00:00
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lwo2u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwo2u.png" alt="enter image description here"></a></p>
  
  <p>Code below inspired by:
  <a href="http://bl.ocks.org/d3noob/38744a17f9c0141bcd04" rel="nofollow noreferrer">http://bl.ocks.org/d3noob/38744a17f9c0141bcd04</a></p>
  
  <p>What I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt; /* set the CSS */
  
  body { font: 12px Arial;}
  
  path { 
      stroke: steelblue;
      stroke-width: 2;
      fill: none;
  }
  
  .axis path,
  .axis line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;!-- load the d3.js library --&gt;    
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  // Set the dimensions of the canvas / graph
  var margin = {top: 30, right: 20, bottom: 30, left: 50},
      width = 600 - margin.left - margin.right,
      height = 270 - margin.top - margin.bottom;
  
  // Parse the date / time
  var parseDate = d3.time.format("%d-%b-%y").parse;
  
  // Set the ranges
  var x = d3.time.scale().range([0, width]);
  var y = d3.scale.linear().range([height, 0]);
  
  // Define the axes
  var xAxis = d3.svg.axis().scale(x)
      .orient("bottom").ticks(5);
  
  var yAxis = d3.svg.axis().scale(y)
      .orient("left").ticks(5);
  
  // Define the line
  var valueline = d3.svg.line()
      .x(function(d) { return x(d.Day); })
      .y(function(d) { return y(d.Time); });
  
  // Adds the svg canvas
  var svg = d3.select("body")
      .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
      .append("g")
          .attr("transform", 
                "translate(" + margin.left + "," + margin.top + ")");
  
  // Get the data
  d3.csv("data.csv", function(error, data) {
      data.forEach(function(d) {
          console.log(d.Time);
          d.Day = parseDate(d.Day);
          d.Time = +d.Time;
      });
  
      // Scale the range of the data
      x.domain(d3.extent(data, function(d) { return d.Day; }));
      y.domain([0, d3.max(data, function(d) { return d.Time; })]);
  
      // Add the valueline path.
      svg.append("path")
          .attr("class", "line")
          .attr("d", valueline(data));
  
      // Add the scatterplot
      svg.selectAll("dot")
          .data(data)
        .enter().append("circle")
          .attr("r", 3.5)
          .attr("cx", function(d) { return x(d.Day); })
          .attr("cy", function(d) { return y(d.Time); });
  
      // Add the X Axis
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
  
      // Add the Y Axis
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My output:</p>
  
  <p><a href="https://i.stack.imgur.com/zDF6F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDF6F.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to parse times and be able to plot them directly using javascript and d3? Or do I need to convert them to decimal numbers like 12:30 = 12.5 to plot them? </p>