D3 Examples - d3.scaleTime

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
var tooltip = d3.select("body")
    .append("div")
        .style("font-size", "12px")
        .style("width", 285)
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden");
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
var xScale = d3.scaleTime()
  .domain([new Date("January 1, 1940 00:00:00"), new Date("January 4, 1980 00:00:00")])
  .range([20, 900]);
​
var xAxis = d3.axisBottom(xScale);
​
d3.csv("phage-history.csv", function (error, data) {
​
  
  svgEnter = svg.selectAll("rect")
  .data(data)
  .enter();
  
  svgEnter.append("rect")
  .attr("rx", 25)
  .attr("x", function (d) {
    x = xScale(new Date(d.start));
    return x;
  })
  .attr("y", function(d, i) { return 400 - (d.count*30); })
  .attr("width", 25)
  .attr("height", 25)
  .attr("fill", "green")
  .attr("stroke-width", "1px")
  .attr("stroke", "black")
  .on("mouseover", function (d) {
    rect = d3.select(this);
    rect.transition()
    .duration(500)
    .attr("y", function(d, i) { 
      console.log(this);
      var x = rect.x;
      return 20; })
    .transition()
    .duration(500)
    .attr("rx", 2)
    .attr("width", 300)
    .attr("height", 100)
      .attr("fill", "skyblue");
  
        tooltip.html(d.authors + "<br>" + d.description);
    tooltip
      .style("top", 30)
      .style("left",function () {
      console.log("x", x);
      return d3.event.pageX;
    })
        setTimeout(function () { 
      tooltip.style("visibility", "visible");
    }, 1500);
  })
    .on("mouseout", function (d) {
    d3.select(this)
    .transition()
    .duration(500)
    .attr("rx", 25)
    .attr("width", 25)
    .attr("height", 25)
    .transition()
    .duration(500)
    .delay(500)
    .attr("y", function(d, i) { return 400 - (d.count*30); })
    .attr("fill", "green");
        //tooltip.text(d.authors);
    return tooltip.style("visibility", "hidden");
​
  });
});
    
svg.append("g")
  .attr("transform", "translate(0,450)")
  .call(xAxis);
​
  </script>
</body>
​
    