Clustering timeline data in d3

Question

I have a timeline of events that I'm plotting. Each event is represented by a circle whos radius is scaled to the amount of events for a given timestamp. Sample of data:

[
  {
    date: <Date>,
    count: 4
  },
  {
    date: <Date>,
    count: 9
  },
  {
    date: <Date>,
    count: 4
  },
  {
    date: <Date>,
    count: 3
  }
]

Example of timeline output from data above

Notice that two of the circles are overlapping. This happens even more if you zoom the timeline out. I'd like to implement some sort of clustering of data so that circles that overlap are merged into one circle that sums the count of events and averages the date of the event. So in the example above, you'd have three circles with a count of 4, 13, and 3. Zooming in on the timeline would eventually get to a point where all 4 circles could be drawn, so at that point none of the data points would be clustered.

One last wrinkle, I'd also like the chart to be responsive to browser resizing. Making the browser smaller reduces the space available for the timeline, so I need to cluster more data so that it fits.

Any suggestions are welcomed.

Answer 1

There's a dynamic axis on this brush that's responsive to screen size:

http://bl.ocks.org/emeeks/raw/c478e0aac6373a6a4ec8/

This is instantiated using d3.time.scale and d3.svg.axis. There's too much code to recapitulate here, but the important thing to notice is that d3.time.format is being used for the tick values. You could use d3.time.format as a nesting parameter for your clustering, and change the format to match the granularity of your data.

So if you had five events:

var events = [{"label": "event 1", "timestamp": " Mon Dec 23 2013 7:47  GMT-0800 (PST)"},
              {"label": "event 2", "timestamp": " Tue Dec 24 2013 7:47  GMT-0800 (PST)"},
              {"label": "event 3", "timestamp": " Tue Dec 24 2013 7:47  GMT-0800 (PST)"},
              {"label": "event 4", "timestamp": " Fri Dec 25 2013 7:47  GMT-0800 (PST)"},
              {"label": "event 5", "timestamp": " Wed Jan 1 2014 7:47  GMT-0800 (PST)"}]

You could set d3.time.format to aggregate by day or hour or month or any time increment. Here we'll just do date:

var f = d3.time.format('%d')

And you can use that as your nesting parameter in d3.nest():

var nest = d3.nest()
.key(function(d) {return f(new Date(d.timestamp))})
.entries(events)

The contents of nest are:

 [
 {"key":"23","values":[
   {"label":"event 1","timestamp":" Mon Dec 23 2013 7:47  GMT-0800 (PST)"}]
 },
 {"key":"24","values":[
   {"label":"event 2","timestamp":" Tue Dec 24 2013 7:47  GMT-0800 (PST)"},
   {"label":"event 3","timestamp":" Tue Dec 24 2013 7:47  GMT-0800 (PST)"}]
 },
 {"key":"25","values":[
   {"label":"event 4","timestamp":" Fri Dec 25 2013 7:47  GMT-0800 (PST)"}]
 },
 {"key":"01","values":[
   {"label":"event 5","timestamp":" Wed Jan 1 2014 7:47  GMT-0800 (PST)"}]
 }
 ]

In this case, your circle size can be based on values.length (indicating the number of events clustered on that time period) and your position and formatter can adjust dynamically based on zoom and screen size.