const byDate = o => o.assessment_date;

const data = [
  {
    assessment_date: "2018-04-19T00:31:03.153000Z",
    id: 1
  }, {
    assessment_date: "2017-11-20T09:51:36.035983Z",
    id: 2,
  }, {
    assessment_date: "2018-02-15T09:51:36.035983Z",
    id: 3,
  }, {
    assessment_date: "2018-02-20T09:51:36.035983Z",
    id: 4,
  },
  {
    assessment_date: "2018-03-19T17:48:44.820000Z",
    id: 5,
  }
];

const sortedData = data.map(o => Object.assign({}, o, {
  "assessment_date": new Date(o.assessment_date)
})).sort(byDate);

const WIDTH = 600;
const HEIGHT = 30;

const xScale = d3.time.scale()
  .domain(d3.extent(sortedData.map(byDate)))
  .range([0, WIDTH])
  .nice();

const xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom');

const histogram = d3.layout.histogram()
                    .value(o => o.assessment_date)
                    .range(xScale.domain())
                    .bins(xScale.ticks(10))

const bins = histogram(sortedData);

const zoom = d3.behavior
  .zoom()
  .x(xScale)
  .scaleExtent([1, 10])
  .on("zoom", function() {
    axisSelector.call(xAxis);
    update(histogram(sortedData));
  });

const svg = d3.select("#timeline")
  .append("svg")
  .attr("width", WIDTH)
  .attr("height", HEIGHT)
  .attr("padding-top", "10px")
  .attr("transform", "translate(0," + (HEIGHT) + ")")
  .call(zoom);

const axisSelector = svg.append('g')
  .attr("class", "x axis")
  .call(xAxis);

function update(data) {
  const node = svg.selectAll(".node").data(data);

  node.enter()
      .append("circle")
      .attr("class", "node")
      .attr("r", 6)
      .attr("style", o => !o.length && 'display: none')
      // ^ this seems inelegant. why are some bins empty?
      .attr("cx", o => xScale(o.x))

  node.attr("cx", o => xScale(o.x))

  return node;
}

const nodeSelector = update(bins);