Building flexible layouts

In this next example, we will be creating a chart with two subplots. Each plot will have a different y-axis that displays different information, but both plots will share the same x-axis.

The chart shows the majority party in both the Senate and the House of Representatives since 1855. Years where the Democrats were the majority party have a blue fill, while years where the Republicans were the majority party have a red fill.

In order to start, you will need these two data sets: senate.json, house.json.

We start out by creating a Scales.Linear and an Axes.Numeric that will be shared between the two plots. The axis will go at the bottom of our chart.

var xScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");

Now we can assemble the components for our first chart.

var yScale_senate = new Plottable.Scales.Linear();
var yAxis_senate = new Plottable.Axes.Numeric(yScale_senate, "left");
var plot_senate = new Plottable.Plots.Bar()
  .x(function(d) { return d.start_year; }, xScale)
  .y(function(d) { return d.democrats - d.republicans; }, yScale_senate)
  .attr("fill", function(d) { return d.democrats - d.republicans > 0 ? "#0000FF" : "#FF0000" }, colorScale);
var label_senate = new Plottable.Components.AxisLabel("Senate", -90);

We do more or less the same thing for our second chart.

var yScale_house = new Plottable.Scales.Linear();
var yAxis_house = new Plottable.Axes.Numeric(yScale_house, "left");
var plot_house = new Plottable.Plots.Bar()
  .x(function(d) { return d.start_year; }, xScale)
  .y(function(d) { return d.democrats - d.republicans; }, yScale_house)
  .attr("fill", function(d) { return d.democrats - d.republicans > 0 ? "#0000FF" : "#FF0000" }, colorScale);
var label_house = new Plottable.Components.AxisLabel("House", -90);

We assemble the chart like so within a Table

var chart = new Plottable.Components.Table([
  [label_senate, yAxis_senate, plot_senate],
  [label_house, yAxis_house, plot_house],
  [null, null, xAxis]
]);

As we mentioned in the first tutorial, we use null in order to signify that a cell is not occupied by any components. The above represents a 3 by 3 table, where the labels are in the first column, the y axes are in the second column, and the plots and the x axis are in the last column.

Finally, we render our Table to the SVG element.

chart.renderTo("svg#example");

For this particular example, we opt to load our data via AJAX. Note that adding a new Dataset will automatically redraw the Plot.

// Load data for the Senate
$.get("/tutorials/layouts/senate.json", function(data) {
  plot_senate.addDataset(new Plottable.Dataset(data));
});

// Load data for the House
$.get("/tutorials/layouts/house.json", function(data) {
  plot_house.addDataset(new Plottable.Dataset(data));
});

Now it's time to move on to the final tutorial, adding user interactions

The full code for this example is here:

var colorScale = new Plottable.Scales.Color();
var xScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");

var yScale_senate = new Plottable.Scales.Linear();
var yAxis_senate = new Plottable.Axes.Numeric(yScale_senate, "left");
var plot_senate = new Plottable.Plots.Bar()
  .x(function(d) { return d.start_year; }, xScale)
  .y(function(d) { return d.democrats - d.republicans; }, yScale_senate)
  .attr("fill", function(d) { return d.democrats - d.republicans > 0 ? "#0000FF" : "#FF0000" }, colorScale);
var label_senate = new Plottable.Components.AxisLabel("Senate", -90);

var yScale_house = new Plottable.Scales.Linear();
var yAxis_house = new Plottable.Axes.Numeric(yScale_house, "left");
var plot_house = new Plottable.Plots.Bar()
  .x(function(d) { return d.start_year; }, xScale)
  .y(function(d) { return d.democrats - d.republicans; }, yScale_house)
  .attr("fill", function(d) { return d.democrats - d.republicans > 0 ? "#0000FF" : "#FF0000" }, colorScale);
var label_house = new Plottable.Components.AxisLabel("House", -90);

var chart = new Plottable.Components.Table([
  [label_senate, yAxis_senate, plot_senate],
  [label_house, yAxis_house, plot_house],
  [null, null, xAxis]
]);

chart.renderTo("svg#example");

$.get("senate.json", function(data) {
  plot_senate.addDataset(new Plottable.Dataset(data));
});

$.get("house.json", function(data) {
  plot_house.addDataset(new Plottable.Dataset(data));
});