(d3) Dynamic binning for single-axis, zoomable timeline?

Question

Brand new at D3 here... I'm attempting to build a single-axis timeline with binning and zoom. I have a proof-of-concept working without binning:

const data = [
  {
    assessment_date: "2018-04-19T00:31:03.153000Z",
    score: 4,
    type: "formative",
    is_proficient: false,
    label: "a",
    id: 1
  }, {
    assessment_date: "2017-11-20T09:51:36.035983Z",
    score: 3,
    type: "summative",
    is_proficient: false,
    label: "b",
    id: 2,
  }, {
    assessment_date: "2018-02-15T09:51:36.035983Z",
    score: 3,
    type: "formative",
    is_proficient: true,
    label: "c",
    id: 3,
  }, {
    assessment_date: "2018-02-20T09:51:36.035983Z",
    score: 3,
    type: "summative",
    is_proficient: true,
    label: "d",
    id: 4,
  }, {
    assessment_date: "2018-03-19T17:48:44.820000Z",
    score: 4,
    type: "summative",
    is_proficient: false,
    label: "e",
    id: 5
  }
];

const byDate = o => o.assessment_date;

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

const NODE_RADIUS = 6;
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 zoom = d3.behavior.zoom()
  .x(xAxis.scale())
  .on("zoom", function() {
    axisSelector.call(xAxis);
    nodesSelector.attr('cx', o => {
      return xScale(o.assessment_date)
    });
  });

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);

const nodesSelector = svg.selectAll(".node")
  .data(sortedData)
  .enter()
    .append("circle")
    .attr('id', o => `node${o.id}`)
    .attr('class', o => {
      let cx = ['node'];
      (o.type === 'formative') ? cx.push('formative') : cx.push('summative');
      (o.is_proficient) ? cx.push('proficient') : cx.push('not-proficient');
      return cx.join(' ');
    })
    .attr("r", 8)
    .attr("cx", o => xScale(o.assessment_date))

nodesSelector.on("click", function(node) {
  console.log('boop!')
});

#timeline {
  overflow: hidden;
}

#timeline svg {
  padding: 15px 30px;
  overflow: hidden;
}

.axis text {
  font-family: sans-serif;
  font-size: 10px;
}

.axis path,
.axis line {
  stroke: 3px;
  fill: none;
  stroke: black;
  stroke-linecap: round;  
}

.node {
  stroke-width: 3px;
  stroke: white;
}

.node.proficient {
  fill: green;
  stroke: green;
}

.node.not-proficient {
  fill: orange;
  stroke: orange;
}

.node.summative {
  stroke: none;
}

.node.formative {
  fill: white;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="timeline"></div>

In production, I'll be dealing with a lot of data and will need to bin nodes together in a group (while displaying a number above the group indicating how many nodes to a group).

My first attempt is here:

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 byDate = datum => datum.assessment_date;

const sortedData = data.map(datum => Object.assign({}, datum, {
  "assessment_date": new Date(datum.assessment_date)
})).sort((a,b) => a.assessment_date - b.assessment_date);

const NODE_RADIUS = 6;
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(datum => datum.assessment_date)
  .range(xAxis.scale().domain())

const zoom = d3.behavior
  .zoom()
  .x(xScale)
  .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);
  const nodeLabel = svg.selectAll(".node-label").data(data);

  node.enter()
      .append("circle")
      .attr("class", "node")
      .attr("r", NODE_RADIUS)
      .attr("style", datum => !datum.length && 'display: none')
      // ^ this seems inelegant. why are some bins empty?
      .attr("cx", datum => xScale(datum.x))
  
  node.enter()
      .append("text")
      .attr("class", "node-label")
      .text(datum => datum.length > 1 ? `${datum.length}` : '')
      .attr("x", datum => xScale(datum.x) - NODE_RADIUS/2)
      .attr("y", "-10px")
  
  node.attr("cx", datum => xScale(datum.x));
  nodeLabel.attr("x", datum => xScale(datum.x) - NODE_RADIUS/2);
  return node;
}

const nodeSelector = update(histogram(sortedData));

#timeline {
  overflow: hidden;
}

#timeline svg {
  padding: 20px 30px;
  overflow: hidden;
}

