Open source timeline

[tangospring]

• Timeline from KnightLab can use either Google Doc spreadsheet or Json file, version 3.0 allows multiple timelines per page http://timeline3.knightlab.com/, on GitHub: https://github.com/NUKnightLab/TimelineJS
  Can the image preview panel be switched off?
• Simile Widgets timeline: http://www.simile-widgets.org/timeline/
  Can use custom icons for events?
• Google timeline: https://developers.google.com/chart/interactive/docs/gallery/timeline
  Icons can be used as background attribute, where the length of the bar is preset to the width of a single icon.

Are any of these capable to represent this wireframe?

[QuestofIranon]

Checkout the Calendar view example for D3:

http://bl.ocks.org/mbostock/4063318

[tangospring]

http://bl.ocks.org/mbostock/4063318 is similar to GitHub timeline -- it does not distinguish the event types.

D3 library is great resource.
Event drops (also built on D3), https://github.com/marmelab/EventDrops looks promising -- it is event-type-based zoomable timeline. I wonder 1)if it can display multiple timelines on the same page; 2) if it can take icons to display events (my guess is yes, CSS background probably; if so we could drop Y axis legend).

[QuestofIranon]

It looks like maybe the part of the code that specifies drawing circles could be modified. For example I think the following code could be modified to use svg images instead of circles based on some searching I did.

        d3.select(this).selectAll('circle').remove();

        var circle = d3.select(this).selectAll('circle')
          .data(function(d) {
            // filter value outside of range
            return filterData(d.dates, config.xScale);
          });

        circle.enter()
          .append('circle')
          .attr('cx', function(d) {
            return config.xScale(d);
          })
          .style('fill', config.eventColor)
          .attr('cy', -5)
          .attr('r', 10)
        ;

        circle.exit().remove();