Components Interactions Examples Tutorials API FAQ

Tick Generator

d3.json("tickGenerator.json", function(error, data) {
  var xScale = new Plottable.Scales.Linear()
  .domain([0, 600]);
  var xScaleTicks = [];
  data.forEach(function(d) {
    xScaleTicks.push(d.x);
  });
  xScale.tickGenerator(function() {
    return xScaleTicks;
  });

  var yScale = new Plottable.Scales.Linear();
  var yScaleTickGenerator = Plottable.Scales.TickGenerators.intervalTickGenerator(50000);
  yScale.tickGenerator(yScaleTickGenerator);

  var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
  var yAxis = new Plottable.Axes.Numeric(yScale, "right")
  .tickLabelPosition("top");

  var plot = new Plottable.Plots.Line();
  plot.x(function(d) { return d.x; }, xScale)
    .y(function(d) { return d.y; }, yScale)
    .addDataset(new Plottable.Dataset(data));

  var gridlines = new Plottable.Components.Gridlines(xScale, yScale);

  var group = new Plottable.Components.Group([plot, gridlines, yAxis]);
  var table = new Plottable.Components.Table([
    [group],
    [xAxis]
  ]);
  table.renderTo("svg#example");
});