README.md includes a bug.
.showBorder() in the manual should be corrected to showBorderLine().

It would be great if one could zoom in on the timeline with the mousewheel (perhaps only along x axis) and move the timeline with dragging. Currently there are only examples of using the mousewheel for horizontal scrolling. Any suggestions on how one could implement this?

I'm not sure what's causing it, but trying to specify a end date/time while using relativeTime() will cause it (and the browser) to hang.

Minimized test case as follows, by modifying the example html:

var data = [
{times: [{starting_time: 1466100000000, ending_time: 1466100000000}]},
];

var width = 600;
var chart = d3.timeline()
             .ending(1466100000000)
             .relativeTime();

var svg = d3.select("#timeline1").append("svg").attr("width", width)
            .datum(data).call(chart);

If it transpires that all of your data points are coincident then beginning will equal ending and https://github.com/jiahuang/d3-timeline/blob/master/src/d3-timeline.js#L223 will become undefined causing errors like:

Error: <circle> attribute cx: Expected length, "NaN".

It's trivial to add a default window in such cases, although the choice of sensible width is not obvious.

// (after line 220)
//
// If all the times are the same, force the timeline to cover
// 12 hours on either side.
//
if (beginning === ending) {
  beginning -= (12 * 60 * 60 * 1000);
  ending += (12 * 60 * 60 * 1000);
}

uncaught exception: width of the timeline is not set

I'm struggling trying to add timezone support for my little project, but I can't yet figure out how to show the data (which is in UTC) to UTC. Instead of that, I get the translated time (UTC-3) in my case. I'm missing something?

In the README.md what format is the starting_time and ending_time in?

If I have a dates like (Jun 1 2014, July 1 2014, Aug 1 2014), how do I put those on this time series?

I would like to display a tooltip on each time point using qTip. I believe I need to get the id of each element inside the hover function to call qtip on it. Problem is that I can't seem to reconstruct the name of the element using d,i and datum. The element id should be in the form of timelineItem_j_i, but I don't know what the recommended way is to get the j variable (Im using a stacked timeline). I could set the class attribute in the data, but I'd prefer to keep the styling logic out.

If I render a timeline behind a Bootstrap tab that is not visible, the timeline is created with an attribute of height="0".

For example, consider a page with two tabs named A and B. B will contain the timeline and is asynchronously loaded. That is, when the page is loaded, A is visible by default and users can click B to see the timeline. If the user clicks B before the data is loaded, they see a "loading" message.

The bug is: If the timeline renders before the user clicks B, the svg will have a height of 0 (it is not visible).

Note that if the user clicks B while the timeline is loading, things work as expected.

I think that the height calculation is somehow dependent on whether the timeline is visible or not. I've worked around the issue by setting the height explicitly.

I want to added times(multi row) at label.
how can i added times?

like below

person a weebee1 weebee2
<>>>>>> weebee3
<>>>>>>>>>>>> weebee4

person b

<>>>> is just cheat..
maybe this board remove the blank..

I think it would be great to allow one to make a timeline with both rectangles and circles. That way events without a stop date could be displayed as a circle, whereas events with start and stop date could be a rectangle. Is this possible in the current implementation?

Interesting library, kudos to the creators!

Looked through the code unfortunately could not figure out how to change the time scale. In particular i want to have seconds on X axis. Here is my data set I try to render:

{
  "times": [
    {
      "starting_time": 1458012262211,
      "ending_time": 1458012262720,
      "label": "[Follower]",
      "color": "green"
    },
    {
      "starting_time": 1458012262720,
      "ending_time": 1458012263121,
      "label": "[Candidate]",
      "color": "Purple"
    },
    {
      "starting_time": 1458012263121,
      "ending_time": 1458012263288,
      "label": "[Leader]",
      "color": "blue"
    }
  ],
  "label": "10.10.10.1,3000"
}

Any hint highly appreciated,
Cheers!

The word "sepArators" is spelled with an a, not an e as in "sepErators". If changing the name of the function isn't desirable due to breaking backwards compatibility, perhaps adding a wrapper function with the correct spelling could be useful?

The labels don't appear to move with a change to the top margin.

Not familiar with pulling/amending/adding code here, so here's a suggestion to keep the label aligned with the bar.

I have amended the "var rowsDown" line.

var appendLabel = function (gParent, yAxisMapping, index, hasLabel, datum) {
  var fullItemHeight    = itemHeight + itemMargin;
  var rowsDown          =  margin.top + (fullItemHeight/2) + fullItemHeight * (yAxisMapping[index] || 1);

  gParent.append("text")
    .attr("class", "timeline-label")
    .attr("transform", "translate(" + labelMargin + "," + rowsDown + ")")
    .text(hasLabel ? labelFunction(datum.label) : datum.id)
    .on("click", function (d, i) { click(d, index, datum); });
};

Can you please create a new tag + version bump in the bower.json + package.json?
It's not so nice to have the lib included with git url + branch :(

Thanks in advance

Looks like the gant chart examples do not show labels on the left. This is shown in the PNG's but none of these examples show code that will product the picture

           var labelTestData = [ 
             {label: "person a", times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]}, 
             {label: "person b", times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}, ]}, 
             {label: "person c", times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}, 
            ];

