title: D3 js bar chart with 24 hour x axis
body: <p>Could someone please help me?
  I'm struggling with this for hours...</p>
  
  <p>I want to make a bar chart using d3.js...
  The bars will represent an on/off state which will be fetched from a db and the db is filled from a raspberry..</p>
  
  <p>I'm struggling with the x axis.
  I want it to represent 24 hours.
  So for instance if I flick a switch at 15:23:02 
  and then at 15:26:34 I get bars at the x axis at that time..</p>
  
  <p>I found an example of a bar chart that does this but the x axis is in dates (day and date)..</p>
  
  <p>The parts that are confusing for me are these:</p>
  
  <pre><code> .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
  
  
  
  .ticks(d3.time.days, 1)
      .tickFormat(d3.time.format('%a %d'))
  </code></pre>
  
  <p>I know the tickFormat should be 
  %H:%M:%S</p>
  
  <p>Also the data in the example uses dates..</p>
  
  <pre><code>var data = [{"date":"2012-03-20","total":1}, 
  
  ... etc
  </code></pre>
  
  <p>When I change them to times</p>
  
  <pre><code>var data = [{"date":"14:23:43","total":1},
  </code></pre>
  
  <p>nothing works ofcourse..</p>
  
  <p>Could someone just point me how to do it ?</p>
  
  <p>Here is a jsfiddle where I'm trying to do this:</p>
  
  <p><a href="http://jsfiddle.net/hpjqt1dL/1/" rel="nofollow">http://jsfiddle.net/hpjqt1dL/1/</a></p>
  
  <p>Thanks in advance</p>