we dont have time to argue about time

_.md

[ Launch: we dont have time to argue about time ] 5602911 by gelicia

config.json

{"description":"we dont have time to argue about time","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/aW5Pgp2.png"}

inlet.js

var dateParse = d3.time.format("%m/%Y").parse;

var data = [{name: "date1", date: "5/2012"},
            {name: "date2", date: "08/2012"},
            {name: "date3", date: "01/2013"},
            {name: "date4", date: "02/2013"},
            {name: "date5", date: "03/2013"},
            {name: "date6", date: "04/2013"}];

var data = data.map(function(d){d.fullDate = dateParse(d.date); return d;})

//style
var sideMar = 47;
var margin = {top: 68, left: sideMar, right: sideMar};
var lastDate;
var svg = d3.select('svg');

svg.append('line')
.attr({
  x1: margin.left,
  y1: margin.top,
  x2: tributary.sw - (margin.right+margin.left),
  y2: margin.top,
  "stroke": "black"
});

var minDate = d3.min(data, function(d){return d.fullDate});
var d = new Date();

var timeScale = d3.time.scale().domain([minDate, dateParse(d.getMonth()+1 +"/" + d.getFullYear())]).range([margin.left, tributary.sw - (margin.left + margin.right)]);

var monthAxis = d3.svg.axis().scale(timeScale)
	.tickFormat(d3.time.format("%b"))
	.ticks(d3.time.months, 1);

var yearAxis = d3.svg.axis().scale(timeScale)
	.tickFormat(d3.time.format("%Y"))
	.ticks(d3.time.years, 1)
 
svg.append("g")
	.attr({
      "transform": "translate(0," + (margin.top - 35) + ")",
      "class": "scaleStyle"
    })
    .call(monthAxis); 

svg.append("g")
	.attr({
      "transform": "translate(0," + (margin.top - 60) + ")",
      "class": "yearStyle"
    })
    .call(yearAxis); 

var circles = svg.selectAll('circle')
.data(data).
enter()
.append("circle")
.attr({
  cx: function(d){return timeScale(d.fullDate);},
  cy: margin.top,
  r: 7,
  stroke: "black",
  fill: "steelblue",
  id: function(d){return "pt" + (d.date).replace('/', '');}
})
.on("click", function(d) { return displayInfo(d.date); })
.on("mouseover", function(d) {
  d3.select("#pt" + (d.date).replace('/', ''))
  .attr("r","10");
})
.on("mouseout", function(d,i) {
  d3.select("#pt" + (d.date).replace('/', ''))
  .attr("r","7");
});

circles.append('title')
.text(function(d, i){ return d.date+ " - " + d.name;});

function displayInfo(date){

  var infoGroup = svg.select("g#infoGroup");
  var rect;
  
  //If it is the second click (the info exists), 
  //transition to remove it and rerun the function to redraw
  if (infoGroup[0][0] !== null){
    rect = d3.select("g#infoGroup > rect");
    
    rect.transition()
    .duration(250)
    .ease("linear")
    .attr({
      height: 0
    })
    .each("end", function(){
      infoGroup.remove(); 
      if (date !== lastDate){
	      displayInfo(date);
      }
    });
    
  }
  else {
    infoGroup = svg.append("g")
    .attr({"transform" : "translate(" + margin.left + "," + (margin.top + 30) + ")",
           "id":"infoGroup"
          });
    
    rect = infoGroup.append('rect')
    .attr({
      x: 0,
      y: 0,
          width : tributary.sw - (margin.left*2) - margin.right,
      height: 0,
      rx: 10,
      fill: 'white',
      "stroke-width": 4,
      "stroke":"steelblue"
    })
    .transition()
    .duration(250)
    .ease("linear")
    .attr({
      height: 300
    });
    
    lastDate = date;
  }
}

style.css

.scaleStyle path,
.scaleStyle line {
   fill: none;
}

.scaleStyle{
font-size: 15px
}

.yearStyle path,
.yearStyle line {
   fill: none;
}

.yearStyle{
	font-weight:bold;
}