How could one plot live data? Lets say I have a variable data that changes every second. It can have values 1 to 5 (should be plotted with different colors).

var data  =  {
  value: chance.integer( { min: 1, max: 5 } ),
  timestamp: new Date().getTime()
}

http://rawgit.com/jiahuang/d3-timeline/master/examples/example.html

Currently the timeline shows the date on the x axis. In certain situations it would be more useful to show number of days/time since the first event. Do you have any tips on how to add this to d3-timeline?

I assume most regression testing is currently done by looking at example.html and seeing if any of the examples break. Maybe we can add a screenshot of example.html in the repo to be able to see on GitHub how the commits change the example page, similar to: cBioPortal/clinical-timeline@05e9245. That screenshot has been generated with PhantomJS. A screenshot per example would be better, but it's a start. I'm not very familiar with JS testing so let me know what you think.

I'd like to use tickValues (https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues) to set specific axis values. Can you recommend a way how to do that?

Is it possible to modify the scrolling behaviour, so that labels are still displayed after scrolling to the right?

All your examples seem to show just time of a day.
Can your timeline represent multiple years?

If a time series contains more than one item, the plugin will produce rect elements with duplicate IDs. This can be seen in several of the timelines in the example timeline, such as timeline5. This is invalid HTML and also prevents us from using callbacks like mouseover and hover to uniquely identify a segment of the timeline.

I've implemented a simple fix for this in my fork of the project, but it will break any existing code that relies on the duplicate IDs to highlight an entire timeline. I'd imagine it would probably be best to use a class rather than IDs to provide that functionality.

I'd be happy to help if you're interested in fixing this, though I don't know how you'd want to approach the issue of maintaining compatibility with old code. Thanks for the great plugin!

As I understand (and tested) right now you cannot show data from before epoch 0, right?

this isn't actually implemented

adding rotateTicks when you have times with labels rotates the ticks and the labels.

here's a patch to just rotate ticks:

  if (rotateTicks) {
    g.selectAll(".tick text")
      .attr("transform", function(d) {
        return "rotate(" + rotateTicks + ")translate("
          + (this.getBBox().width / 2 + 10) + "," // TODO: change this 10
          + this.getBBox().height / 2 + ")";
      });
  }

Hi. I know this isn't a real issue, but it seems like your headings are not set properly in the Docs on GitHub. Perhaps if you add a space after the # in each heading, that would resolve it... unless your formatting is intentional, of course.

In the readme: https://github.com/jiahuang/d3-timeline/blob/master/examples/timeline4.png

"person" is vertically aligned with the bar. This is pleasing! 👍

However, when I look at the example (https://github.com/jiahuang/d3-timeline/blob/master/examples/example.html) it is not well aligned at all. "person" is shifted down several pixels. (See screenshot.)

I literally downloaded the example, so I'm not sure what I could have done wrong:

• clone the repro to /tmp
• Open file:///tmp/d3-timeline/examples/example.html in Firefox on OSX

Presently the plugin assumes that the user only wants a linear scale and axis.

Example.html labels don't appear when d3-timeline is installed with bower. But works when I replace code from src/d3-timeline.js

FYI bower installed 0.0.5 version

Change #d3-timeline A simple d3 timeline plugin.
to # d3-timeline A simple d3 timeline plugin.

Stay a blank space before your content. Then you can see the heading format on your README.md. Like the following,

d3-timeline A simple d3 timeline plugin.

I am having a problem that my x axis labels are truncated. I can only see the top 5 pixels approximately. So the words are cut off, see screenshot.

I am using Chrome Version 41.0.2272.118 (64-bit)
Code snippets below. Adding CSS did not help.

<div class="biolog-timeline">
        <svg id="timeline" width="100%"></svg>
    </div>

.biolog-timeline {
    width: 1200px;
    margin-bottom: 100px;
}
#timeline {
    margin-bottom: 100px;
}

Template.timeline.rendered = function() {
    timelineChart = d3.timeline()
        .stack()
        .tickFormat({
            format: d3.time.format("%-m/%y"),
            tickTime: d3.time.months,
            tickInterval: 1,
            tickSize: 5
        })
        .itemHeight(15)
        .margin({left:100, top: 0, right: 0, bottom: 200})
        .orient("bottom")
        .width(1200);
};

Tracker.autorun(function () {
    var timelineDataObj = getTimelineData();
    //console.log("timeline Tracker.autorun: timelineChart?" + (! timelineChart) + "; timelineDataObj=" + JSON.stringify(timelineDataObj));
    if (!timelineChart) return;

    timelineChart.beginning(timelineDataObj.beginning);
    timelineChart.ending(timelineDataObj.ending);

    if (!timelineDataObj.data || !timelineDataObj.data.length) return;
    console.log("PLOTTING: " + JSON.stringify(timelineDataObj));
    var svg = d3.select("#timeline")
        .append("svg")
        .attr("width", "800")
        .datum(timelineDataObj.data)
        .call(timelineChart);
});

Here is my data

