Date slider - filtering data

Based on cmdoptesc's map timeline example. Slider adapted from Mike Bostock's drag slider.

Related examples:

Date Slider

forked from officeofjane's block: Date slider - filtering data

forked from noblemillie's block: Date slider - filtering data

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      font-family:"avenir next", Arial, sans-serif;
      font-size: 14px;
      background-color: #edf4fc;
    }

.ticks {
      font-size: 8px;
    }

.track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }

.track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }

.track-inset {
      stroke: #dcdcdc;
      stroke-width: 8px;
    }

.track-overlay {
      pointer-events: stroke;
      stroke-width: 30px;
      stroke: transparent;
      cursor: crosshair;
    }

.handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
    
    .label {
      font-size: 15px;
      line-height: 100%;
      text-decoration: none;
      font-weight: 200;
      color: #b7d123;
    }
    
  </style>
</head>

var formatDateIntoYear = d3.timeFormat("%b %Y");
var formatDate = d3.timeFormat("%b %d ");
var parseDate = d3.timeParse("%m/%d/%y");

var startDate = new Date("2014-11-01"),
    endDate = new Date("2017-04-01");

var margin = {top:0, right:50, bottom:0, left:50},
    width = 560 - margin.left - margin.right,
    height = 90 - margin.top - margin.bottom;

////////// slider //////////

var svgSlider = d3.select("#slider")
    .append("svg")
    .attr("width", width + margin.left + margin.right )
    .attr("height", height);
    
var x = d3.scaleTime()
    .domain([startDate, endDate])
    .range([0, width])
    .clamp(true);

var slider = svgSlider.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + margin.left + "," + height / 2 +")");

slider.append("line")
    .attr("class", "track")
    .attr("x1", x.range()[0])
    .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { slider.interrupt(); })
        .on("start drag", function() { update(x.invert(d3.event.x))
                        
}))

slider.insert("g", ".track-overlay")
    .attr("class", "ticks")
    .attr("transform", "translate(0," + 12 + ")")
  .selectAll("text")
    .data(x.ticks(5))
    .enter()
    .append("text")
    .attr("x", x)
    .attr("y", 10)
    .attr("text-anchor", "middle")
    .text(function(d) { return formatDateIntoYear(d); });

var handle = slider.insert("rect", ".track-overlaybox")
    .attr("class", "handle")
  	.attr("x", 0)
    .attr("y", -40)
   	.attr("height", 85) 
    .attr("width", 1)
		.style("stroke", "red")
		.style("opacity", "0.5")

var handlebox = slider.insert("rect", ".track-overlay")
    .attr("class", "handle")
  	.attr("x", -27)
    .attr("y", -40)
   	.attr("height", 70) 
    .attr("width", 50)
		.style("stroke", "blue")
		.style("opacity", "0.3")

var label = slider.append("text")  
    .attr("class", "label")
    .attr("text-anchor", "middle")
    .text(formatDate(startDate))
    .attr("transform", "translate(-3," + (-22) + ")")

////////// plot //////////

var svgPlot = d3.select("#vis")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height);

var plot = svgPlot.append("g")
    .attr("class", "plot")
    .attr("transform", "translate(" + 0 + margin.left + "," + 0 + margin.top + ")");

d3.csv("circles.csv", prepare, function(data) {
  dataset = data;
  drawPlot(dataset);
})

function prepare(d) {
  d.id = d.id;
  d.date = parseDate(d.date);
  return d;
}

function drawPlot(data) {
  var locations = plot.selectAll(".location")
    .data(data);

// if filtered dataset has more circles than already existing, transition new ones in
  locations.enter()
    .append("circle")
    .attr("class", "location")
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", height/2 - 10)
    .style("fill", function(d) { return d3.hsl(d.date/1000000000, 0.8, 0.8)})
    .style("stroke", function(d) { return d3.hsl(d.date/1000000000, 0.7, 0.5)})
    .style("opacity", 0.2)
    .attr("r", 15)
      .transition()
      .duration(400)
      .attr("r", 30)
        .transition()
        .attr("r", 20);

// if filtered dataset has less circles than already existing, remove excess
  locations.exit()
    .remove();
}

function update(h) {
  // update position and text of label according to slider scale
  handle.attr("x", x(h));
  handlebox.attr("x", x(h)-28);
  label
    .attr("x", x(h))
    .text(formatDate(h));

// filter data set and redraw plot
  var newData = dataset.filter(function(d) {
    return d.date < h;
  })
  drawPlot(newData);
}
</script>
</body>

https://d3js.org/d3.v4.min.js