.axis text {
  font-family: sans-serif;
  font-size: 10px;
}

.axis path,
.axis line {
  stroke: 3px;
  fill: none;
  stroke: black;
  stroke-linecap: round;  
}

.node {
  stroke-width: 3px;
  stroke: white;
}

.node-label {
  font-family: sans-serif;
  font-size: 11px;
}

.node.proficient {
  fill: green;
  stroke: green;
}

.node.not-proficient {
  fill: orange;
  stroke: orange;
}

.node.summative {
  stroke: none;
}

.node.formative {
  fill: white;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="timeline"></div>

It seems to bin nearby nodes together well enough, but it doesn't group/ungroup on zoom. Any ideas or examples? I've been scouring bl.ocks and google for hours.

enter image description here

Is a histogram w/ bins even the correct primitive for the behavior I'm going for? Here's a pretty great example of what I'm going for in case it isn't clear: http://www.iftekhar.me/ibm/ibm-project-timeline/ …navigate to the bottom to the Final Iteration section.

Finally, I am using D3 v3.x as we haven't upgraded our dependency yet.

bonus question: why are some of the histogram bins empty?

Xavier Guihot · Accepted Answer

Here is a d3v5 (d3v3 bellow) solution which merges two circles when their distance is inferior to 2 radius (when they touch each other) and gives the resulting circle the average dates of the merged circles.

let data = [
  { assessment_date: "2017-11-20T09:51:36.035983Z", id: 2 },
  { assessment_date: "2018-04-19T00:31:03.153000Z", id: 1 },
  { 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 }
];

data = data
  .map(d => { d.date = new Date(d.assessment_date); return d; })
  .sort(d => d.assessment_date);

const NODE_RADIUS = 6;
const WIDTH = 600;
const HEIGHT = 30;

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

let xScale = d3.scaleTime()
  .domain(d3.extent(data.map(d => d.date)))
  .range([0, WIDTH])
  .nice();

const xAxis = d3.axisBottom(xScale);

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

svg.call(
  d3.zoom()
    .on("zoom", function() {
      newScale = d3.event.transform.rescaleX(xScale);
      axisSelector.call(xAxis.scale(newScale));
      updateCircles(newScale);
    })
);

function updateCircles(newScale) {

  const mergedData = merge(
    data.map(d => { return { date: d.date, count: 1 }; }),
    newScale
  );

  var circles = svg.selectAll("circle").data(mergedData);

  circles.enter().append("circle")
    .attr("r", NODE_RADIUS)
    .merge(circles)
    .attr("cx", d => newScale(d.date));

  circles.exit().remove();

  var counts = svg.selectAll("text.count").data(mergedData);

  counts.enter().append("text")
    .attr("class", "count")
    .merge(counts)
    .attr("transform", d => "translate(" + (newScale(d.date) - 3) + ",-10)")
    .text(d => d.count);

  counts.exit().remove();
}

function merge(data, scale) {

  let newData = [data[0]];

  let i;
  for (i = 1; i < data.length; i++) {
    const previous = newData[newData.length - 1];
    const distance = scale(data[i].date) - scale(previous.date);
    if (Math.abs(distance) < 2 * NODE_RADIUS) {
      const averageDate = new Date(
        (data[i].date.getTime() * data[i].count + previous.date.getTime() * previous.count)
        / (data[i].count + previous.count)
      );
      const count = previous.count;
      newData.pop();
      newData.push({ date: averageDate, count: data[i].count + count });
    }
    else
      newData.push(data[i]);
  }

    return newData;
}

updateCircles(xScale);

#timeline {
  overflow: hidden;
}
#timeline svg { padding: 20px 30px; overflow: hidden; }
.axis text {
  font-family: sans-serif;
  font-size: 10px;
}
.axis path,
.axis line {
  stroke: 3px;
  fill: none;
  stroke: black;
  stroke-linecap: round;
}
.node {
  stroke-width: 3px;
  stroke: white;
}
.node-label {
  font-family: sans-serif;
  font-size: 11px;
}
.node.proficient {
  fill: green;
  stroke: green;
}
.node.not-proficient {
  fill: orange;
  stroke: orange;
}
.node.summative {
  stroke: none;
}
.node.formative { fill: white; }

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="timeline"></div>