PLOTTING: {"data":[{"id":"edb6076fab7b392dfbb4a177","label":"Chest pain (started 4/13)","times":[{"starting_time":1423583272059,"ending_time":1429599600000}]},{"id":"653fac290920a5bebfb8141f","label":"Diabetes type 2 (started 3/15)","times":[{"starting_time":1427698800000,"ending_time":1430550000000}]},{"id":"c279492f8260d0d680457710","label":"Benign Essential hypertension (HTN) (started 3/15)","times":[{"starting_time":1427698800000,"ending_time":1430463600000}]},{"id":"849525affdbd3e916b6294f5","label":"Hypoglycemia (low blood sugar) (started 3/15)","times":[{"starting_time":1427785200000,"ending_time":1430550000000}]},{"id":"7fa3bc97eaec7dc90c089769","label":"History of heart attack (started 4/15)","times":[{"starting_time":1428811200000,"ending_time":1429070400000}]},{"id":"b8f02798aa6367eb7722eef4","label":"Dyspnea (shortness of breath) on exertion (started 3/15)","times":[{"starting_time":1425186000000,"ending_time":1428842762059}]}],"beginning":1423583272059,"ending":1430550000000}

I try to run next code:

var timeData = JSON.parse('[{"label":"200","times":[{"starting_time":1438934855,"ending_time":1438936712,"color":"rgb(81, 163, 81)"}]},{"label":"0","times":[{"starting_time":1438935515,"ending_time":1438936724,"color":"rgb(189, 54, 47)"}]}]');

var chart = d3.timeline();

var svg = d3.select("#timeline1").append("svg").attr("width", window.innerWidth - 600)
                .datum(timeData).call(chart);

But I don't see the tick labels
What I'm doing wrong?

Hi. You work is great that is saved me lots of work. Is there a way to programmatically move the timeline to the right if it is scrollable?

Thank you!

When horizontal scrolling is enabled, how do I prevent the label from being overlapped by the data?

Where can I set this options to let label hover event relate to the timeline item, which will become more friendly to users. Thanks

The label At Loading and At Unloading are overlapping and the timeline is for 2-3 days. In order to show a wide timeline like that I would prefer start and end ticks and their corresponding time values only. How to hide those unnecessary ticks

Is there a reason why labels are not showing at the beginning and end of the timeline but only in the middle?
Thank you!

For instance this setup:

"starting_time": 1155752800000, "ending_time": 1355759900000

hangs browser almost forever

On one of the examples, if you change add the .orient("top") to the chart as such

 function timelineLabelColor() {
        var chart = d3.timeline()
          .beginning(1355752800000) // we can optionally add beginning and ending times to speed up rendering a little
          .ending(1355774400000)
          .stack() // toggles graph stacking
          .orient("top") // AS SUCH
          .margin({left:70, right:30, top:0, bottom:0})
          ;
        var svg = d3.select("#timeline6").append("svg").attr("width", width)
          .datum(labelColorTestData).call(chart);
      }

You end up with axis labels overlapping the chart content

Hey, are there any plans to support v4 of d3?

I want to show a series of points (circles) across several months. I can't get a scale going with days instead of hours. All your examples use hours. Please explain how to achieve ticks in the "23 Feb" format.

At the moment I have this:

    var chart = d3.timeline()
        .tickFormat({
            format: d3.time.format("%e %b"),
            tickTime: d3.time.days,
            tickInterval: 1,
            tickSize: 20
        })
      .display("circle");

But I only get a blank tick on the left and right of my axis with the following test data:

  var testData = [
    {times: [
        {"starting_time": 1431248400, "ending_time": 1431252000},
        {"starting_time": 1431338400, "ending_time": 1431342000},
        {"starting_time": 1431680400, "ending_time": 1431684000}
    ]},
    {times: [
        {"starting_time": 1432285200, "ending_time": 1432292400},
        {"starting_time": 1433156400, "ending_time": 1433160000},
        {"starting_time": 1433332800, "ending_time": 1433340000}
    ]},
    {times: [
        {"starting_time": 1430229600, "ending_time": 1430236800},
        {"starting_time": 1430305200, "ending_time": 1430312400},
        {"starting_time": 1431874800, "ending_time": 1431885600}
    ]}
  ];

Thanks

Please create a new version tag so, the Firefox fix is propagated to bower and other lib management systems

Thanks for your timeline, which is working good. Can I able to use this for Dateline purpose like below

If it possible then kindly tell me the steps

I have a big dataset and want to show only some of my data. I'm using beginning() and end() for that.
But the data is visible outside the axis (in the margin). The data should be cropped by beginning() and end !

With the latest released version (0.0.5) the graph's labels are not shown. After downloading the newest changes those labels do appear, but they are moved a few pixels to the bottom, whereas the previous version (0.0.4) did work correctly.
Is there something I need to consider using the newest version or should still work the same?

Vertical scrolling should work like horizontal scrolling. Maybe also have the axis be hoverable?

Firstly thanks for this library, I've been enjoying using it on an internal project.

I was wondering if there is a way to stack the times as well as the timeline items so that you can see overlapping data?