Space Race

var parseTime = function(dateString) {
  return new Date(dateString);
}
var xScale = new Plottable.Scales.Time();
var yScale = new Plottable.Scales.Category();
var xAxis = new Plottable.Axes.Time(xScale, "bottom")
.margin(5)
.annotationsEnabled(true);

var fillColorScale = new Plottable.Scales.Color()
.domain(["USA", "USSR"])
.range(["#0052A5", "#FF2400"]);

var legend = new Plottable.Components.Legend(fillColorScale);
var title = new Plottable.Components.TitleLabel("Space Race", 0)
.yAlignment("top");

var timeline = new Plottable.Plots.Scatter()
.x(function(d) { return parseTime(d.date); }, xScale)
.y(function() { return 0; }, yScale)
.size(30)
.attr("opacity", 1)
.attr("stroke-width", 1)
.attr("fill", function(d) {
  return d.country;
}, fillColorScale)
.attr("stroke", "#ffffff")

var guideline = new Plottable.Components.GuideLineLayer("vertical")
.scale(xScale);

var group = new Plottable.Components.Group([guideline, timeline, legend, title]);
var table = new Plottable.Components.Table([[group],
                                            [xAxis]]);
table.renderTo("svg#example");

new Plottable.Interactions.PanZoom(xScale, null)
.attachTo(timeline)
.minDomainExtent(xScale, 1000 * 60 * 60 * 24 * 365)
.maxDomainExtent(xScale, 1000 * 60 * 60 * 24 * 365 * 20);;

new Plottable.Interactions.Pointer()
.attachTo(table)
.onPointerMove(function(p) {
  var entity = timeline.entityNearest(p);
  var date = parseTime(entity.datum.date);
  guideline.value(date);
  xAxis.annotatedTicks([date]);
  title.text(entity.datum.event);
})
.onPointerExit(function() {
  guideline.pixelPosition(-10);
  xAxis.annotatedTicks([]);
  title.text("Space Race");
});

d3.json("spacerace.json", function(e, d) {
  var dataset = new Plottable.Dataset(d);
  timeline.addDataset(dataset);
});