Compared to your original code, the only real difference consists in using the following algorithm to merge circles:

function merge(data, scale) {

  let newData = [data[0]];

  let i;
  for (i = 1; i < data.length; i++) {
    const previous = newData[newData.length - 1];
    const distance = scale(data[i].date) - scale(previous.date);
    if (Math.abs(distance) < 2 * NODE_RADIUS) {
      const averageDate = new Date(
        (data[i].date.getTime() * data[i].count + previous.date.getTime() * previous.count)
        / (data[i].count + previous.count)
      );
      const count = previous.count;
      newData.pop();
      newData.push({ date: averageDate, count: data[i].count + count });
    }
    else
      newData.push(data[i]);
  }

  return newData;
}

which produces at each zoom event the new version of the data to display with the associated count per node.

And the d3v3 equivalent:

let data = [
  { assessment_date: "2017-11-20T09:51:36.035983Z", id: 2 },
  { assessment_date: "2018-04-19T00:31:03.153000Z", id: 1 },
  { 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 }
];

data = data
.map(d => { d.date = new Date(d.assessment_date); return d; })
.sort(d => d.date);

const NODE_RADIUS = 6;
const WIDTH = 600;
const HEIGHT = 30;

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

let xScale = d3.time.scale()
.domain(d3.extent(data.map(d => d.date)))
.range([0, WIDTH])
.nice();

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

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

svg.call(
  d3.behavior.zoom()
  .x(xScale)
  .on("zoom", function() {
    axisSelector.call(xAxis);
    updateCircles(xScale);
  })
);

function updateCircles(newScale) {

  const mergedData = merge(
    data.map(d => { return { date: d.date, count: 1 }; }),
    newScale
  );

  var circles = svg.selectAll("circle").data(mergedData);
  circles.attr("cx", d => newScale(d.date));

  circles.enter().append("circle")
    .attr("r", NODE_RADIUS)
    .attr("cx", d => newScale(d.date));

  circles.exit().remove();

  var counts = svg.selectAll("text.count").data(mergedData);
  counts.attr("transform", d => "translate(" + (newScale(d.date) - 3) + ",-10)")
    .text(d => d.count);

  counts.enter().append("text")
    .attr("class", "count")
    .attr("transform", d => "translate(" + (newScale(d.date) - 3) + ",-10)")
    .text(d => d.count);

  counts.exit().remove();
}

function merge(data, scale) {

  let newData = [data[0]];

  let i;
  for (i = 1; i < data.length; i++) {
    const previous = newData[newData.length - 1];
    const distance = scale(data[i].date) - scale(previous.date);
    if (Math.abs(distance) < 2 * NODE_RADIUS) {
      const averageDate = new Date(
        (data[i].date.getTime() * data[i].count + previous.date.getTime() * previous.count)
        / (data[i].count + previous.count)
      );
      const count = previous.count;
      newData.pop();
      newData.push({ date: averageDate, count: data[i].count + count });
    }
    else
      newData.push(data[i]);
  }

  return newData;
}

updateCircles(xScale);

#timeline {
  overflow: hidden;
}
#timeline svg { padding: 20px 30px; overflow: hidden; }
.axis text {
  font-family: sans-serif;
  font-size: 10px;
}
.axis path,
.axis line {
  stroke: 3px;
  fill: none;
  stroke: black;
  stroke-linecap: round;
}
.node {
  stroke-width: 3px;
  stroke: white;
}
.node-label {
  font-family: sans-serif;
  font-size: 11px;
}
.node.proficient {
  fill: green;
  stroke: green;
}
.node.not-proficient {
  fill: orange;
  stroke: orange;
}
.node.summative {
  stroke: none;
}
.node.formative { fill: white; }

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="timeline"></div>

(d3) Dynamic binning for single-axis, zoomable timeline?

Tags:

Brendan

1 Answers

Xavier Guihot

Recent Activity

Donate For Us

(d3) Dynamic binning for single-axis, zoomable timeline?

Tags:

Brendan

1 Answers

Xavier Guihot

Related questions

Recent Activity

Donate For Us